Line Chart Configuration for AJAX using Razor

4 posts, 0 answers
  1. Steven
    Steven avatar
    2 posts
    Member since:
    Oct 2014

    Posted 20 Oct 2014 Link to this post

    I haven't been able to figure out how to set the series with a data source returned from a controller (see below). What do I need to pass to series.Line()?

    The controller method returns a list of long integers.

            @(Html.Kendo().Chart()
                .Name("jobHistoryChart")
                .Title("Batch Job History")
                .Theme("Bootstrap")
                .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
                .HtmlAttributes(new
                {
                    style = "margin-top:15px; border:thin solid steelblue; padding:10px; padding-bottom:20px;"
                })
                .DataSource(dataSource => dataSource.Read(read => read.Action("GetBatchJobHistory", "Home",
                    new { histJobCaption = "Load Inventory Usage Summary Data" })))
                //.Series(series =>
                //{
                //    series.Line().Name("Batch Job");
                //})

            )

  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 22 Oct 2014 Link to this post

    Hello Steven,

    The best way to do this is to bind your chart to list of objects. Please follow this online example.

    Regards,
    Hristo Germanov
    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Steven
    Steven avatar
    2 posts
    Member since:
    Oct 2014

    Posted 24 Oct 2014 in reply to Hristo Germanov Link to this post

    Thank you. That example was helpful. But now I'm trying to dynamically pass the histJobCaption using a JavaScript function, as shown in the code below. But when this runs, I get a "Cannot assign lambda expression to anonymous type property" error. Is there a way around this, or do I need an entirely different approach?

    @(Html.Kendo().Chart<AXBatchJobMonitorMvc.Models.BatchJobRunTime>()
    .Name("jobHistoryChart")
    .Title("Batch Job Performance")
    .Theme("Silver")
    .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
    .HtmlAttributes(new
    {
    style = "margin-top:10px; border:thin solid steelblue; padding:3px;"
    })
    .DataSource(dataSource => dataSource.Read(read => read.Action("GetBatchJobHistory", "Home",
    new { histJobCaption = @<script>getCaption();</script> }))
    .Group(g => g.Add(v => v.Group))
    .Sort(s => s.Add(v => v.DateTimeString))
    )
    .Series(series =>
    {
    series.Line(model => model.RunTime).Name("#:group.value#");
    })
    .ValueAxis(axis => axis
    .Numeric().Labels(labels => labels.Format("{0} min"))
    )
    .CategoryAxis(axis => axis
    .Categories(model => model.DateTimeString)
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0} min")
    )
    )
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 28 Oct 2014 Link to this post

    Hi Steven,

    Unfortunately you can't pass a function as an additional parameter to read method. Please excuse us for the inconvenience that this may cause.

    Regards,
    Hristo Germanov
    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready