javascript - HighCharts activity gauge populated with series data from a function -
i'm trying populate highcharts dataset results sql server in classic asp. (in examples there numbers , names instead of vbscript variables)
the first example without function - , works. http://jsfiddle.net/p40472pz/
$(function () { var n = '<%=n11 %>' if (!highcharts.theme) { highcharts.setoptions({ chart: { backgroundcolor: 'rgba(255,255,255,0.002)' }, colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'], tooltip: { style: { color: '#a0a0a0' } } }); } // */ highcharts.chart('11', { chart: { type: 'solidgauge', margin: [0, 0, 0, 0] }, title: { text: '', style: { fontsize: '12px' } }, tooltip: { borderwidth: 1, backgroundcolor: 'white', shadow: false, usehtml: true, style: { fontsize: '14px', fontfamily: 'arial', direction: 'rtl' }, pointformat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>' // positioner: function (labelwidth, labelheight) { // return { // x: 120 - labelwidth / 2, // y: 20 // }; // } }, pane: { startangle: 0, endangle: 360, background: [{ outerradius: '112%', innerradius: '106%', backgroundcolor: '#eeeeee', borderwidth: 1 }, { outerradius: '99%', innerradius: '93%', backgroundcolor: '#eeeeee', borderwidth: 1 }] }, yaxis: { min: 0, max: 100, linewidth: 0, tickpositions: [] }, credits: { enabled: false }, plotoptions: { solidgauge: { borderwidth: '6px', datalabels: { enabled: false }, linecap: 'round', stickytracking: false } }, series: [{ name: 'name1', bordercolor: highcharts.getoptions().colors[0], data: [{ color: highcharts.getoptions().colors[0], radius: '109%', innerradius: '109%', y: 80 }] }, { name: 'namme2', bordercolor: highcharts.getoptions().colors[1], data: [{ color: highcharts.getoptions().colors[1], radius: '96%', innerradius: '96%', y: 65 }] }] }); });
i cannot find what's right way function http://jsfiddle.net/x7a2f91r/
$(function () { var n=2 var brcolor = [] var tl = [] var frcolor = [] var rd = [] var gg = [] brcolor[1] = '#666666' brcolor[2] = '#666666' tl[1] = 'name1' tl[2] = 'name2' frcolor[1] = '#666666' frcolor[2] = '#666666' rd[1] = '109%' rd[2] = '96%' gg[1] = 80 gg[2] = 65 if (!highcharts.theme) { highcharts.setoptions({ chart: { backgroundcolor: 'rgba(255,255,255,0.002)' }, colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'], tooltip: { style: { color: '#a0a0a0' } } }); } highcharts.chart('11', { chart: { type: 'solidgauge', margin: [0, 0, 0, 0] }, title: { text: '', style: { fontsize: '12px' } }, tooltip: { borderwidth: 1, backgroundcolor: 'white', shadow: false, usehtml: true, style: { fontsize: '14px', fontfamily: 'arial', direction: 'rtl' }, pointformat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>' // positioner: function (labelwidth, labelheight) { // return { // x: 120 - labelwidth / 2, // y: 20 // }; // } }, pane: { startangle: 0, endangle: 360, background: [{ outerradius: '112%', innerradius: '106%', backgroundcolor: '#eeeeee', borderwidth: 1 }, { outerradius: '99%', innerradius: '93%', backgroundcolor: '#eeeeee', borderwidth: 1 }] }, yaxis: { min: 0, max: 100, linewidth: 0, tickpositions: [] }, credits: { enabled: false }, plotoptions: { solidgauge: { borderwidth: '6px', datalabels: { enabled: false }, linecap: 'round', stickytracking: false } }, series: [] }); var newseries=[] (var i=1; i<n; i++){ var newdata[]; var seria={}; var datai={}; datai['color'] = frcolor[i]; datai['radius'] = rd[i]; datai['innerradius'] = rd[i]; dadai['y'] = gg[i]; seria['bordercolor'] = brcolor[i]; seria['name'] = tl[i]; seria['data'] = [datai[i]]; newseries.push(seria); } var chart = $('#11').highcharts(); $.each(newseries, function (i, ns) { chart.series[0].addpoint(ns); }); });
you have small typos / mistakes in code.
here:
dadai['y'] = gg[i];there nodadai, trying access - shoulddatai.here:
chart.series[0].addpoint(ns);should adding series instead of adding points not-existing series (because haveseries: [], no series).here:
seria['bordercolor'] = brcolor[i];option namedbordercolor- case sensitive, option not work.
fixed , working demo: http://jsfiddle.net/w5jxelmj/1/
var newseries=[] (var i=1; i<=n; i++){ var newdata=[]; var seria={}; var datai={}; datai['color'] = frcolor[i]; datai['radius'] = rd[i]; datai['innerradius'] = rd[i]; datai['y'] = gg[i]; seria['bordercolor'] = brcolor[i]; seria['name'] = tl[i]; seria['data'] = [datai]; newseries.push(seria); } var chart = $('#11').highcharts(); $.each(newseries, function (i, ns) { chart.addseries(ns, false); }); chart.redraw(); also, when doing more 1 dynamic change in chart call redraw should set redraw argument (e.g. of function addseries) false , call chart.redraw() after dynamic changes better performance , animation.
Comments
Post a Comment