Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot read property 'canvas' of undefined

I am trying to use chartsjs to make a pie chart. I have followed the steps in the chartjs documentation and I have included chart.js and the canvas element. i added the script that should create the chart as the example provided in the chartjs documentation. I am getting the following error: Uncaught TypeError: Cannot read property 'canvas' of undefined Does anywhone know how to fix this? What am I doing wrong? Thanx in advance!

HERE IS THE CODE:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="<?php echo base_url(); ?>media/js/chart.js"></script>


<script type="text/javascript" src="<?php echo base_url(); ?>media/js/jquery.js"></script>

    </head>



    <canvas id="myChart" width="400" height="400"></canvas>
        <script  type="text/javascript">

        $(function() {
             options = {
                //Boolean - Show a backdrop to the scale label
                scaleShowLabelBackdrop: true,
                //String - The colour of the label backdrop
                scaleBackdropColor: "rgba(255,255,255,0.75)",
                // Boolean - Whether the scale should begin at zero
                scaleBeginAtZero: true,
                //Number - The backdrop padding above & below the label in pixels
                scaleBackdropPaddingY: 2,
                //Number - The backdrop padding to the side of the label in pixels
                scaleBackdropPaddingX: 2,
                //Boolean - Show line for each value in the scale
                scaleShowLine: true,
                //Boolean - Stroke a line around each segment in the chart
                segmentShowStroke: true,
                //String - The colour of the stroke on each segement.
                segmentStrokeColor: "#fff",
                //Number - The width of the stroke value in pixels
                segmentStrokeWidth: 2,
                //Number - Amount of animation steps
                animationSteps: 100,
                //String - Animation easing effect.
                animationEasing: "easeOutBounce",
                //Boolean - Whether to animate the rotation of the chart
                animateRotate: true,
                //Boolean - Whether to animate scaling the chart from the centre
                animateScale: false,
                //String - A legend template
                legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

            };
             data = [
                {
                    value: 300,
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ];
             ctx = $("#myChart").get(0).getContext("2d");
             myNewChart = new Chart(ctx[0]).Pie(data, options);
        });
    </script>
</html>
like image 317
Unfinished Avatar asked Aug 20 '14 12:08

Unfinished


1 Answers

The problem lies on this line here:

myNewChart = new Chart(ctx[0]).Pie(data, options);

And in specifically ctx[0]. When you defined ctx here:

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

ctx is an object called CanvasRenderingContext2D, which haves properties. You are trying to treat it as an Array when it's not. ctx[0] is therefore undefined. So the solution is actually simple, as you have found out.

Change ctx[0] to ctx, and you have your nice animated pie chart.

ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Pie(data, options);

Fiddle Here

like image 125
Spencer Wieczorek Avatar answered Nov 06 '22 08:11

Spencer Wieczorek