chart wont render

[avizaza]

Hey friends,

CanvasJS used to work perfectly fine in my website, but for some reason its no longer:

The code runs just fine locally/externally to my website, and in JSfidler as well.

Console shows no JS errors so I can’t figure it out, please, help me out with it as i became really frustrated with it.

additional info:
it stopped working ever since we changed the site to responsive, running newest WordPress.
e.g here (should render below the price rows where DIV ID=chartContainer.)

http://ticket-compare.com/champions-league/arsenal-v-barcelona/

Thank you for your help, please excuse for not providing more info as I only have one hand and its hard to type much.

Aviran.

[Vishwas R]

Aviran,

Upon checking the URL that you have shared, we observed an error in console – ‘$ is not a function’. This means a jQuery function is called before jQuery (js file) is loaded. Kindly check and load jQuery before using jQuery functionality,

If you are using CanvasJS jQuery plugin, please load jQuery before loading CanvasJS jQuery plugin as it has dependency. Please refer to this documentation page for tutorial and live examples on using jQuery plugin. Also please refer to jQuery Gallery for more examples with different sets of use-cases that you can edit in-browser or download to run locally.

—
Vishwas R
Team CanvasJS

[avizaza]

Thank you very much for your fast response,
This error was related to a different script (now fixed),

also moved the canvas jquery to be loaded from footer (no success), changed to the non-jquery version, no success.

Would love it if you can please recheck and validate if the its the same error as before or a very simple thing I am now missing.

Thanks again,
Aviran.

[Vishwas R]

Aviran,

We checked your issue, we tried debugging it locally. Kindly make few changes to get it work. Instead of using window.onload, use $(document).ready. And before loading jquery.canvasjs (js file), load jquery file.

Here is the working code-snippet:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="http://ticket-compare.com/wp-content/themes/ticket-compare/js/jquery.canvasjs.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Price History, In Pounds"             
      }, 
      animationEnabled: true,     
      axisY:{
        titleFontFamily: "arial",
        titleFontSize: 12,
        includeZero: false
      },
      toolTip: {
        shared: true
      },
	  data: [
	  	        {   
			  
        type: "spline",  
        name: "ticketbis",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 254.02},     
        {label: "7-02-16", y: 264.99},     
        {label: "8-02-16", y: 264.99}, 
        {label: "9-02-16", y: 290.00}, 
        {label: "10-02-16", y: 285.00},     
        {label: "11-02-16", y: 369.00},     
        {label: "12-02-16", y: 329.30}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "livefootball",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 237.50},     
        {label: "7-02-16", y: 237.50},     
        {label: "8-02-16", y: 237.50}, 
        {label: "9-02-16", y: 237.50}, 
        {label: "10-02-16", y: 237.50},     
        {label: "11-02-16", y: 0},     
        {label: "12-02-16", y: 469.25}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "Kix",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 220},     
        {label: "7-02-16", y: 220},     
        {label: "8-02-16", y: 220}, 
        {label: "9-02-16", y: 320}, 
        {label: "10-02-16", y: 320},     
        {label: "11-02-16", y: 320},     
        {label: "12-02-16", y: 320}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "Sports Events 365",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 357},     
        {label: "7-02-16", y: 356},     
        {label: "8-02-16", y: 356}, 
        {label: "9-02-16", y: 357}, 
        {label: "10-02-16", y: 363},     
        {label: "11-02-16", y: 404},     
        {label: "12-02-16", y: 410}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "FootballTicketpad",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 823.53},     
        {label: "7-02-16", y: 823.53},     
        {label: "8-02-16", y: 823.53}, 
        {label: "9-02-16", y: 823.53}, 
        {label: "10-02-16", y: 941.18},     
        {label: "11-02-16", y: 0},     
        {label: "12-02-16", y: 47.07}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "HotFootballTickets",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 290},     
        {label: "7-02-16", y: 324},     
        {label: "8-02-16", y: 314}, 
        {label: "9-02-16", y: 330}, 
        {label: "10-02-16", y: 330},     
        {label: "11-02-16", y: 402},     
        {label: "12-02-16", y: 402}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "guaranteetickets",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 299.71},     
        {label: "7-02-16", y: 299.71},     
        {label: "8-02-16", y: 300.10}, 
        {label: "9-02-16", y: 300.88}, 
        {label: "10-02-16", y: 308.65},     
        {label: "11-02-16", y: 305.72},     
        {label: "12-02-16", y: 305.72}        
		]
      },
	  	        {   
			  
        type: "spline",  
        name: "ticket2",        
        showInLegend: true,
		        dataPoints: [
        {label:"6-02-16", y: 465.34},     
        {label: "7-02-16", y: 463.92},     
        {label: "8-02-16", y: 463.92}, 
        {label: "9-02-16", y: 464.01}, 
        {label: "10-02-16", y: 464.01},     
        {label: "11-02-16", y: 503.68},     
        {label: "12-02-16", y: 503.57}        
		]
      },
	  	  ],
      legend:{
        cursor:"pointer",
        itemclick:function(e){
          if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          	e.dataSeries.visible = false;
          }
          else {
          	e.dataSeries.visible = true;            
          }
          chart.render();
        }
      }
    });

chart.render();
});
</script>
  

  </div>
<div id="chartContainer" style="height: 100%; width: 100%; padding-bottom: 45%;"></div>
</div>

[avizaza]

You are the best.
Thank you so much!
It works perfectly!

[byrnesj]

In a success callback, I am putting in all the data and still not seeing the chart render on my browser. Any idea what could be going wrong?

Here’s a look at the code I have written for grabbing and storing the data: Is this an error elsewhere in the code?
Thanks!

success: function(data) {
console.log(data[‘totalvoteval’]);

window.onload = function (){
var dataGuys = [];

data[‘totalvoteval’].forEach(function(value, index){
dataGuys.push({x: (index * 10), y: value});
})

var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “The Presentation Data Chart”;
},

data: [
{

type: “splineArea”;

dataPoints: dataGuys;

}
]
});

chart.render();
}

[Suyash Singh]

@byrnesj,

Kindly create a working jsfiddle along with sample data so that we can look into the code and help you out. Also you can have a look at this jsfiddle on creating Chart from JSON.

___
Suyash Singh
Team CanvasJS