[Vishwas R]

@hemel619619,

You need to include jQuery in your page to use jQuery methods like getJSON, when and done. Including jQuery should work fine in your case.

Please try adding <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> in your html page.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@derissl,

Please take a look at updated jsfiddle showing chart similar to the image that you have shared – achieved using stackedColumn Chart.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fbahashwan,

You can set filled area color using color property and the color of the line/border of area using lineColor. Please refer documentation for list of chart options / more info.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lonster_monster,

Glad that it works :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lonster_monster,

To convert PHP date to JavaScript timestamp, first you need to convert PHP date to PHP timestamp using strtotime and then convert PHP timestamp to JavaScript timestamp by multiplying PHP timestamp by 1000.

$phpDate = date("Y-m-d h:i:sa");
$phpTimestamp = strtotime($phpDate);
$javaScriptTimestamp = $phpTimestamp * 1000;

—
Vishwas R
Team CanvasJS

[Vishwas R]

@derissl,

You can use stackedColumn chart as shown in this jsfiddle. You can customize color of dataPoint (columns) by using color property.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fbahashwan,

To change the color of line in line or area charts, you can set lineColor to your desired color. To show gridlines over both axisX and axisY, you can set gridThickness in axis, which defaults to 0 incase of axisX.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@recond9,

You are observing this behaviour as the first dataSeries is attached to primary axisY and the second dataSeries is attached to secondary axisY. Both axis have different range hence the height of the column varies according to their respective axis range.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sufyan-cs10,

Scale Breaks are used to shrink the axis-range in order to remove unnecessary regions.

You can minimize the space occupied by the break using spacing and remove the scale-break line by setting lineThickness to 0. Please take a look at this updated jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@recond9,

You can render multi-series chart from CSV data by parsing data and passing it to Chart in the format accepted by CanvasJS. Please take a look at this jsfiddle.

Refer Creating Chart from CSV for tutorial / more info on rendering chart from a CSV file.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@akdeniz,

The 500 code would normally indicate an error on the server, not anything with your code. The jsfiddle that you have shared seems to be working fine.

Refer these articles on How to Fix a 500 Internal Server Error, 500 Internal Server Error: What It Is And How To Fix It for more info.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@luispang,

Can you kindly share working sample along with sample data over Google-Drive or Onedrive, so that we can understand your requirements better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sufyan-cs10,

You can use Axis / Scale Breaks to shrink and remove the unnecessary regions.

Please take a look at updated JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@triiglobal,

The code that you have shared in doc file seems to be working fine. Can you kindly share the sample ASP.Net project along with sample data so that we can understand your scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@katidev,

Can you kindly create sample project with sample dataPoints and share it over Google-Drive or Onedrive, so that we can look into your code, understand it better and help you out?

—
Vishwas R
Team CanvasJS