Line Chart Configuration for AJAX using Razor

[Steven]

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");
            //})

        )

[Hristo Germanov]

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

 

 

[Steven]

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")
)
)

[Hristo Germanov]

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