Assign StripLines via Ajax instead of Hard Code

[tgriffiths]

Hello. I am developing a .Net Core Razor Page app using Canvasjs. I am assigning the Data Points to the chart using an AJAX call which returns Json data and this is then pushed into the chart.

However, I also need to assign Strip Lines using a similar method. I’ve uploaded a sample project to Google Docs which can be downloaded from https://drive.google.com/file/d/1QBLHZl1nRHXOD9MkhXo-Acbgxcz9zTXH/view?usp=sharing

In the sample, you’ll see that I am hard coding 2 Strip Lines to the X-Axis of the chart, but I need the Strip Lines assigned in the same way as the Data Points, i.e. via an AJAX call and then returning Json data for the Strip Lines into the chart.

I can’t use a hard-coded approach.

Is this possible?

Any help much appreciated.

Thanks.

[Vishwas R]

@tgriffiths,

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