[Solved] How to render different series on a line chart

[Spartan IV]

My model contains sales data

List<SalesData> list = GetSalesData(dateFrom, dateTo)


SalesData.StoreLocation = "Florida"
SalesData.UnitsSold = 100
SalesData.DateId = "05/01/2012"
.
.
SalesData.StoreLocation = "Florida"
SalesData.UnitsSold = 150
SalesData.DateId = "05/30/2012"

SalesData.StoreLocation = "California"
SalesData.UnitsSold = 500
SalesData.DateId = "05/01/2012"
.
.
SalesData.StoreLocation = "California"
SalesData.UnitsSold = 750
SalesData.DateId = "05/30/2012"

Imagine I have multiple Store Locations, but for each one i have an entry for each day of the month

I want to show an independent serie for each Location (a line chart)
where my XAxis is my DateId and my YAxis is the UnitsSold

If I have stores on 10 states, it would should 10 lines (series)

Is this possible? or the control is limited and cannot do this?

Thanks for any help

[T. Tsonev]

Hello,

Automatic grouping is not available in the MVC Chart.

The data needs to be processed manually and then sent to the chart. For example:
from sales in SalesDataRepository.GetSalesData()group sales by sales.StoreLocation

I'm attaching a sample project that demonstrates how to plot the grouped data.

Regards,
Tsvetomir Tsonev
the Telerik team

[Spartan IV]

Awesome, Great example. Thank you so much for your help, very straightforward

An example like this should be placed on the Documentation or Knowledge Base. This is a very common scenario, but it is not clear how to accomplish this, reading what is available right now at the web site.

Thanks again so much!!

[Elliott]

Spent hours trying to figure this out - thanks to you both for your input. This needs to be in the demos somewhere as anyone with many series will have a headache with the current ones. 

Out of interest - is this coming in a future release? It would be really handy as it is not always possible to know how many series you have at design time. 

Thanks
Elliott

[Spartan IV]

This is another way:

 

Ajax call and dynamic client side series:

// The chart

@(Html.Telerik().Chart()

.Name(

 

"Stores")

 

.Title(

 

"Unit sales")

 

.CategoryAxis(axis => axis.Labels(labels => labels.Rotation(270)))

.ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format(

 

"{0:#,##0}")))

 

.Legend(legend => legend

.Position(

 

ChartLegendPosition.Right))

 

.Tooltip(tooltip => tooltip

.Visible(

 

true)

 

.Format(

 

"{0:#,##0}"))

 

.HtmlAttributes(

 

new { style = "width:700px; height:600px" }))

 

 

The javascript call

//CategoryValues = string with comma separated value (dates)
//DataValues = string with comma separated values (units sold)

# of category values must be equal to # of data values (proper mapping)

function getStoreLocationData(storeList, dateFrom, dateTo) {

        var controller = "Store";

        var action = "GetSalesDataByStore";

        var ajaxurl = '@Url.Content("~")' + controller + '/' + action;

        var colors = ['blue', 'green', 'yellow', 'pink', 'navy', 'teal', 'red', 'peach', "GreenYellow", "indigo", "purple", "DodgerBlue", "Brown", "Orange", "Gray", "Magenta", "Cyan", "Silver" ,"Gold"];

        $.ajax({

            type: "POST",

            url: ajaxurl,

            data: "selectedStores=" + storeList + "&dateFrom=" + dateFrom + "&dateTo=" + dateTo,

            error: function () {

                alert('Error getting store information');

            },

            success: function (data) {

  

                // if the returned (echoed) ajaxId is the latest the client submitted then do something. If not then ignore

                var thechart = getChart('Stores');

                // remove existing series

                while (thechart.options.series.length > 0) {

                    thechart.options.series.pop();

                }

  

                var categories = "";

                var colorIndex = 0;

                // Loop through the selected values and submit AJAX queries

                for (var i = 0; i < data.length; i++) {

                    categories = data[i].CategoryValues;

                    thechart.options.series.push({

                        color: colors[colorIndex],

                        name: data[i].StoreLocation,

                        type: "line",

                        data: data[i].DataValues.split(',')

                    });

                    colorIndex++;

                    if (colorIndex == colors.length) {

                        colorIndex = 0;

                    }

                }

  

                thechart.options.categoryAxis.categories = categories.split(',');

                thechart.refresh();

            }

        });

    }