user1286856 user1286856 - 5 months ago 30
jQuery Question

Use a variable for Highcharts yAxis.Max

Im trying to pass a variable('maxValue') into my Highcharts guage . I cant get the variable to pass in successfully, the graph renders but without the value.

Ive tried Number and parseInt Functions but neither make a difference.

I setup a JS fiddle here: http://jsfiddle.net/d5d4cgbe/16/

The code section in question:

var maxValue = 120; //set the maxValue var

$('#visitPerformanceWeek').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: maxValue,
title: {
text: 'Hours Worked'
}
},


I will eventually be passing a value collected from an AJAX request, this part I have working but have excluded from the fiddle to keep it simple. Help appreciated

Answer

For setting the maxValue dynamically, something like setExtremes should do it. Try

chart.yAxis[0].setExtremes(0,maxValue);

Another alternative is the update method:

chart.yAxis[0].update({ max: maxValue });

For the maxValue to be displayed by the solidgauge, you need to specify a tickerInterval which divides into the maxValue. Presently, the chart is generating a default tick interval e.g. 10, which adds up to 100. For example, a maxValue of 120, you may set the tickInterval to 12

   yAxis: {
        min: 0,
        max: 120,
        tickInterval: 12,
        ...
   }

JSFiddle

Comments