[Vishwas R]

Ernest,

We observe that the array you are passing for labels are numbers and not string. If you like to display it as 2016-08-04 in label, store it as a string(“2016-08-04”). As its not a string, its considered as number and the result of 2016-08-04(2004) as been considered and assigned to label.

Change the array to [“2016-07-25”, “2016-07-26”, “2016-08-01”, “2016-08-02”, “2016-08-03”, “2016-08-04”, “2016-08-05”, “2016-08-08”, “2016-08-09”, “2016-08-10”]. And it works fine.

[Vishwas R]

In that case I would suggest filtering dataPoints to something below 10K because column charts are not meant to handle such large Data Sets. In any case when you have large number of dataPoints, columns will overlap and only a few (equal to number of pixels horizontally) of them would be visible. So you can filter them initially and then add more dataPoints when user zooms into a region using rangeChanging. Here is an example.

[Vishwas R]

Ulee,

We are unable to reproduce the issue as the parameters passed to function are not known. Can you please create a jsfiddle with the issue, so that we can look into it and help you in resolving?

[Vishwas R]

Ernest.

In stacked charts, dataPoints for each series are stacked one on top of the other. You can use area chart to show “Second Quarter” data independent of “First Quarter” data.

[Vishwas R]

Claus,

Including jquery will solve the issue, as $(document).ready is used. Or you can use window.onload event.

Check this jsfiddle for working code.

[Vishwas R]

Claus,

You can store the received JSON data in a variable, parse it to the format CanvasJS accepts and pass it to chart data. Here is an example.

[Vishwas R]

Prasanna,

When stripLines are placed too closer, you can change the position of stripline-label far/center/near the axis so as to avoid overlapping using labelAlign property, which defaults to ‘far’. Here is an example.

[Vishwas R]

Akhil,

We observe that the labels are shown for every dataPoints.


If there are more number of dataPoints, its better not to show every labels, which can be controlled by setting interval, and show few to make it look better or by increasing the chart width, labels get more space and can be shown better.

Suggestion: Compared to labelAngle: 90, setting it to -45 makes it much readable. Check this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Please check the updated jsfiddle with working script(which you have named it as proj4.js).

[Vishwas R]

d3.csv is an asynchronous method, where the code inside the callback function will run when the data is loaded whereas code outside the callback function will run immediately after the request is made, when the data is not yet available. Because of this the chart was rendered with no data but title and legend. When you resize, chart will be re-rendered, data would be updated from csv by then.

d3.csv execution:

first();
d3.csv("path/to/file.csv", function(rows) {
  third();
});
second();

For more info refer stackoverflow.

Here is your working code. (Note:CSV and function related to checkbox-Abby has been updated and working fine, kindly follow same for other checkboxes aswell. proj4.js file has been saved and linked from codepen).

[Vishwas R]

You can store the complete chart as a function in external JS file. Load that JS file and call the function in multiple HTML pages where you like to show chart. Check this example.

[Vishwas R]

We are unable to know the issue just by looking at the screenshots, it would help us resolve issue if we look into the code. Can you please create a jsfiddle, so that we can look into it and help you out?

[Vishwas R]

muralimnmcse,

Click event seems to be working fine across all browsers including Microsoft Edge.

If you still find the issue, please create a jsfiddle and provide the browser version detail, so that we can look into the issue and resolve it.

[Vishwas R]

Anjali,

We were unable to observe any delay in chart load. Can you please create a jsfiddle, so that we can look in to it and help you out?

[Vishwas R]

You need to set showInLegend: true to enable legends, which defaults to false. Here is the working jsfiddle.