Chart.js (V2.4) problem

Hi everyone,
I’m now working on chart.js(V2.4) and I have some problems.
I’ve looked up a lot of similar issues/questions but none of it solves my problem.
Error in console log shows: “Chart.controllers[meta.type] is not a constructor”
Here’s my code:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</head>
<body>
    <label style="margin-left:3%%;">X : </label>
      <select id="selectxfield" style="width:20%%;margin-top:2%%;margin-left:1%%;display:inline;">
        <option>player</option>
      </select>
      <label style="margin-left:3%%;">Y : </label>
      <select name="selectyfield" style="width:20%%;margin-left:1%%;display:inline;">
        <option>ppg</option>
      </select>
    <button id="btnchart" style="margin-left:3%%;">Submit</button>
    <canvas id="areaChart" style="height:250px"></canvas>
    <canvas id="lineChart" style="height:250px"></canvas>
    <canvas id="barChart" style="height:250px"></canvas>
</body>
<script type="text/javascript">
$(function () {
    // This will get the first returned node in the jQuery collection.
    function isEmpty(obj){
        for(var key in obj){
            if(obj.hasOwnProperty(key))
                return false;
        }
        return true;
    }
    function randomColor() {
        var colorVal = "rgb(";
        for(i = 0; i < 3; i++) {
            colorVal += Math.round(250*Math.random());
            if (i < 2) {
                colorVal += ",";
            }
        }
        colorVal += ")";
        return colorVal;
    }

    $('#btnchart').click(function(){
        var jsdata = '{"name": "2011NBA.csv", "resource_id": "pao3ckw7b3lj8eh4ad0899oiy", "success": "true", "records": [{"id": 1, "player": "LeBron James", "division": "East", "ppg": "27.1", "rpg": "7.9", "apg": "6.2", "blk": "0.81", "stl": "1.85"}, {"id": 2, "player": "Kevin Durant", "division": "West", "ppg": "28", "rpg": "8", "apg": "3.5", "blk": "1.17", "stl": "1.33"}, {"id": 3, "player": "Dwight Howard", "division": "East", "ppg": "20.6", "rpg": "14.5", "apg": "1.9", "blk": "2.15", "stl": "1.5"}, {"id": 4, "player": "Christ Paul", "division": "West", "ppg": "19.8", "rpg": "3.6", "apg": "9.1", "blk": "0.07", "stl": "2.53"}, {"id": 5, "player": "Derrick Rose", "division": "East", "ppg": "21.8", "rpg": "3.4", "apg": "7.9", "blk": "0.72", "stl": "0.9"}]}'
        var data = JSON.parse(jsdata);
        var x = []; // use array to save the field's name
        var y = []; // use array to save data
        var xf = $( "#selectxfield option:selected" ).text();// get selected value
        $.each(data.records, function(i, v) {
            x.push(v[xf]);
        });
        var areaChartData = {
            labels: x,
            datasets: []
        };

        var selectyfield = document.getElementsByName('selectyfield') // selectyfield can be added dynamically in my code, but I set it to one just for debug convenience
        var dt = data.records;
        for (j=0;j<selectyfield.length;j++){
            var color = randomColor();
            var index = selectyfield[j].selectedIndex;
            var k = selectyfield[j].options[index].text;

            $.each(data.records, function(ky, vl) {
                y.push(parseFloat(vl[k]));
            });
            if (isEmpty(data.records)){
                $.each(dt, function(ky, vl) {
                    y.push(parseFloat(vl[k]));
                });
            }
            var data ={
                label: k,
                fillColor: color,
                strokeColor: color,
                pointColor: color,
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: y
            }
            areaChartData["datasets"].push(data);
            y = [];
        }
        var areaChartOptions = {
            // a lot of options
        };
        var barChartOptions = {
            // a lot of options
        };
        var area = document.getElementById("areaChart")
        var areaChartCanvas = area.getContext("2d");
        var areaChart = new Chart(areaChartCanvas,{
            type: "area",
            data: areaChartData,
            options: areaChartOptions
        });

        var line = document.getElementById("lineChart")
        var lineChartCanvas = line.getContext("2d");
        var lineChartOptions = areaChartOptions;
        var lineChartData = areaChartData;
        lineChartOptions.datasetFill = false;
        var lineChart = new Chart(lineChartCanvas,{
            type: "line",
            data: lineChartData,
            options: lineChartOptions
        });

        var bar = document.getElementById("barChart")
        var barChartCanvas = bar.getContext("2d");
        var barChartData = areaChartData;
        barChartOptions.datasetFill = false;
        var lineChart = new Chart(barChartCanvas,{
            type: "bar",
            data: barChartData,
            options: barChartOptions
        });
    });
});
</script>
</html>

The select field is fixed just for convenience.
I am sure the code works fine in older chart.js (v1.X), I just have to change some code usage above.
I followed the documentation but didn’t work
Hope someone can help me find the error or bug, thanks.

Author: Fantashit

1 thought on “Chart.js (V2.4) problem

Comments are closed.