javascript - Series Data for column high chart -
i working on highchart column chart. got stuck in series adding part. code
function renderchart(series_data){ $("#container").height(400); var chart = new highcharts.chart({ chart: { type: 'column', renderto: 'container', marginbottom: 105 }, title: { text: 'issue sales', }, xaxis: { type: 'datetime', datetimelabelformats: { month: '%e. %b', year: '%b' }, mintickinterval: 24 * 3600 * 1000, labels: { rotation: -45, align: 'right', style: { fontsize: '13px', fontfamily: 'verdana, sans-serif' } } }, yaxis: { plotlines: [{ value: 0, width: 1, color: '#808080' }], title: { text: 'number of units', margin: 80 } }, tooltip: { shared: true, valuesuffix: '' }, legend: { floating: true, borderwidth: 1, backgroundcolor: '#ffffff' }, series: {} }); $.each(series_data, function(key, val) { toseries = []; cat_name = key; date_data = []; xdate = ''; $.each(val,function(k,v){ chartdate = v.date; chartcount = v.count; dateval = chartdate.split("-"); x = date.utc(dateval[0], dateval[1] - 1, dateval[2]); toseries.push([x,chartcount]); }); chart.addseries({ name : cat_name, data : parsefloat(toseries) }); }); } if adding constant series data like
chart.addseries({ name: 'rainfall11', type: 'column', color: '#08f', data:[100, 200, 300, 400, 100, 200] }); some graph displaying. while coming dynamic data doesn't show up. using date.utc function display the
i sending json data through variable, series_data function renderchart result of ajax function . sample json result this.
{"ferrari april 2013":[{"date":"2013-06-05","month":"june-2013","count":"1.00"},{"date":"2013-06-08","month":"june-2013","count":"1.00"},{"date":"2013-06-15","month":"june-2013","count":"1.00"},{"date":"2013-06-16","month":"june-2013","count":"1.00"}],"ferrari may 2013":[{"date":"2013-06-05","month":"june-2013","count":"1.00"},{"date":"2013-06-07","month":"june-2013","count":"1.00"},{"date":"2013-06-08","month":"june-2013","count":"2.00"},{"date":"2013-06-09","month":"june-2013","count":"3.00"}],"ferrari march 2013":[{"date":"2013-06-07","month":"june-2013","count":"1.00"}],"ferrari june 2013":[{"date":"2013-06-10","month":"june-2013","count":"1.00"},{"date":"2013-06-11","month":"june-2013","count":"1.00"},{"date":"2013-06-12","month":"june-2013","count":"1.00"},{"date":"2013-06-13","month":"june-2013","count":"3.00"},{"date":"2013-06-14","month":"june-2013","count":"2.00"},{"date":"2013-06-16","month":"june-2013","count":"4.00"},{"date":"2013-06-17","month":"june-2013","count":"1.00"},{"date":"2013-06-18","month":"june-2013","count":"2.00"}],"ferrari february 2013":[{"date":"2013-06-11","month":"june-2013","count":"1.00"},{"date":"2013-06-18","month":"june-2013","count":"1.00"}]}
the problem comes in date.utc part guess . because when console.log() showing nan .
please fix issue.
i excepting result this.
var series_data = {"ferrari april 2013":[{"date":"2013-06-05","month":"june-2013","count":"1.00"}],"ferrari january 2013":[{"date":"2013-06-02","month":"june-2013","count":"1.00"}],"ferrari march 2013":[{"date":"2013-06-07","month":"june-2013","count":"1.00"}],"ferrari may 2013":[{"date":"2013-06-01","month":"june-2013","count":"1.00"},{"date":"2013-06-01","month":"june-2013","count":"1.00"},{"date":"2013-06-02","month":"june-2013","count":"2.00"},{"date":"2013-06-03","month":"june-2013","count":"2.00"},{"date":"2013-06-04","month":"june-2013","count":"1.00"},{"date":"2013-06-05","month":"june-2013","count":"1.00"},{"date":"2013-06-07","month":"june-2013","count":"1.00"}]}; renderchart(series_data) function renderchart(series_data){ var chart = new highcharts.chart({ chart: { type: 'column', renderto: 'container', marginbottom: 105 }, title: { text: 'issue sales', }, xaxis: { type: 'datetime', datetimelabelformats: { // don't display dummy year month: '%e. %b', year: '%b' }, mintickinterval: 24 * 3600 * 1000, labels: { rotation: -45, align: 'right', style: { fontsize: '13px', fontfamily: 'verdana, sans-serif' } } }, yaxis: { plotlines: [{ value: 0, width: 1, color: '#808080' }], title: { text: 'number of units', margin: 40 } }, tooltip: { shared: true, valuesuffix: '' }, legend: { floating: true, borderwidth: 1, backgroundcolor: '#ffffff' }, plotoptions: { column: { } }, series: {} }); $.each(series_data, function(key, val) { toseries = []; cat_name = key; date_data = []; xdate = ''; $.each(val,function(k,v){ chartdate = v.date; chartcount = v.count; dateval = chartdate.split("-"); x = date.utc(dateval[0], dateval[1] - 1, dateval[2]); toseries.push([x,parseint(chartcount)]); // parse data here! }); chart.addseries({ name : cat_name, data : toseries }); }); } hope works!
Comments
Post a Comment