MVC Stacked Range

[dpanscik]

Hello. Can someone do a MVC Stacked Range example.

There is a Javascript stacked range sample here.
https://jsfiddle.net/canvasjs/4d55drrr/

I would love to set the data points and color inside of a MVC controller.

Can someone help?

[Manoj Mohan]

@dpanscik,

Please check out this gallery example for creating range bar chart in ASP.NET MVC. In order to add color to the datapoint, you can modify the DataPoint Model class to include color property as well as while creating DataPoint object include color required. Please take a look at the below code snippet for the same

/* DataPoint Model Class */
public DataPoint(string label, double[] y, string color)
{
  this.Label = label;
  this.Y = y;
  this.Color = color;
}

//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "label")]
public string Label = "";

//Explicitly setting the name to be used while serializing to JSON.
[DataMember(Name = "y")]
public double[] Y = null;

[DataMember(Name = "y")]
public string Color = null;
.
.
/* Controller */
dataPoints.Add(new DataPoint("Owl", new double[] { 200, 1200 }, "#369EAD"));
.
.

—-
Manoj Mohan
Team CanvasJS

[dpanscik]

Beautiful. This is exactly the info I was hoping for.

Thank you Manoj

[dpanscik]

I just did a test. Passing datapoints and color with using viewbag the color setting successfully makes it to the chart. When passing datapoints and color with Ajax the color does not make it to the chart.

[Manoj Mohan]

@dpanscik,

Please have a look at this gallery example on creating chart using JSON data received from ajax request in ASP.NET MVC. To add color in the datapoints, along with the above mentioned solution you need to add color property while parsing the JSON received from the service. Please check out the code snippet below for the same.

function addData(data) {
  for (var i = 0; i < data.length; i++) {
    dataPoints.push({
      x: new Date(data[i].x),
      y: data[i].y,
      color: data[i].color
    });
  }
  chart.render();
}

If you are still facing issue, kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[dpanscik]

Ahh… Thank you Manoj. I like your answer. Thank you!