Hi
In theory stackedBar chart will suit you, but…
dhtmlx.com/docs/products/dht … chart.html
Unfortunatelly dhtmlxChart doesn’t allow such data grouping.
We can suggest you 2 ways:
1) reform your data structure
I.e. you have the next structure
var data = [
{id: 1, balance: 3, data: "2014-02-01", direction: "inbox"},
{id: 2, balance: 5, data: "2014-02-01", direction: "outbox"},
{id: 3, balance: 4, data: "2014-02-02", direction: "inbox"},
{id: 4, balance: 7, data: "2014-02-02", direction: "outbox"}
];
You can restruct it to
var data = [
{id: 1, balanceInbox: 3, balanceOutbox: 5, data: "2014-02-01"},
{id: 3, balanceInbox: 4, balanceOutbox: 7, data: "2014-02-02"}
];
And then you can buid your chart using “stackedBar” view the next way:
[code]var barChart1 = new dhtmlXChart({
view:“stackedBar”,
container:“chart1”,
value:“#balanceInbox#”,
label:“#balanceInbox#”,
color: “#58dccd”,
xAxis:{
template:“'#data#”
},
yAxis:{}
});
barChart1.addSeries({
value:"#balanceOutbox#",
color:"#a7ee70",
label:"#balanceOutbox#"
});
barChart1.parse(data,"json");[/code]
The result is:
2) build 2 charts: one will be with “Inbound” direction filtering, the second - with “Outbound” filtering
Based on the code sample below it will be:
[code]var barChart1 = new dhtmlXChart({
view:“bar”,
container:“chart1”,
value:“#balance#”,
label:“#balance#”,
color: “#58dccd”,
xAxis:{
template:“'#data#”
},
yAxis:{
start: 0,
end: 8,
step: 1
}
});
barChart1.parse(data,“json”);
barChart1.filter(function(obj){
return obj.direction == “inbox”;
});
barChart1.render();
var barChart2 = new dhtmlXChart({
view:"bar",
container:"chart2",
value:"#balance#",
label:"#balance#",
color: "#a7ee70",
xAxis:{
template:"'#data#"
},
yAxis:{
start: 0,
end: 8,
step: 1}
});
barChart2.parse(data,"json");
barChart2.filter(function(obj){
return obj.direction == "outbox";
});
barChart2.render();[/code]
The result is:
