Combination
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Combination</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<style>
.dhx_axis_item_x{
font-size: 11px
}
.dhx_axis_item_y{
font-size: 11px
}
</style>
<script>
var data = [
{ sales:3.0, sales2:12.0, year:"2003" },
{ sales:3.0, sales2:10.0, year:"2004" },
{ sales:3.4, sales2:9.0, year:"2005" },
{ sales:4.1, sales2:8.0, year:"2006" },
{ sales:4.3, sales2:9.0, year:"2007" },
{ sales:7.6, sales2:11.0, year:"2008" },
{ sales:7.8, sales2:13.0, year:"2009" },
{ sales:7.2, sales2:10.0, year:"2010" },
{ sales:5.3, sales2:14.0, year:"2011" },
{ sales:4.8, sales2:12.0, year:"2012" }
];
var myAreaChart;
function doOnLoad() {
myAreaChart = new dhtmlXChart({
view:"bar",
container:"chartbox",
value:"#salesA#",
color:"#00ccff",
width: 32,
gradient: "falling",
alpha: 0.8,
padding:{
left:30,
bottom: 50
},
radius:0,
yAxis:{
},
xAxis:{
lines:true,
title:"Sales per year",
template:"#id#"
},
legend:{
layout:"y",
width:100,
align:"right",
valign:"middle",
values:[
{text:"Company A",color:"#00ccff"},
{text:"Company B",color:"#e9df40"},
{text:"Average",color:"#b25151",toggle:true,markerType: "item"}
]
},
group:{
by:"#year#",
map:{
salesA:["sales2",getAny],
salesB:["sales",getAny],
salesAverage:["#sales#",getAverage]
}
}
});
myAreaChart.addSeries({
view:"area",
alpha:0.4,
value:"#salesB#",
color:"#e9df40"
});
myAreaChart.addSeries({
view:"line",
value:"#salesAverage#",
item:{
radius:2,
borderColor: "#7fa505"
},
line:{
color:"#7fa505",
width:2
}
});
myAreaChart.parse(data,"json");
};
function getAny(property, data){
return data[0][property];
}
function getAverage(property,data){
var count = 0;
var summ = 0;
for(var i = 0; i < data.length; i++){
summ += (parseFloat(data[i].sales)||0);
summ += (parseFloat(data[i].sales2)||0);
count +=2;
}
return count?summ/count:0;
}
</script>
</head>
<body onload="doOnLoad();">
<div id="chartbox" style="width:600px;height:250px;border:1px solid #c0c0c0;"></div>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.