Dynamically loading the series information

2 posts, 1 answers
  1. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 26 Feb 2015 Link to this post


    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:

          .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.
  2. Answer
    T. Tsonev
    T. Tsonev avatar
    2760 posts

    Posted 02 Mar 2015 Link to this post


    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
       .Group(group => group.Add(model => model.WebSiteName))
    .Series(series => {
      series.Column(model => model.Value,
                    categoryExpression: model => model.DisplayDate)
             .Name("Web Site: #= group.value #")

    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.

    T. Tsonev

    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.

  3. UI for ASP.NET AJAX banner
Back to Top