[Vishwas R]

@nehamahajan,

You can fix the vertical position of tooltip by setting top & bottom CSS properties. Please find the necessary CSS styles mentioned below.

.canvasjs-chart-tooltip {  
  top: 360px !important;
  bottom: auto !important;
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

The issue might be with the format of the data being passed to the chart. Parsing it in the format accepted by CanvasJS Chart should work fine in your case. Please refer to this documentation page for step-to-step tutorial on fetching data from external source (JSON) & parsing it to the format accepted by CanvasJS before rendering chart.

Please refer to this article for more information on adding CanvasJS charts in Arduino. Also take a look at this Github-repository for complete code.

Considering this as duplicate of Simple chart and XMLHttpRequest query. Hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

The issue might be with the format of the data being passed to the chart. Parsing it in the format accepted by CanvasJS Chart should work fine in your case. Please refer to this documentation page for step-to-step tutorial on fetching data from external source (JSON) & parsing it to the format accepted by CanvasJS before rendering chart.

Please refer to this article for more information on adding CanvasJS charts in Arduino. Also take a look at this Github-repository for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@pawan-it17,

It seems like you are not calling bubbleSort method in the code that you have shared. Calling the method seems to be working fine. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ravidasari,

Sorry for the inconvenience caused. There seems to be issue with axis-range when there are less number of datapoints (1 datapoint in 2 dataseries in this case). As we were busy working on some other important features, we were unable to fix this. We will prioritize and fix it in future versions. Meantime you can get it worked by setting minimum & maximum manually. Please find the code-snippet below.

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

Can you kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally to understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@abhihd,

Chart doesn’t automatically group dataPoints by its label. When only label is given (without x-value), internally it assigns x values to dataPoints in an order. So, there can be different dataPoints with same x value but different label. You can pass x-value along with label to group them accordingly. Please find the updated datapoints below.

data: [
    {        
      type: "line",
      dataPoints: [
        { x: 1, y: 30, label: "label1" },
        { x: 3, y: 40, label: "label3" },
        { x: 4, y: 50, label: "label4" },
        { x: 5, y: 60, label: "label5" },
        { x: 7, y: 90, label: "label7" },
        { x: 8, y: 20, label: "label8" },
        { x: 9, y: 50, label: "label9"}

      ]
    }, {        
      type: "line",
      dataPoints: [
        { x: 1, y: 10, label: "label1" },
        { x: 2, y: 20, label: "label2"},
        { x: 3, y: 30, label: "label3" },
        { x: 4, y: 40, label: "label4" },
        { x: 5, y: 50, label: "label5" },
        { x: 6, y: 60, label: "label6" },
        { x: 7, y: 70, label: "label7" },
        { x: 8, y: 80, label: "label8" },
        { x: 9, y: 90, label: "label9"}

      ]
    }
  ]

Please take a look at this JSFiddle for complete code.

[Vishwas R]

@nerviozzo96,

You can use unicode for superscript / subscript in chart elements like title, legend, indexLabel, etc. Please take a look at this JSFiddle for an example on same.

Also refer to this forum topic for relevant query / solutions.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nehamahajan,

You can customize the max-width of tooltip & it’s content by setting following CSS style properties for tooltip & it’s children.

.wordwrap { 
   white-space: pre-wrap;
}
.canvasjs-chart-tooltip * {
  max-width: 200px !important; 
}
.canvasjs-chart-tooltip {
  left: 250px !important;
  width: 200px;
}

Please take at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nguyentanson1996gmail-com,

You can hide the information related to hidden dataseries by setting toolTipContent of that particular dataseries to null. Please find the code-snippet below.

itemclick : function(e) {
  var content;
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    content = e.chart.data[e.dataSeriesIndex].toolTipContent;
    e.dataSeries.toolTipContent = null;
  }
  else {
    e.dataSeries.visible = true;
    e.dataSeries.toolTipContent = content;
  }
  chart.render();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@efreed,

Thanks for sharing the solution. This will help others :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@cunghita,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@azadcoder,

You can create Chart & StockChart by importing canvasjs.stock.min.js but you can create only chart using canvasjs.min.js. Based on the code that you have shared, you are trying to create StockChart using canvasjs.min.js. Instead, importing canvasjs.stock.min.js to your project should work fine in this case. Please download the StockChart from download page.

If you are still facing issue, kindly create sample project and share it with us over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

You can have a condition check before pushing image in addMarkerImages1 method to avoid adding image when datapoint y-value is empty string. Please find the code-snippet below.

function addMarkerImages1(chart1) {
  for (var i = 0; i < chart1.data[1].dataPoints.length; i++) {
	if(chart1.data[1].dataPoints[i].y != ""){
		Markers.push({image: $("<img>").attr("src",chart1.data[1].dataPoints[i].ImageUrl)
		  .css("display", "none")
		  .css("height", 20)
		  .css("width", 20)
		  .appendTo($("#chartContainer1>.canvasjs-chart-container"))
		, dataPointIndex: i});
	}
  }
  for(var i = 0; i < Markers.length; i++)
	positionMarkerImage1(Markers[i].image, Markers[i].dataPointIndex);
}

Please take a look at this JSFiddle for complete code.

If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing & share it with us so that we can run the code at our end, debug to understand the scenario & help you resolve.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ashu-sharma,

You can set custom range to axis by setting minimum & maximum. Based on the image that you have shared, you can use reversed axis to show negative values towards top & positive towards bottom. Below is the code-snippet to set y-axis range from -10 to 120.

axisY: {
    reversed: true,
    minimum: -10,
    maximum: 120
}

—
Vishwas R
Team CanvasJS