Home forums Using CanvasJS chart wont render

This topic contains 4 replies, has 2 voices, and was last updated by  avizaza 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9876

    avizaza
    Member

    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.

    #9877

    Vishwas R
    Keymaster

    Aviran,

    We checked your issue. Console is giving ‘$ is not a function’ error, which means that a jQuery-function is called before jQuery (js file) is loaded. Kindly check into it and load jQuery, to get it solved.

    #9878

    avizaza
    Member

    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.

    #9879

    Vishwas R
    Keymaster

    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>
    #9881

    avizaza
    Member

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.