[Vishwas R]

@wonky,

CanvasJS just renders the chart with the data that you have passed in chart-option. You can use AJAX getJSON to get the JSON data and with the help of key, you can get its corresponding value. Please refer this tutorial for the same.

Example: If you are storing json {"Success":true,"Error":null,"Data":[{}]} as test.json, you can access Data using jsonData.Data where jsonData is the response that you get from AJAX request.

$.getJSON("test.js", function(jsonData) {
    var data = jsonData.Data;
 });

—
Vishwas R
Team CanvasJS

[Vishwas R]

@wonky,

Thanks for sharing the article, which would help others who are facing this issue. You can use the reverse proxy / spoofing mentioned in the article if it’s secure to use.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@abhishek3dmaster,

You are adding images on top of 1st chart-container even while adding it to 2nd chart because of which you can’t see images positioned on top of 2nd chart. Changing .appendTo($("#chartContainer>.canvasjs-chart-container")) to .appendTo($("#chartContainer2>.canvasjs-chart-container")) within ‘addimages2’ method should work fine in your case.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jay,

You can download Fully-Featured Version of CanvasJS from Download Page for evaluation purposes for up to 30 days. To use charts without ‘Trial Version’ and ‘CanvasJS’ Credit Link you will need to have a Commercial Version of CanvasJS. Please checkout our Pricing Page for Non-Commercial & Discounted Licenses. Please contact sales@canvasjs.com for sales related queries.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@d3bsky,

You can set valueFormatString to “HH:mm” to display hours in 24hours format along with minutes. You can customize the format of labels being displayed in axisX using valueFormatString, please refer documentation for more available options.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@adjmpw,

Glad that you made it work using viewportMinimum and viewportMaximum :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@adjmpw,

It seems to be working with date-time axis aswell.

Can you kindly create JSFiddle or in Codepen – reproducing the issue you are facing, so that we can look into your code, understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@parsureshkumar,

You can customize it to be 5*5 or the desired dimension of yours by updating the interval. In the JSFiddle, 10 stripLines are added between each interval. You can customize it to add more – please try updating the same in addStripLines method.

Please refer Creating Dynamic Charts for tutorial on rendering dynamic charts.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Satyabrata,

I request you to share the JSFiddle to try the steps you have mentioned, the reason being – in the JSFiddle that I had shared earlier, once you click Toggle Button, it hides all the dataSeries after which you can’t zoom into any region as there are no dataPoints available to zoom.

click the toggle button and hide the axisY2 graph but show axisY2 labels.

Do you mean hide dataSeries. Also can you please brief what do you mean by ‘axisY2 graph’ as the entire chart itself is a graph – do you mean the dataSeries that is attached to axisY2.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@parsureshkumar,

The JSFiddle shared shows how you can achieve ECG graph using CanvasJS charts, which you can further customize as per your requirements. Here is the updated JSFiddle showing 5*5 graph with minor-grids.

You can customize the thickness of gridlines using gridThickness, dataSeries line using lineThickness, stripLine using thickness properties.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@leo,

You can customize toolTip content and change its color according to your requirements, please refer documentation on toolTipContent or toolTip.content for more info. Here is the updated JSFiddle with toolTip content being shown with color of corresponding dataSeries color.

One more doubt http://jsfiddle.net/273Lqh3g/103/ in this snippet only some channel values are getting displayed in tooltip.

Datapoint with y-value null will not be shown in toolTip.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ethicalsector,

Glad that you figured out and it worked for you :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@parsureshkumar,

You can achieve this by adding stripLines and removing axis-labels and ticks. Please take a look at this JSFiddle. You can further customize the look and feel of the chart by changing chart-options according to your requirements.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Satyabrata,

The JSFiddle that you have shared initially seems to have secondary axisY with dataSeries attached to it and toggling dataSeries through legend. To disable toggling (hide / show), you can remove toggleDataSeries function attached on click of legend and you can remove axisY2 by not attaching any dataSeries to it as shown in this updated JSFiddle.

my Secondary Y axis curve (axisY2) is always hidden

It would help us understand your scenario better and help you accordingly if you can create JSFiddle reproducing the issue you are facing or a pictorial representation of your requirements and share it with us.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Satyabrata,

The issue you are facing is due to the interval, minimum and maximum thats being set to axis even when dataSeries are hidden. In this scenario, you may need to reset interval and range of axisY and axisY2 by setting them to null – when the dataSeries becomes visible. Please check out the below code-snippet to do the same.

for(var i = 0; i < chart.data.length; i++) {
  var dataSeries = chart.data[i];
  if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
    chart.options.data[i].visible = false;

    chart.options.axisY.viewportMinimum = chart.axisY[0].viewportMinimum;
    chart.options.axisY.viewportMaximum = chart.axisY[0].viewportMaximum;
    chart.options.axisY.interval = chart.axisY[0].interval;

    chart.options.axisY2.viewportMinimum = chart.axisY2[0].viewportMinimum;
    chart.options.axisY2.viewportMaximum = chart.axisY2[0].viewportMaximum;
    chart.options.axisY2.interval = chart.axisY2[0].interval;
  } else {
    chart.options.data[i].visible = true;

    chart.options.axisY.viewportMinimum = null;
    chart.options.axisY.viewportMaximum = null;
    chart.options.axisY.interval = null;

    chart.options.axisY2.viewportMinimum = null;
    chart.options.axisY2.viewportMaximum = null;
    chart.options.axisY2.interval = null;
  }
}

Please take a look at this updated JSFiddle for working sample.

The code that was shared previously was to help you towards solving your requirements. You can further modify code as per your requirement.

—
Vishwas R
Team CanvasJS