This is a migrated thread and some comments may be shown as answers.

Dynamically loading the series information

1 Answer 91 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 26 Feb 2015, 12:43 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 02 Mar 2015, 12:21 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Mike
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or