Chart.js - Multiple Line Charts - Only Show Last Chart

charts, javascript

Solution

Try using different names for the two ctx variables.

window.onload = function(){
    var ctx = document.getElementById("canvas2").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });


    var ctx2 = document.getElementById("canvas1").getContext("2d");
    window.myLine = new Chart(ctx2).Line(lineChartData2, {
        responsive: true
    });   
}

Problem

I am using chart.js to show multiple line charts on one page. However, only the last chart shows even though I have called them #canvas1 and #canvas2. Something must be conflicting somewhere and I've tried most things but not having any joy. Here are two charts, it only shows the last one: Graph One ``` <script type="text/javascript"> var lineChartData = { labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], datasets : [ { label: "Target", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [160000,175000,185000,180000,185000,185000,185000,195000,200000,0,0] }, { label: "Sales", fillColor : "rgba(151,187,205,0.2)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", data : [<?php echo $stockJanuary ?>,<?php echo $stockFebruary ?>,<?php echo $stockMarch ?>,<?php echo $stockApril ?>,<?php echo $stockMay ?>,<?php echo $stockJune ?>,<?php echo $stockJuly ?>,<?php echo $stockAugust ?>,<?php echo $stockSeptember ?>,<?php echo $stockOctober ?>,<?php echo $stockNovember ?>,<?php echo $stockDecember ?>] } ] } window.onload = function(){ var ctx = document.getElementById("canvas1").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); } </script> ``` Graph Two: ``` <script type="text/javascript"> var lineChartData = { labels : ["January","February","March","April","May","June","July","August","September","October","November","December"], datasets : [ { label: "Target", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,0,0] }, { label: "Sales", fillColor : "rgba(151,187,205,0.2)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", data : [<?php echo $northJanuary ?>,<?php echo $northFebruary ?>,<?php echo $northMarch ?>,<?php echo $northApril ?>,<?php echo $northMay ?>,<?php echo $northJune ?>,<?php echo $northJuly ?>,<?php echo $northAugust ?>,<?php echo $northSeptember ?>,<?php echo $northOctober ?>,<?php echo $northNovember ?>,<?php echo $northDecember ?>] } ] } window.onload = function(){ var ctx = document.getElementById("canvas2").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); } </script> ``` Your help would be much appreciated, been bugging me for a while now! Thanks in advance

Original source