CODEWITHSUNDEEP
javascripthtmlcanvaschartschart.js
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

Displaying a chart using Chart.js

I'm pretty new to JavaScript and HTML5. I'm trying to print a normal line chart onto canvas using Chart.js. I followed the step by step guide on their website, but am unable to make the graph show.

This is the current code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHARTS</title>
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
</head>

<body>
<canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000">Aw Snap!</canvas>

<script>
context = document.getElementById('myCanvas').getContext('2d');

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
Line.defaults = {

    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line 
    scaleLineColor : "rgba(0,0,0,.1)",

    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale 
    scaleShowLabels : true,

    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",

    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",

    //Number - Scale label font size in pixels  
    scaleFontSize : 12,

    //String - Scale label font weight style    
    scaleFontStyle : "normal",

    //String - Scale label font colour  
    scaleFontColor : "#666",    

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1, 

    //Boolean - Whether the line is curved between points
    bezierCurve : true,

    //Boolean - Whether to show a dot for each point
    pointDot : true,

    //Number - Radius of each point dot in pixels
    pointDotRadius : 3,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,

    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,

    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null

}

new Chart(context).Line(data,options);

</script>

</body>

What am I doing wrong that is causing my chart to not show?

Upvotes: 0

Views: 12590

Answers (3)

henriqb
henriqb

Reputation: 21

You didn't declared the options variable either pass an empty array for options.

new Chart(context).Line(data,{});

Or declare the variable

var options = { ... } 
new Chart(context).Line(data, options);

Upvotes: 1

Radix Salvilines
Radix Salvilines

Reputation: 416

I think I have a solution to 'options' problem. If you remove options from:

new Chart(context).Line(data,options);

so it looks like that:

new Chart(context).Line(data);

does it work?

It is because

Line.defaults = { ... }

is just a list of options you may change - you are not supposed to put the whole thing to your html file.

In other words instead of for example:

Line.defaults = { scaleOverlay : true, scaleOverride : true }

try:

var options = { scaleOverlay : true, scaleOverride : true }

The tutorial on the homepage of chartjs is confusing in this regard a little bit because it tells you to use an array of settings that are default in the main file. But you are supposed to just take the "insides" and use them, not the whole thing and it does not say to actually create options variable for it. It took me an hour to figure out but only because I have made a mistake of not checking up JS Console immediatelly, as @Lauris hinted out in his answer :)

Also make sure that this:

<script src="../../../Downloads/Chart.js-master/Chart.js"></script>

points to a correct file. It looks like you just did that to hide the real path from StackOverflow community. In that case nevermind.

I hope this helps!

Upvotes: 0

Lauris
Lauris

Reputation: 345

Data variable is not yet initialized when you are calling "new Chart". Move the "new Chart" to end of JS block.

A tip - to check for errors use JS console.

Edit: The were two additional JavaScript errors - options variable was not intialized and Line was undefined variable. Please check my reply below for demo link.

Upvotes: 2

Related Questions