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.

enter image description here

demo jsfiddle

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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -