Chart.js - Multiple Line Charts - [2]

Question

This question was asked, and seemingly answered HERE. Though it did not help me, or seem to even work slightly at all.

I use the exact same code as the linked post, looking like this;

<script src="includes/Chart.js"></script>



<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="canvas1" width="250" height="250">
        </canvas>
    </div>
    <div class="canvas-holder">
        <canvas id="canvas2" width="250" height="250">
        </canvas>
    </div>
</div>





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


<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 ?>]
            }
        ]

    }
</script>

<script>
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
    });

}
</script>

I don't know if the answer/question is outdated, or if I am just doing something wrong here?

@cesarluis I have lineChartData2, and lineChartData, how is that dublicate? — Albert MN., Jan 12 '16 at 09:21

cesarluis · Accepted Answer · 2016-01-12T09:33:43.300

2

lineChartData variable seems duplicated I think you need to name lineChartData2 the second one or whatever you want.

Check this statements:

window.myLine = new Chart(ctx).Line(lineChartData ...
window.myLine = new Chart(ctx2).Line(lineChartData2 ...

Your vars declaration in each script is:

var lineChartData = {...}
var lineChartData = {...}

Two times! So second declaration override the oldest one. You need two data sets and they must match the names of the chart.js init code.

edited Jan 12 '16 at 09:33

answered Jan 12 '16 at 08:51

cesarluis

897
6
14

I don't see what should be wrong, one is named lineChartData, other lineChartData2. Shouldn't be a problem...? – Albert MN. Jan 12 '16 at 09:21
@iversen In your posted code the two vars are named equal and one data set override the oldest set. So I think that was the fail. – cesarluis Jan 12 '16 at 09:23
What would the fix be then? – Albert MN. Jan 12 '16 at 09:25
I said implicit in my answer. You need two vars one for handle each data set. in first script var lineChartData = {...} and second script var lineChartData2={...} – cesarluis Jan 12 '16 at 09:27
That is how it currently is, `window.myLine = new Chart(ctx2).Line(lineChartData` and `lineChartData2`..? – Albert MN. Jan 12 '16 at 09:28
Not in this statements, you need to change the var declaration statements wich are in the head of each script. The vars could be named whatever that match the chart init statements. – cesarluis Jan 12 '16 at 09:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100451/discussion-between-cesarluis-and-iversen). – cesarluis Jan 12 '16 at 09:39

Chart.js - Multiple Line Charts - [2]

1 Answers1