CODEWITHSUNDEEP
jquerynode.jschartspugchart.js
Michael Botistouta
Michael Botistouta

Reputation: 141

$(...).getContext("2d") is not a function when using chart.js

i'm using nodejs and jade view engine. i want to load a chart in my page using chart.js i added the jquery and chart.js library but it still give my an error by title $(...).getContext("2d") is not a function. please help me with this question thanks .

$(document).ready(function(){
var ctx = $("#myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
        }
    }
});
});

Upvotes: 5

Views: 11955

Answers (3)

Angry Fox
Angry Fox

Reputation: 61

getContext is a method for javascript, use:

document.getElementById('myChart').getContext('2d');

for JQuery use:

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

Upvotes: 0

bwww
bwww

Reputation: 63

when attempting to retrieve getContext("2d") on an element using jquery, you need to alter the syntax slightly so that the dom 'node' is returned, rather than a jquery object. The correct syntax in this case is;

$("#myChart")[0].getContext("2d");

note the addition of [0]

Upvotes: 4

drec4s
drec4s

Reputation: 8077

This has been answered already but, in case someone stumbles upon this post, to get the function getContext to work make sure you are rendering the chart inside a <canvas id='myChart'> </canvas> element.

Upvotes: 8

Related Questions