Dynamically loading the series information

[Mike]

Hi,

I'm reading from a dataset from a SQL database to my chart, I've managed all chart types except for one as the data coming back is dynamic. Essentially I am need to have the startDate that is already returned to be my x axis and then I want to stack by database column the monthly information. The problem is I don't know what the columns are called after the startDate and don't know how many there are. 

I've been looking now for over 24 hours at various solutions and have so far come up blank. My charts are written using the MVC approach but I've also been trying the JavaScript approach. All seems OK until I try to load the series information in. The data is going to be coming at me in the following format:

Public class websiteInformation
{
    public string DisplayDate { get; set; }
    public List<WebSiteInfo> WebSite { get; set; }
}

Public class WebSiteInfo
{
    public decimal Value { get; set; }
    public string WebSiteName { get; set; }
}

The razor looks like this:

@(Html.Kendo().Chart<websiteInformation>()
      .Theme("BlueOpal")
      .Name("WebSiteInfo")
      .ChartArea(chartArea => chartArea.Background("transparent"))
      .SeriesDefaults(sd => sd.Column().Stack(true))
      .DataSource(ds => ds
          .Read(read => read.Action("WebSiteInfo", "Home", new
          {
              param1 = "param1value",
              param2 = "param2value",
              param3 = "param3value",
              param4 = "param4value",
              param5 = "param5value"
          }))
          .Events(e => e.RequestStart("chart4LoadingStart").RequestEnd("chart4LoadingEnd"))
      )
      .Series(series =>
      {
        ?????????????????????????
      })
      .Legend(l => l.Position(ChartLegendPosition.Bottom))
      .Tooltip(tt => tt.Visible(true).Template("#= kendo.format('{0:P}', percentage) #").Color("white"))
)

What I need to know is how to dynamically configure the series so I can have the x axis as the DisplayDate then the Y stacked for each month all the WebSiteInfo so the Value and the WebSiteName will be used in the tooltip.

Hope this all makes sense,and hopefully someone can help?
Thanks in advance.

[T. Tsonev]

Hello,

What we recommend in this scenario is to use the data grouping feature of the data source.
It requires the data to be a bit "flatter" to work. For example:
Public class WebSiteInfo
{
    public string DisplayDate { get; set; }
    public decimal Value { get; set; }
    public string WebSiteName { get; set; }
}
 
A sample configuration might look like:
.DataSource(ds => ds
   .Read(...)
   .Group(group => group.Add(model => model.WebSiteName))
)
.Series(series => {
  series.Column(model => model.Value,
                categoryExpression: model => model.DisplayDate)
         .Name("Web Site: #= group.value #")
         .Stack(true);
})

Here we group by the WebSiteName field, effectively producing one series for each unique value.
The series name is actually a template, evaluated against the actual group value.

We also stack the series and place them on the corresponding categories by binding to the DisplayDate field.

I hope this makes sense. Let us know if you have any further questions.

Regards,
T. Tsonev
Telerik