[Solved] Get Chart series dynamic from JSON

[Per]

I have a NET core app and calling an external API fropm another site which returns anJSON that looks like this

[
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "44.35"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "44.38"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "44.38"
  },
   {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "291.59"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "293.00"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "289.21"
  },
 {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "228.62"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "577.15"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "295.35"
  }
]

From this I want to create a chart with series that matches the "powerDeviceUnitName" values (with the color from JSON) and the axis will list all dates in dateInfo The "value" for the chart is "consumption"

I didn't thought this should be any hard issue, but I can't find any example on Teleriks demos that have external JSON?

 

Anyone that can help me in the right direction?

Regards Pelle

[Eyup]

Hello Per,

 

Thank you for reaching out. 

You can achieve your goal by fetching the external JSON in your ASP.NET Core controller, grouping the data by powerDeviceUnitName, and then dynamically generating chart series with the correct color and values. While there isn’t a demo showing exactly this scenario with remote JSON, here’s a clear end-to-end approach you can follow:

---

1. Fetch and Process the JSON Data in the Controller

Fetch the external JSON in your controller, parse it, and group it by powerDeviceUnitName. This way, you can prepare the data for the chart and assign the correct color per series.

Example Controller Action:

public async Task<IActionResult> GetPowerData()
{
    var httpClient = new HttpClient();
    var json = await httpClient.GetStringAsync("https://your-external-api.com/data");
    var rawData = JsonConvert.DeserializeObject<List<PowerDataViewModel>>(json);

    // Group data by unit name for dynamic series generation
    var groupedData = rawData
        .GroupBy(x => x.PowerDeviceUnitName)
        .Select(g => new {
            UnitName = g.Key,
            Color = g.First().Color,
            Data = g.Select(x => new {
                DateInfo = x.DateInfo,
                Consumption = x.Consumption
            }).ToList()
        }).ToList();

    return Json(groupedData);
}

Model Example:

public class PowerDataViewModel
{
    public string PowerDeviceName { get; set; }
    public string PowerDeviceUnitName { get; set; }
    public string Color { get; set; }
    public DateTime DateInfo { get; set; }
    public double Consumption { get; set; }
}

---

2. Configure the Chart in the View

You can dynamically add series in your view or use a strongly typed model. Here’s how to set up the chart with dynamic series and color binding:

@(Html.Kendo().Chart()
    .Name("powerChart")
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Url(Url.Action("GetPowerData"))) // Controller action above
    )
    .Series(series =>
    {
        // In your View, you can loop through the grouped data if you pass it as a model.
        // If using AJAX, you can use the DataBound event to add series dynamically via JavaScript.
    })
    .CategoryAxis(axis => axis
        .Type(ChartCategoryAxisType.Date)
        .Labels(labels => labels.Format("MMM dd yyyy"))
    )
)

Note: The Series.ColorField property lets you map the color from your data.

---

3. Client-Side Dynamic Series (if using AJAX)

If you use AJAX binding, you can hook into the chart’s dataBound event and programmatically add series using the data structure received from the server.

---

Let me know if you find these steps helpful.

Regards,
Eyup
Progress Telerik