4

i am working on stacked bar charts using highcharts js api. i am getting x-axis and y-axis data altogether in json format. then i process on that json data to separate x-axis and y-axis with series name. here is the data that am getting from php.

$invest_data = [{"date":'Jun 1999', "company":'Koninklijke Philips Electronics N.V.', "netvalue":-649693}, {"date":'Nov 1999', "company":'Koninklijke Philips Electronics N.V.', "netvalue":-684506}, {"date":'Feb 2004', "company":'Koninklijke Philips Electronics N.V.', "netvalue":654546}, {"date":'Apr 2007', "company":'Koninklijke Philips Electronics N.V.', "netvalue":570714}, {"date":'Apr 2008', "company":'Koninklijke Philips Electronics N.V.', "netvalue":408931}, {"date":'Apr 2009', "company":'Koninklijke Philips Electronics N.V.', "netvalue":280295}, {"date":'Apr 2010', "company":'Koninklijke Philips Electronics N.V.', "netvalue":596167}, {"date":'Mar 2011', "company":'Dell Inc', "netvalue":40952}, {"date":'May 2011', "company":'Royal Dutch Shell', "netvalue":109165}, {"date":'Jul 2011', "company":'Vodafone Group', "netvalue":163900}, {"date":'Jul 2012', "company":'Dell Inc', "netvalue":179457}, {"date":'Mar 2013', "company":'Dell Inc', "netvalue":-1324}, {"date":'Apr 2013', "company":'Vodafone Group', "netvalue":17290}, {"date":'Jul 2013', "company":'Dell Inc', "netvalue":-14959}, {"date":'Oct 2013', "company":'Dell Inc', "netvalue":-305471}, {"date":'Feb 2014', "company":'Vodafone Group', "netvalue":3865}, {"date":'Mar 2014', "company":'Royal Dutch Shell', "netvalue":1385}, {"date":'May 2014', "company":'Vodafone Group', "netvalue":83640}, {"date":'Jun 2014', "company":'Royal Dutch Shell', "netvalue":1433}, {"date":'Aug 2014', "company":'Vodafone Group', "netvalue":7521}, {"date":'Dec 2014', "company":'Royal Dutch Shell', "netvalue":1293}, {"date":'Feb 2015', "company":'Vodafone Group', "netvalue":3757}, {"date":'Mar 2015', "company":'Royal Dutch Shell', "netvalue":1369}] 

Actually i want to draw stacked column chart that should show net transaction of each company on monthly basis. first value with index date is for x-axis and company should be series name and netvalue will be on y-axis.

here is my script to separate x-axis, y-axis data points and series name (company name)

var data = <?php echo $invest_data; ?>;
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
    cat = data[i].date;
    if(xCategories.indexOf(cat) === -1){
       xCategories[xCategories.length] = cat;
    }
}
console.log(xCategories);
for(i = 0; i < data.length; i++){
    if(seriesData){          
        var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name === data[i].company;});
        if(currSeries.length === 0){
            seriesData[seriesData.length] = currSeries = {name: data[i].company, data: []};
        } else {
            currSeries = currSeries[0];
        }
        var index = currSeries.data.length;
        currSeries.data[index] = data[i].netvalue;
    } else {
        seriesData[0] = {name: data[i].company, data: [data[i].netvalue]};
    }
}

below is the chart script

var chart;   
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'invest-timeline',
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        labels: {
            rotation: - 90,
            align: 'right'
        },
        categories: xCategories
    },
    yAxis: {
        allowDecimals: false,
        //min: 0,
        title: {
            text: 'Net Transaction'
        }
    },
    legend: {
        borderWidth: 0
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                this.series.name +': '+ this.y +'<br/>'+
                'Total: '+ this.point.stackTotal;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: seriesData
});  

the issue is with the seriesData, it contains object data but i need json format. x-axis data points are not showing correctly. it only shows 7 x-axis data points as i have 7 records against first company.x-axis should show all the points which is 23 in number. Any help will be appreciated. Many Thanks.

Dev001
  • 276
  • 1
  • 7
  • 25
  • post your json sample – Nishith Kant Chaturvedi Dec 18 '15 at 10:30
  • this for x-axis: `["Jun 1999", "Nov 1999", "Feb 2004", "Apr 2007", "Apr 2008", "Apr 2009", "Apr 2010", "Mar 2011", "May 2011", "Jul 2011", "Jul 2012", "Mar 2013", "Apr 2013", "Jul 2013", "Oct 2013", "Feb 2014", "Mar 2014", "May 2014", "Jun 2014", "Aug 2014", "Dec 2014", "Feb 2015", "Mar 2015"]` SeriesData like this: `[Object { name="Koninklijke Philips Electronics N.V.", data=[7]}, Object { name="Dell Inc", data=[5]}, Object { name="Royal Dutch Shell", data=[5]}, Object { name="Vodafone Group", data=[6]}]` – Dev001 Dec 18 '15 at 10:35

0 Answers0