I have created a Stacked Bar chart using the Js library dhtmlx, and here is the generated output:
The JSON data is structured as follows:
var data = [
{ "allocated":"20", "unallocated":"2", "day":"01/01/2014" },
{ "allocated":"12", "unallocated":"0", "day":"02/01/2014" },
{ "allocated":"2", "unallocated":"18", "day":"03/01/2014" },
{ "allocated":"22", "unallocated":"2", "day":"04/01/2014" },
{ "allocated":"3", "unallocated":"13", "day":"05/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"06/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"07/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"08/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"09/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"10/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"11/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"12/01/2014" },
{ "allocated":"6", "unallocated":"2.4", "day":"13/01/2014" },
{ "allocated":"14", "unallocated":"7", "day":"14/01/2014" },
];
To group my JSON data by WEEK, I used the following method:
var groupedByWeek = _.groupBy(data, function(item) {
var dateMoment = moment(item.day,"DD/MM/YYYY");
weeks = dateMoment.week();
array = [weeks]
return array;
});
After grouping, I obtained 3 array indexes from the data.
Object { 1: Array[4], 2: Array[7], 3: Array[3] }
My aim now is to set index 1 as the default value for my graph. Then, upon clicking the "NEXT" button, I want the array index to change incrementally one by one.
In essence, I wish to pass data week by week on the X-axis. Is there a way to achieve this by passing array indexes sequentially? Any help would be greatly appreciated.
The complete code of my HTML file is as follows:
<body>
<div id="chart1" style="width:1020px;height:300px;border:0px solid #000000;">
<div><a href="#">Next</a></div>
</div>
<script>
var barChart1 = new dhtmlXChart({
view:"stackedBar",
container:"chart1",
value:"#allocated#",
label:"#allocated#",
color: "#a24689",
// gradient:"falling",
width:40,
tooltip:{
template:"#allocated#"
},
xAxis:{
title:"Days",
template:"#day#",
},
yAxis:{
title:"Hours",
start:0,
step:4,
end:24
},
legend:{
values:[{text:"Completed Activities",color:"#a24689"},{text:"Undefined",color:"#F9D544"}],
valign:"top",
align:"center",
width:110,
layout:"x"
}
});
barChart1.addSeries({
value:"#unallocated#",
color:"#F9D544",
label:"#unallocated#",
tooltip:{
template:"#unallocated#"
}
});
var groupedByWeek = _.groupBy(data, function(item) {
var dateMoment = moment(item.day,"DD/MM/YYYY");
weeks = dateMoment.week();
array = [weeks]
return array;
});
console.log(groupedByWeek)
barChart1.parse(data,"json");
// console.log(data)
</script>