CODEWITHSUNDEEP
javascriptjqueryhighcharts
Anish
Anish

Reputation: 4978

Series Data for column high chart

I am working on highchart column chart. But I got stuck in series adding part. This is my 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 I am adding constant series data like

chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});

some graph is displaying. But while coming to dynamic data it doesn't show up. Also I am using Date.UTC function to display the

I sending the json data through the variable, series_data to the function renderChart that is the result of another ajax function . The sample json result is 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 the Date.UTC part i guess . Because when I do a console.log() it is showing NaN .

Please help to fix this issue.

I am excepting a result like this.

enter image description here

Demo Jsfiddle

Upvotes: 1

Views: 869

Answers (3)

rach
rach

Reputation: 679

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 the 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 your data here!  
});
chart.addSeries({
    name : cat_name,
    data : toSeries
});

});
 }

Hope it works!

Upvotes: 1

Sumit
Sumit

Reputation: 411

You are setting the chart before putting data inside it. First data series and then call Highcharts.Chart. Then your program will run for dynamic data also.

Upvotes: 1

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

chart.addSeries({
            data: [32, 43, 42],
            index: 0,
            zIndex:1
        });

Live Demo

Upvotes: 0

Related Questions