jquery - Setting Highcharts Series and Category data dynamically -
im trying update chart via ajax call using following code
$j(document).ready(function () { $j("#filter").click(function () { buildreport(); }); $j("#container").highcharts({ chart: { type: 'column', marginright: 130, marginbottom: 100 }, title: { text: 'ses open group', x: -20 //center }, yaxis: { title: { text: '' }, min: 0, allowdecimals: false }, xaxis: {}, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'total: ' + this.point.stacktotal; } }, plotoptions: { column: { stacking: 'normal', cursor: 'pointer', } } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', x: -10, y: 100, borderwidth: 0 }, series: {} }); buildreport(); }); function setchartseries(series) { debugger; chart = $j("#container").highcharts(); chart.xaxis[0].setcategories(getreportcategories(series)); chart.series = $j.map(series, function (item) { return { name: item.name, color: item.colour, data: $j.map(item.items, function (list) { return { name: list.category, y: list.value, id: list.id }; }) }; }); } function getreportcategories(data) { var catarray = []; $j.each(data, function (index, value) { $j.each(value.items, function (index, value) { if ($j.inarray(value.category, catarray)) { catarray.push(value.category); } }); }); return catarray; } function buildreport() { $j.ajax({ url: "chartdatahandler.ashx", datatype: "json", cache: false, success: function (data) { setchartseries(data.series); } }); }
when page loads or filter button clicked buildreport calls handler , passes series data setchartseries. here can see chart properties set, chart never drawn. doing wrong?
if want create new series need use chart.addseries() method
if want set new data in existing series need use series.setdata() method.
as see, create new series each request , use addseries
method