Skip to main content
Question

Force Secondary Chart Y Axis to Use Same Scale as Primary Y Axis

I have a line chart that shows activity for one year on the primary Y axis and activity for a second year on the secondary & axis. It would be helpful if both the primary and secondary axes used the same scale to facilitate comparisons between the activity for the two years. But the scale of the secondary axis will frequently be considerably different than that of the primary axis (see attached image to see how it can be misleading). I can see the value of having the axes have their scale automatically formed based on the data, but is there a way to force that secondary axis scale to remain the same as the primary axis scale? If not off the shelf, is this something that could be reasonably customized (and if so, could anybody point me in the right direction?)?
      This topic has been closed for replies.

      QuickBase uses Highcharts for their charting package. Although HighCharts is a general purpose library capable of producing a wide variety of charts:

      HighCharts Library
      http://www.highcharts.com/demo

      QuickBase has tightly bound specific charts to queries of table data. As a result if there is no control or setting to manipulate in the chart builder page you have no native option to modify the chart's characteristics. At this point you have to options to get a custom chart:

      (1) use a three step process to create a fully custom chart (a) gather your raw date using JavaScript and the QuickBase API, (b) process the data (count, filter, aggregate, bin etc) using JavaScript and libraries such as jQUery and Underscore, (QuickBase uses these libraries so they are already including on your page), and (c) throw the processed data into the setting object of HighChart along with all the other parameters that define the chart.

      (2) If you desired chart just needs a few tweaks to a QuickBase rendered chart you can use the technique demoed in the application to modify the chart:

      Un-HighCharted Waters ~ Click Green Button
      https://haversineconsulting.quickbase.com/db/bk89redf6?a=td

      In both cases the demos render a QuickBase chart and then after a delay re-render it with a small change. The delay is just to bedazzle you - in a production application the change will show up almost instantly.

      The change you want can be observed in these two jsFiddles and you can observe the slight differences in code by comparing the JavaSccript tabs as well as looking at the screenshot below:

      Before Change
      http://jsfiddle.net/1jgnjeab/embedded/result,js,html,css/

      After Change
      http://jsfiddle.net/bcmhhz11/embedded/result,js,html,css/




      Taken together the changes delete the second axes and tell the second time series to use the first axis definition.

      As applied to your chart you would have to follow a similar procedure as in the Hylo demo. What the code in the Hylo demo does is render the native QuickBase chart, extract the settings object and modify it and then re-render the chart. This may sound wickedly complex but the code is short.

      If you need further assistance implementing this feel free to contact me off-world using the information in my profile:

      https://getsatisfaction.com/people/dandiebolt
      Terms & ConditionsAccessibility statement