javascriptjquerychartschart.js

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!


Solution

  • 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