FORUMS

Select any forum below to ask question

Forum Replies Created by wmangaroo

Viewing 1 post (of 1 total)
  • September 30, 2018 at 4:40 am in reply to: Plotting two area graphs together #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>

Viewing 1 post (of 1 total)