Home forums Using CanvasJS Uncaught TypeError: jQuery.getJSON is not a function

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  anubis 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23800

    Hi!
    I have been following this guide on how to populate the graph with JSON from backend using .getJSON but i keep getting “Uncaught TypeError: $.getJSON is not a function”.

    I´m not necessarily partial to any particular solution since i´m pretty new to JS compared to python, so I might have missed something obvious in my code or perhaps a better solution. The data we will be using will be a pretty small dataset with 12 time and value-pairs. I have been trying different solutions for probably two days so i have likely stared myself blind on this. Really thankful for any tips!

    This is the code we are using:

    $(document).ready(function() {
    		var dataPoints = [];
    		var chart = new CanvasJS.Chart("chartContainer", {
    			animationEnabled: true,
    			theme: "light2",
    			title: {text: "my chart"},
    			axisY: {
    				title: "title",
    				titleFontSize: 20
    			},
    			data: [{
    				type: "column",
    				dataPoints: dataPoints
    			}]
    		});
    
    		function addData(data) {
    			for (var i = 0; i < data.length; i++) {
    				dataPoints.push({
    					x: (data[i].label),
    					y: data[i].y
    				});
    			}
    			chart.render();
    		}
    		$.getJSON("http:/localhost:8080/mydata.json", addData);
    		})

    Things i have checked:

    1. I have tried changing the $ to jQuery as described in https://api.jquery.com/jQuery.getJSON. This only resulted in error “Uncaught TypeError: jQuery.getJSON is not a function”
    2. I have confirmed the data is reachable in the correct location (http:/localhost:8080/mydata.json)
    3. Data looks more or less identical to the example data

    Data looks like this:

    data = [
    		{"label": 11, "y": 320},
    		{"label": 12, "y": 552},
    		{"label": 13, "y": 342},
    		{"label": 14, "y": 431},
    		{"label": 15, "y": 251},
    		{"date": 16, "y": 445}
    	]

    Thanks in advance!
    -Victor

    #23805

    Victor,

    Kindly check whether you have included jQuery in your project, and not jQuery slim – which excludes ajax and effects modules. Please refer this stackoverflow thread for more info.

    If you are getting error even after adding jQuery, kindly share the sample project over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out.


    Vishwas R
    Team CanvasJS

    #23816

    Problem solved!

    I feel so stupid now. I had read that stackoverflow post before i wrote here AND tried with both of the jQuery sources below. The jQuery slim was located at the bottom of my HTML and not at the top where i was working. I´ll let this serve as a lesson to be cautious when trying to save time and reusing HTML from previous projects.

    Thanks!

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.