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.