You must be logged in to post your query.
Home › Forums › Chart Support › Plotting two area graphs together
Tagged: Area Two Datasets
By design you can only have on data series for an area graph. This didn’t work for me. So, I found this way to show two area plots together. Let me know if there is a better workaround.
First the HTML <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <style>
</style> </head> <body> <div id=”master” style=”position:left; left: 0; top: 0; height: 370px; max-width: 920px; margin: 0px auto;”> <div id=”chartContainer1″ style=” z-index: 0; position:absolute; left: 0; top: 0; height: 370px; width: 920px; margin: 0px auto;”></div> <div id=”chartContainer2″ style=” z-index: 1; position:absolute; left: 0; top: 0; height: 370px; width: 920px; margin: 0px auto;”></div> </div> <button onclick=”draw(0,0)”>Draw</button>
<script src=”canvasjs.min.js”></script> </body>
I wrapped two div element in a master div.
The Script
<script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max – min + 1)) + min; } function tuts1() {
var chart = new CanvasJS.Chart(“chartContainer1”, { backgroundColor: “black”, animationEnabled: false, title:{ text: “Call Volume”, horizontalAlign: “left”, fontColor: “black”, }, axisX:{ valueFormatString: “”, labelFontColor: “”, crosshair: { enabled: false, snapToDataPoint: false } }, axisY: { title: “Peak Calls/Hour”, includeZero: false, valueFormatString: “###,###”, titleFontColor: “black”, minimum: 0, maximum: 250, color: “orange”, crosshair: { enabled: false, snapToDataPoint: false, color: “orange”, labelFormatter: function(e) { return CanvasJS.formatNumber(e.value, “###”); } } }, data: [{ type: “area”, fillOpacity: .3, xValueFormatString: “Calls”, yValueFormatString: “##”, markerSize: 0, color: “orange”, lineColor:”orange”, lineThickness: .5, fillOpacity: .1,
dataPoints: [ { x: 00, y: getRandomInt(49, 230) }, { x: 01, y: getRandomInt(49, 230) }, { x: 02, y: getRandomInt(49, 230) }, { x: 03, y: getRandomInt(49, 230) }, { x: 04, y: getRandomInt(49, 230) }, { x: 05, y: getRandomInt(49, 230) }, { x: 06, y: getRandomInt(49, 230) }, { x: 07, y: getRandomInt(49, 230) }, { x: 08, y: getRandomInt(49, 230) }, { x: 09, y: getRandomInt(49, 230) }, { x: 10, y: getRandomInt(49, 230) }, { x: 11, y: getRandomInt(49, 230) }, { x: 12, y: getRandomInt(49, 230) }, { x: 13, y: getRandomInt(49, 230) }, { x: 14, y: getRandomInt(49, 230) }, { x: 15, y: getRandomInt(49, 230) }, { x: 16, y: getRandomInt(49, 230) }, { x: 17, y: getRandomInt(49, 230) }, { x: 18, y: getRandomInt(49, 230) }, { x: 19, y: getRandomInt(49, 230) }, { x: 20, y: getRandomInt(49, 230) }, { x: 21, y: getRandomInt(49, 230) }, { x: 22, y: getRandomInt(49, 230) }, { x: 23, y: getRandomInt(49, 230) }, ] }] }); chart.render();
} function tuts2() {
var chart = new CanvasJS.Chart(“chartContainer2”, { backgroundColor: “”, animationEnabled: true, title:{ text: “Call Volume”, horizontalAlign: “left” }, axisX:{ valueFormatString: “##hr”, labelFontColor: “#696969”, stripLines:[ { Value: 10, } ], crosshair: { enabled: true, snapToDataPoint: true } }, axisY: { title: “Peak Calls/Hour”, includeZero: false, valueFormatString: “###,###”, titleFontColor: “#696969”, minimum: 0, maximum: 250,
crosshair: { enabled: true, snapToDataPoint: true, color: “orange”, labelFormatter: function(e) { return CanvasJS.formatNumber(e.value, “###”); } } }, data: [{ type: “area”, fillOpacity: .3, xValueFormatString: “Calls”, yValueFormatString: “##”, dataPoints: [ { x: 00, y: -1000 }, { x: 01, y: -1000 }, { x: 02, y: -1000 }, { x: 03, y: -1000 }, { x: 04, y: -1000 }, { x: 05, y: -1000 }, { x: 06, y: -1000 }, { x: 07, y: -1000 }, { x: 08, y: 112 }, { x: 09, y: -1000 }, { x: 10, y: -1000 }, { x: 11, y: -1000 }, { x: 12, y: -1000 }, { x: 13, y: -1000 }, { x: 14, y: -1000 }, { x: 15, y: -1000 }, { x: 16, y: -1000 }, { x: 17, y: -1000 }, { x: 18, y: -1000 }, { x: 19, y: -1000 }, { x: 20, y: -1000 }, { x: 21, y: -1000 }, { x: 22, y: -1000 }, { x: 23, y: -1000 }, ] }] }); chart.render();
}
</script> <script> var init=true;
function draw(x,y){
tuts1(); tuts2();
//var canvas = document.getElementById(‘canvas1’); //var ctx = canvas.getContext(‘2d’); //ctx.save(); //ctx.clearRect(0,0,4,289); //ctx.fillStyle = “rgba(0,200,0,.3)”; //ctx.fillRect (x+75, y+50, x+78, y+289); //ctx.restore(); //x += 0; //var loopTimer = setTimeout(‘draw(‘+x+’,’+y+’)’,30); } </script>
Both graphs appear on top of each other as if one graph. The one in front is interactive.
Thoughts?
Here is the complete html.
<!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <style> canvas{border:#666 1px solid;}
</style> <script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max – min + 1)) + min; } function tuts1() {
</script> </head> <body> <div id=”master” style=”position:left; left: 0; top: 0; height: 370px; max-width: 920px; margin: 0px auto;”> <div id=”chartContainer1″ style=” z-index: 0; position:absolute; left: 0; top: 0; height: 370px; width: 920px; margin: 0px auto;”></div> <div id=”chartContainer2″ style=” z-index: 1; position:absolute; left: 0; top: 0; height: 370px; width: 920px; margin: 0px auto;”></div> </div> <button onclick=”draw(0,0)”>Draw</button>
<script src=”canvasjs.min.js”></script> </body> <script> var init=true;
tuts1(); tuts2(); } </script> </html>
@wmangaroo,
CanvasJS supports multi-series area charts. Please take a look at these gallery examples on Multi Series Area Chart and Multi Series Spline Area Chart. If these examples doesn’t help you create chart according to your requirements, kindly share JSFiddle or pictorial representation of your requirements so that we can understand it better and guide you accordingly.
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register