highstock - Live plot with multiple y axis in highcharts -
i have created live line chart multiple y-axis.on-click of legends,creating y- axis.
here demo http://jsfiddle.net/ashwinp/j7lmp/3/
first thing, not showing scale values on each y axis,just showing title.
second thing,
i used linkedto -- > inheriting primary y axis.
here demo http://jsfiddle.net/ashwinp/j7lmp/4/
here, want each y axis should have own scaling. should not inherit scaling primary y axis.
y axis should scale depending upon value of own series.
for example : series1 values falls between 1 100 may go beyond 100 time should auto scale. series2 : 200- 500 , series3: 600 1000
in case: yaxis1 min 1 , max 100 , y axis2 : 200-500 y axis3:600-1000
i used min , max , tick interval auto re-sizing when values goes beyond.used setextrem workaround solution.
thanks in advance
$(function () { $(document).ready(function () { rawdatachartwithmultiyaxis(); }); }); function addaxes(name, visiblity, index) { var chart = $('#container').highcharts(); if (visiblity == "hidden") { chart.addaxis({ id: name, title: { text: name }, linewidth: 2, linecolor: '#08f', labels: { format: '{value} ' + chart.series[index].tooltipoptions.valuesuffix, style: { color: '#4572a7' } }, opposite: false, linkedto:0 }); } else { chart.get(name).remove(); } } function rawdatachartwithmultiyaxis() { var = 0; new highcharts.chart({ chart: { renderto: 'container', type: 'line', alignticks: true, animation: highcharts.svg, // don't animate in old ie events: { load: function () { // set updating of chart each second var series = this.series[0]; var series1 = this.series[1]; var series2 = this.series[2]; setinterval(function () { var shift = series.data.length > 10; var x = a++, // current time y = parsefloat(math.random()); y1 = parsefloat(math.random() * 100); y2 = parsefloat(math.random() * 1000); series.addpoint([x, y], true, shift); series1.addpoint([x, y1], true, shift); series2.addpoint([x, y2], true, shift); }, 1000); } } }, plotoptions: { series: { animation: true, events: { click: function () { }, legenditemclick: function (event) { var visibility = this.visible ? 'visible' : 'hidden'; addaxes(this.name, visibility, this.index); } } } }, tooltip: { shared: true }, yaxis: { title: { text: 'x1' }, linewidth: 2, linecolor: '#f33' }, legend: { enabled: true }, series: [{ name: 'x1', data: [], tooltip: { valuesuffix: " qsu" } }, { name: 'x2', data: [], visible: false, tooltip: { valuesuffix: " ms/cm" } }, { name: 'x3', data: [], visible: false, tooltip: { valuesuffix: " celcius" } }] }); }
scale not displayed because serie not related axis. in other words, have scale, need have linked serie yaxis
Comments
Post a Comment