Home › Forums › Chart Support › Plotting two area graphs together

Plotting two area graphs together

Viewing 3 posts - 1 through 3 (of 3 total)
  • September 30, 2018 at 4:37 am #22831

    wmangaroo

    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?

    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>

    October 1, 2018 at 10:08 am #22836

    Vishwas R

    @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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.