How to use multiple line charts in one page

Question

I have a line chart where the values are from DB, and it plots well.

Here's the code Chart #1:

<?php
    $dataPoints = array( 
        array("y" => $todayv1, "label" => $todayh1),
        array("y" => $todayv2, "label" => $todayh2),
        array("y" => $todayv3, "label" => $todayh3),
        array("y" => $todayv4, "label" => $todayh4),
        array("y" => $todayv5, "label" => $todayh5)
    );
    $dataPoints2 = array(
       array("y" => $yv1, "label" => $yh1),
       array("y" => $yv2, "label" => $yh2),
       array("y" => $yv3, "label" => $yh3),
       array("y" => $yv4, "label" => $yh4),
       array("y" => $yv5, "label" => $yh5)
   );
?>   

<script>
     window.onload = function () {

     var chart = new CanvasJS.Chart("chartContainer", {
         title: {
              text: ""
                },
         axisY: {
              title: ""
                },
         data: [{
              type: "line",
              name: "Today",
              showInLegend: true,
              visible: true,
              dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
              },
              {
              type: "line",
              lineDashType: "dash",  
              name: "Yesterday",
              showInLegend: true,
              visible: true,
              dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
             }]
           });
             chart.render();
       }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

And I tried to replicate the same graph with same values in the same page.

But the first graph is not being plotted when I add the code for second graph. I even changed the variable names in JS to prevent over writing values, yet the same. Only one graph is being plotted in one page.

Here's the code for second graph Chart #2:

<?php
    $dataPointsy = array( 
       array("y" => $todayv1, "label" => $todayh1),
       array("y" => $todayv2, "label" => $todayh2),
       array("y" => $todayv3, "label" => $todayh3),
       array("y" => $todayv4, "label" => $todayh4),
       array("y" => $todayv5, "label" => $todayh5)
    );
    $dataPointsy2 = array(
       array("y" => $yv1, "label" => $yh1),
       array("y" => $yv2, "label" => $yh2),
       array("y" => $yv3, "label" => $yh3),
       array("y" => $yv4, "label" => $yh4),
       array("y" => $yv5, "label" => $yh5)
    );
?>   

<script>
     window.onload = function () {

     var charty = new CanvasJS.Chart("chartContainery", {
         title: {
             text: ""
                },
         axisY: {
             title: ""
                },
         data: [{
             type: "line",
             name: "Today",
             showInLegend: true,
             visible: true,
             dataPoints: <?php echo json_encode($dataPointsy, JSON_NUMERIC_CHECK); ?>
           },
           {
           type: "line",
           lineDashType: "dash",  
           name: "Yesterday",
           showInLegend: true,
           visible: true,
           dataPoints: <?php echo json_encode($dataPointsy2, JSON_NUMERIC_CHECK); ?>
         }]
       });
       charty.render();
    }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainery" style="height: 370px; width: 100%;"></div>

Any Help is greatly appreciated..

Answer 1

You don't need to include canvasjs js file multiple time on same page. You can include it once and use it like:

 var chart1 = new CanvasJS.Chart("chartContainer",{ title:{ text: "Live Data" }, data: [{ type: "line", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); var chart2 = new CanvasJS.Chart("chartContainery",{ title:{ text: "Live Data" }, data: [{ type: "column", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); chart1.render(); chart2.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <div id="chartContainery" style="height: 370px; width: 100%;"></div>

---

Or, if you want to display the charts side-by-side you can also do it like:

 var chart1 = new CanvasJS.Chart("chartContainer",{ title:{ text: "Live Data" }, data: [{ type: "line", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); var chart2 = new CanvasJS.Chart("chartContainery",{ title:{ text: "Live Data" }, data: [{ type: "column", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); chart1.render(); chart2.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="width: 45%; height: 370px; display: inline-block"></div> <div id="chartContainery" style="width: 45%; height: 370px; display: inline-block"></div>

---

So, update your code like:

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<div id="chartContainery" style="height: 370px; width: 100%;"></div>

<script>
   // All the chart related js code here
</script>

For more info:

• Render Multiple Charts in a Page