[Vishwas R]

Callam,

We observed that the JSFiddle you have created seems to be working fine across all browsers.

If the issue persists, kindly share the OS details along with chrome version you are using so that we can test it, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@justxtasy,

You can build datapoints JSON as shown below.

$.each(data, function (i, item) {
    dps.push({label: item.ProfileName, y: item.TotalCustomer});
});

Please take a look at this JSFiddle for an example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Callam,

It would help us if you can provide us the working fiddle of the issue along with proper JSON-data.

Here is an example to give you an idea on using external JSON in JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

You can render chart on clicking a button using onclick mouse-event. Please take a look at this JSFiddle for an example on rendering chart on button click with data from multiple CSV.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Mitul,

JQuery is loaded in the example provided. In JSFiddle, under JavaScript section, you can include libraries like JQuery, AngularJS directly.

Check this Screenshot.

[Vishwas R]

Mitul,

We checked both the examples in desktop as well as in android and found its working fine. It would help us to resolve the issue if you could create a fiddle of the issue you are facing.

[Vishwas R]

[update]

We have just released v1.9.6 Beta with Methods & Properties, which allows you to programmatically export chart as image, print chart, access internally calculated values, etc. Please refer to the release blog for more information.

Mitul,

You can hide ‘save as PNG’ using CSS. Here is an example.

You can also have a button/link outside chart to export it as JPEG, using dataURL. Here is an example.

[Vishwas R]

Michael,

You can parse the JSON data and pass dataPoints to respective dataSeries in chart options as shown below

$.ajax({
  type: 'GET',
  url: 'https://api.npoint.io/191c62a905159a49256e',
  dataType: 'json',
  success: function(field) {
    for (var i = 0; i < field.length; i++) {
      dataPointsA.push({
        x: field[i].time,
        y: field[i].xxx
      });
      dataPointsB.push({
        x: field[i].time,
        y: field[i].yyy
      });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "JSON from External File"
      },
      exportEnabled: true,
      data: [{
        type: "line",
        name: "line1",
        xValueType: "dateTime",
        dataPoints: dataPointsA
      }, {
        type: "line",
        name: "line2",
        xValueType: "dateTime",
        dataPoints: dataPointsB
      }, ]
    });

    chart.render();

  }
});

Here is an example for loading JSON data from external source using AJAX.

You can also refer loading data from external JSON in this example.

—-
Vishwas R
Team CanvasJS

[Vishwas R]

@mmfc,

You can customize & style the tooltip to fit in your requirements using properties like borderColor, fontColor and backgroundColor.

toolTip: {
	borderColor: "#000000",
	backgroundColor: "#F4D5A6",
	fontColor: "#FAC003"
}

—
Vishwas R
Team CanvasJS

[Vishwas R]

Fernando,

Thanks for the information. We look into the issue and get back to you at the earliest.

[Vishwas R]

[Update]
Print resolution should be handled in ‘Printer Settings’, however you can increase the resolution of image when exported chart as image as shown in this JSFiddle.

Jhaagsma,

Sorry for the inconvenience. We are looking into the issue and will get back to you.

[Vishwas R]

David,

As of now controlling the tick and label start point is not available. Interval start point will be calculated automatically and varies for different intervalType. We consider it for future release.

[Vishwas R]

Nefron,

As of now this feature is not available. But you can change color of line once it switches from negative to positive and vice-versa. Here is an example.

[Vishwas R]

Danny,

Thanks for the information. Probably this is the reason why we have not been able to reproduce the issue at our end yet. We will look into it further.

[Vishwas R]

@mmfc,

You can define the format of x-value shown in tooltip & indexlabels by setting xValueFormatString. However if you like to completely format / custom-content in the tooltip content, you can use toolTipContent.

—
Vishwas R
Team CanvasJS