Combine 2 charts

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Hello,

I have created two charts in Quickbase. I would like to combine these charts into one chart. Please see attachments. Thank you.

Photo of Lynne8817

Lynne8817

  • 630 Points 500 badge 2x thumb

Posted 5 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
QuickBase uses the HighCharts library to generate it charts. While HighCharts is a very flexible generic charting package that uses SVG, QuickBase has only bound its graphical interface to specific types of charts. If you want a chart QuickBase has not integrated you have to directly call HighCharts - and it is easy to do. You would have to use the API to get the raw data your charts are based on and then directly call HighCharts to produce the combined chart.

See this example:

http://www.highcharts.com/demo/combo-dual-axes

This is nowhere as complicated as it may appear as HichCharts has placed all of their examples in jsfiddle and all you have to do is modify the parameters and substitute your data obtained from the QuicKBase API:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highch...
Photo of Lynne8817

Lynne8817

  • 630 Points 500 badge 2x thumb
Thank you.  Does this mean that every time I want to create this combined chart, I would need to go outside of Quickbase to do so?  Or, once I have created it once, it would live in my Qbase application and would update when new data was added?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
No - QuickBase has licensed HighCharts so you can directly call the HighCharts API from JavaScript hosted within a QuickBase user defined page.

So the URLs to HighChart example in the jsFiddle:

<script src="http://code.highcharts.com/highcharts.js"></script&gt;
<script src="http://code.highcharts.com/modules/exporting.js"></script&gt;

would be replaced in user defined pages with URLs within QuickBase:

<script src="https://quickbase.intuitcdn.net/res/59700-15/js/highcharts/highcharts.js"></script&gt;
<script src="https://quickbase.intuitcdn.net/res/59700-15/js/highcharts/modules/exporting.js"></script&gt;

If you are somehow embedding your chart in a QuickBase authored page the two HighChart JavaScript files are already loaded through RequireJS so you don't have to load anything extra.
Photo of Lynne8817

Lynne8817

  • 630 Points 500 badge 2x thumb
I have no idea what all of this means or what to do with it.  Any way to get a step-by-step list of how to do all of this?  Keep in mind, I am a "dummie".
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
I took the example from Highcharts:


Highcharts Combo Dual Axes Example

http://www.highcharts.com/demo/combo-dual-axes


and with minimal changes converted it to use QuickBase's licensed version of the libraries and draw its data from a QuickBase table:

Easy Peasy Highcharts

https://haversineconsulting.quickbase.com/db/biwzad883


Pastie Database

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=261
Photo of Lynne8817

Lynne8817

  • 630 Points 500 badge 2x thumb
I'm still not sure what to do with all of this.  Is there anyway you can walk me through the entire process of getting this to work with my data in my application?  Thank you
Photo of John

John

  • 0 Points
this example does not work anymore. why?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
Probably because the URLs to the HighChart libraries have changed with a new release version of QuickBase:

    <script src="https://quickbase.intuitcdn.net/res/63487-23/js/highcharts/highcharts.js"></script>
    <script src="https://quickbase.intuitcdn.net/res/63487-23/js/highcharts/modules/exporting.js"></script>

I just fixed it by changing the version to 70408-1:

    <script src="https://quickbase.intuitcdn.net/res/70408-18/js/highcharts/highcharts.js"></script>
    <script src="https://quickbase.intuitcdn.net/res/70408-18/js/highcharts/modules/exporting.js"></script>
Photo of John

John

  • 0 Points
ok, so is it possible to get this embedded into a webpage outside of quickbase?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
Photo of John

John

  • 0 Points
well that was easy enough! I was thinking that I would have to call the api then load the results into my highcharts.js on a webserver outside of quickbase. but this works too.
Photo of John

John

  • 0 Points
one more thing, how do you make the page accessible without logging in?
Photo of John

John

  • 0 Points
nm, figured it out :)