Reply To: chart wont render

[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>