[Vishwas R]

Rack,

Refer this thread to know how to pass mysql data to canvasJS

[Vishwas R]

This feature is not available as of now.

[Vishwas R]

Jacob,
Its ‘e.chart.options.axisY2.maximum’. Kindly check the screenshot you have added, it has field called options.

[Vishwas R]

We were not able to reproduce the issue yet on Win7 + Chrome 49. Does your system have any graphic card installed? If yes, which model. Also, can you try restarting the machine once and see if it is still reproducible.

[Vishwas R]

Dilip,

Kindly provide the operating system and browser being used along with their versions, so that we can have a look at the issue and help you out.

[Vishwas R]

Dilipt,

I reproduced your code in jsfiddle, its working fine and labels are shown in chart. Here is the fiddle for the same.

[Vishwas R]

For axis labels, tooltip is not supported. Instead you can use toolTip for dataSeries so that long names are displayed when user hover the dataPoints.

[Vishwas R]

Jacob,

The issue has been fixed and here is an internal-build. Kindly check if its working and let us know.

[Vishwas R]

Yes viewportMinimum and viewportMaximum works with candlestick charts.

• This reply was modified 3 years, 8 months ago by  Vishwas R.

[Vishwas R]

Haggis,

Thanks for the additional information. It will help us in figuring out the issue. We will investigate on this and get back.

[Vishwas R]

Jacob,

We looked into the log file and it seems like it gives a constant value,11, for y-value. But the screenshot you have uploaded has values less than that at every point.

It would be better is you can reproduce the issue you are facing in a fiddle, so that we can understand your issue properly.

[Vishwas R]

Haggis,

Thanks for reporting. Seems like the issue is only in Safari and we haven’t been able to figure out the problem yet. We will investigate on this further and get back.

[Vishwas R]

xkater,

It is possible to change/update axis’s range by using viewportMinimum and viewportMaximum properties of axisX. I think you can implement the required behavior using these two properties.

Here is an example with a slider – you might have to customize it slightly though.

If this doesn’t fit your requirement, any pictorial representation or fiddle would be helpful to understand your requirement and help you out.

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

[Vishwas R]

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.

[Author]

Posts