Home › Forums › Chart Support › Plotting two area graphs together › Reply To: Plotting two area graphs together

September 30, 2018 at 4:40 am #22832

wmangaroo

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() {

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>
</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;

function draw(x,y){

tuts1();
tuts2();
}
</script>
</html>