Interactive HighCharts on Dashboard

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
I'm about to hire a developer to create some HighCharts out of our QB data that I would then like to use on dashboards within Quickbase. Before I move forward I had a few questions for anyone that has done this before:

- Is it easy (or just explainable) how to add the SVG or JS code to a dashboard page once the chart is created? And to have more than one chart on a dashboard page.

- Can HighCharts act interactive on the QB dashboard, in terms of having something like a dropdown option to change the view or subset of records in the chart?

Thank you!!
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb

Posted 5 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
Yes you can place multiple custom highcharts on your dashboard and dynamically update them based on various user interactions. I have done this many times and the charts always look impressive. The general procedure is as follows:

  1. Place your code and any library references on a user defined page. You probably will want to include the Highcharts library along with jQuery and Underscore.
  2. Use the QuickBase HTTP API to obtain the raw data from the appropriate tables.
  3. Manipulate the data using jQuery and Underscore or raw JavaScript to process, transform and aggregate the data and otherwise prepare it for the format needed by HighCharts
  4. Using the jsfiddle code as a guide for the chart you want to create, merge the processed QuickBase data into the JavaScript: http://www.highcharts.com/demo
  5. Render the custom Highchart to your user defined page and update the data or chart parameters in reaction to user input.
If you have any further questions fee free to contact me using the information in my profile.
Photo of Brian

Brian

  • 0 Points
Dan, this was great.  It helped me create some really cool charts.  The only thing I haven't tackled yet, is having the user redirected to "report" page when they click on a node in my custom highchart.  Do you happen to have any examples of this laying around?

Thanks again.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
It depends on the chart type but all the event properties and methods are documented here:

http://api.highcharts.com/highcharts#chart.events