CODEWITHSUNDEEP
javascriptjquerychartschart.js
andara
andara

Reputation: 33

Chart js doesn't show chart

i try to display only the example from chart js in a project i work on. Unfortunately i'm forced to use Chart Js 1.x. I tried to implement the bar example from https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html It's a pretty easy example i guess but it isn't running :(

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="zeitsteuerungChart"></canvas>

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: 'Dataset 1',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }, {
            label: 'Dataset 2',
            borderWidth: 1,
            data: [
                "1","1","1","1","1","1","1"
            ]
        }]
    };
    window.onload = function() {
        var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
        var myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData
        });
    };

The Chart JS manipulate the 

<canvas id="zeitsteuerungChart"></canvas>

element to 

<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>

but thats pretty much it. No diagram shows up. No error in Console. I tried to use jQuery as well to select the canvas with

var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");

but same effect! On other subpages of the project it's working pretty fine!

Upvotes: 3

Views: 2676

Answers (1)

Sam Ch
Sam Ch

Reputation: 202

You are using chart js v2 syntax on v1.

for v1

var barChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: 'Dataset 1',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  },
  {
    label: 'Dataset 2',
    borderWidth: 1,
    data: ["1","1","1","1","1","1","1"]
  }]
};

window.onload = function() {
  var ctx = document.getElementById("zeitsteuerungChart").getContext("2d");
  var myBar = new Chart(ctx).Bar(barChartData, options);
};

you can view chart options (chart js v1) here or complete options here

Upvotes: 3

Related Questions