@fg,
You can use Range Charts like Range Column Chart, Range Area Chart, etc. in this scenario. Please check out gallery for more examples along with source code.
—
Vishwas R
Team CanvasJS
You can perform AJAX request to fetch stripline values & render chart. Please check the code-snippet below.
/* Index.cshtml.cs */
public JsonResult OnGetStriplineData()
{
List<StripLine> stripLines = new List<StripLine>();
DateTime currentTime = DateTime.Now;
DateTime sTime = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
stripLines.Add(new StripLine((long)(currentTime - sTime).TotalMilliseconds, "Label 1"));
JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
return new JsonResult(JsonConvert.SerializeObject(stripLines, _jsonSetting));
}
/* Index.cshtml */
$.ajax({
type: "GET",
url: "/?handler=StriplineData",
contentType: "application/json",
dataType: "json",
success: function (response) {
chart.options.axisX.stripLines = JSON.parse(response);
chart.render();
},
failure: function (response) {
console.log(response);
}
});
Please take a look at this updated sample project for complete code.
—
Vishwas R
Team CanvasJS
In case of numeric axis chart, labels will be shown at every interval of the axis. Because of this, it’s showing 1 & -1. If there is just one datapoint and your requirement is to show label just for datapoint, you can use category axis (use label instead of x-value). Please take a look at this JSFiddle for an example.
Considering this as duplicate of Single data row barcharts showing 1, -1 rows, hence closing the same.
—
Vishwas R
Team CanvasJS
In case of numeric axis chart, labels will be shown at every interval of the axis. Because of this, it’s showing 1 & -1. If there is just one datapoint and your requirement is to show label just for datapoint, you can use category axis (use label instead of x-value). Please take a look at this JSFiddle for an example.
—
Vishwas R
Team CanvasJS
You can align y-axis of both the charts so that the x-axis of both also gets aligned. This can be done by setting axis margin to top chart based on bounds of bottom chart.
chartTop.axisY[0].set("margin", (chartBottom.axisY[0].bounds.x2 - chartBottom.axisY[0].bounds.x1 - chartTop.axisY[0].bounds.x2 + 5));
Please take a look at this updated JSFiddle for an example on the same.
Considering this as duplicate of Make transparent background, hence closing the same.
—
Vishwas R
Team CanvasJS
You can align y-axis of both the charts so that the x-axis of both also gets aligned. This can be done by setting axis margin to top chart based on bounds of bottom chart.
chartTop.axisY[0].set("margin", (chartBottom.axisY[0].bounds.x2 - chartBottom.axisY[0].bounds.x1 - chartTop.axisY[0].bounds.x2 + 5));
Please take a look at this updated JSFiddle for an example on the same.
—
Vishwas R
Team CanvasJS
[UPDATE]
@scroteau,
We have released CanvasJS Chart v3.6.6 GA & StockChart v1.6.6GA with this bug fix. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.
—
Vishwas R
Team CanvasJS
Please take a look at this JSFiddle for an example on adding background image to the chart.
—
Vishwas R
Team CanvasJS
Please take a look at this Gallery Page for an example on setting color based on datapoint close values in StockChart.
—
Vishwas R
Team CanvasJS
You are using value in labelFormatter instead of label, as you are passing date as label instead of x-value. Please find the updated code-snippet below.
labelFormatter: function(e) {
return CanvasJS.formatDate(e.label, "HH:MMTT");
}
Please take a look at this updated JSFiddle for complete code.
—
Vishwas R
Team CanvasJS
Y-axis Striplines can be used to show a horizontal line at any desired value. You can set value property to 250 in your case. Please find the code-snippet below.
axisY: {
stripLines: [{
value: 250
}]
}
—
Vishwas R
Team CanvasJS
Sigi,
Datapoints will be plotted at it’s corresponding x and y values. When you increase the width / height of the chart, the corresponding x & y pixel-coordinates of a datapoint gets updated as per the latest size of the chart, but the value of that particular datapoint remains same.
If you are referring to some other issue, kindly brief us more about the same along with an example so that we can understand it better and help you out.
—
Vishwas R
Team CanvasJS
You can use markers to show circle, square, triangle or cross in line charts. Please refer to documentation for more information along with live examples that you can try out.
If this doesn’t fit your requirements can you kindly share some example or pictorial representation of what you are looking for so that we can understand your requirement better & help you out?
—
Vishwas R
Team CanvasJS