"Complex" object sent to Chart

[Robert]

In all of the examples I have seen, lets just take an area chart for example, the data sent to the chart is a simple list of values.  So for instance you have the ElectricityProduction class with data points for Solar, Hydro, etc and the category (Year) is sent with it.  The chart then is defined as:

@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()

 

The datasource is defined as:

.DataSource(ds => ds.Read(read => read.Action("_SpainElectricityProduction", "Area_Charts")))

The action returns a collection of ElectricityProduction objects.

I am trying to use the following class that has a property which is a collection of data points and then another property with the points I want on the x-Axis.  In my case there can be a thousand points but I don't want to show a thousand ticks on my graph.  I want to be able to customize which points I use for tick mark.  So my class is as follows:

public class DailyPerformanceChart
{
    private List<string> _months;
    public List<AccountRunningPerformance> RunningPerformanceValues;

    public List<string> MonthsForAxis {
        get
        {
            return _months;
        }
    }
}

public class AccountRunningPerformance
{

    public string Date {get; set;}
    public decimal Value{ get; set; }

}

 

My Kendo Chart is defined as:

@(Html.Kendo().Chart<DailyPerformanceChart>()
         .Name("chartRunningPerformance")
         .Title("Growth of $10k")
         .ChartArea(chartArea => chartArea
             .Background("transparent")
         )
         .SeriesDefaults(seriesDefaults =>
             seriesDefaults.Area().Line(line => line.Style(ChartAreaStyle.Smooth))
         )
         .DataSource(ds => ds.Read(read => read.Action("RunningPerformanceData", "Account").Data("sendAccountID")))

         .Series(series =>
         {
             series.Area(model => model.RunningPerformanceValues).Name("Account").CategoryField("Date");
         })
)

 

So the read action returns a DailyPerformanceChart filled with a collection of plot points (RunningPerformanceValues) and a collection of Dates to plot on x-axis (MonthsForXAxis).

What I can't figure out is how to code the series to look at model.RunningPerformanceValues as the plot points, using Date as X and value as Y and then setting the CategoryAxis to use the model.MonthsForAxis.

Hopefully this is enough information to explain my issue.

  

 

[Viktor Tachev]

Hi Robert,

 

By default the type that the Chart is bound to should be specified when initializing the component. In the current setup there are two different collections that contain the data that should be displayed in the Chart.

To have the Chart display the information as expected I would suggest defining a ViewModel with all fields that will be relevant to the data in the Chart. Then transform the data server side and create a collection of that ViewModel that holds all records. After that return that collection to the client and ensure that the Chart is configured to expect data from the new ViewModel.

 

Regards,
Viktor Tachev
Progress Telerik

[Robert]

Not sure I understand.  I have two different collections of data, one with 1000 items and the other with say 10 or 15, not sure how I combine that into a single collection.

[Viktor Tachev]

Hello Robert,

The Chart expects a collection of single data type to be passed to it in order to visualize it as expected. What I can suggest is to create a ViewModel on the server that contains all relevant properties from AccountRunningPerformance and also the respective month (e.g. AccountRunningPerformanceViewModel). Then send a collection of that ViewModel to the Chart.

For populating AccountRunningPerformanceViewModel you can iterate through the AccountRunningPerformance collection and add the respective month so it is included in the ViewModel.

 

Regards,
Viktor Tachev
Progress Telerik

[Robert]

Ok so here is a small sample of data with the model "AccountRunningPerformance".  The sample is only 8 days but in productions this can be > 1k days.  I don't want 1000 dates on my x axis.  I can have anywhere from 8 to several thousand days represented and I want to choose which dates to plot on the xaxis depending on how many days are represented.  I know about the .BaseUnit(ChartAxisBaseUnit.Weeks) setting but there are a couple problems with using that.  One is that I need the exact start day and exact end day plotted in all cases, and using the baseunit setting it always misrepresents day one and day N.

So with the model below, how would I tell the x-axis to plot day 1 and day N and a random number in between those days (as an example).  I still want all 8 y values plotted I just want to choose what x values are shown.

Model class

public class AccountRunningPerformance
    {

        public string Date { get; set;}
        public decimal GrowthOf10kValue { get; set; }
    }

Sample data

[
{
Date: "1/1/2018",
GrowthOf10kValue: 10000,
},
{
Date: "1/2/2018",
GrowthOf10kValue: 10069.9544168444,
},
{
Date: "1/3/2018",
GrowthOf10kValue: 10101.0296471964,
},
{
Date: "1/4/2018",
GrowthOf10kValue: 10149.5374570245,
},
{
Date: "1/5/2018",
GrowthOf10kValue: 10187.529791222,
},
{
Date: "1/6/2018",
GrowthOf10kValue: 10187.529791222,
},
{
Date: "1/7/2018",
GrowthOf10kValue: 10187.529791222,
},
{
Date: "1/8/2018",
GrowthOf10kValue: 10196.3305218208,
}
]

 

 

 

 

[Tsvetomir]

Hi Robert,

The Kendo UI AreaChart widget is configured to show values to the corresponding Date objects. The density of the points on the plot are controlled via the base unit. However, it is expected it to not show half of the weeks when it is configured for "ChartAxisBaseUnit.Weeks". 

What I can recommend in the current case is to modify the template of the labels of the CategoryAxis. What I can recommend is to check the first and last items within the template and instead of returning the week start/end dates, return the value from the data source. 

.CategoryAxis(axis => axis
    .Date()
    .BaseUnit(ChartAxisBaseUnit.Weeks)
    .Labels(lb=>lb.Template("#=customTemplate(data)#"))
)

Within the JavaScript function handler, you would have access to the value of the category, as well as, a reference to the current data item. 

Let me know in case additional assistance is required.


Best regards,
Tsvetomir
Progress Telerik