Chart data binding to Datatable

[Marcin]

Hi, 

How can I use datatable as a datasource for any of the chart? Do you have any examples?

Thanks

[Iliana Dyankova]

Hi Marcin,

Kendo UI Chart cannot be directly connected to a database - it accepts data in JSON, JSONP and XML through the dataSource component. For more detailed information take a look at the corresponding documentation. 

Regards,
Iliana Nikolova
Telerik

 

 

[Marcin]

I spend several hours studying your documentation, but it doesn't explain anything.

Could you have a look on my code and see what I'm doing wrong:

Controler:
[HttpPost]
        public ActionResult FirstChart()
        {
            GraphViewModel model = new GraphViewModel();

            model.GraphInfo = new Graph();
            Test test = new Test();
            model.GraphData = test.Testit();
            return Json(model.GraphData);
        }


View:
@(Html.Kendo().Chart<PMS.WebUI.Models.GraphViewModel>()
      .Name("FirstChart")
      .DataSource(dataSource => dataSource
          .Read(read => read.Action("FirstChart", "Graph")) 
      )
      .Series(series =>
      {
          series.Bar(d => d.GraphData)
                .Name("Output");
      })
      .CategoryAxis(axis => axis
          .Categories(model => model.GraphData)
      )
)

JSON:
 "[\r\n  {\r\n    \"LineID\": \"CT1\",\r\n    \"MachineID\": 6,\r\n    \"Product\": \"Xcel Toric\",\r\n    \"DryLine\": \"1\",\r\n    \"Hour\": 7,\r\n    \"Input\": 90,\r\n    \"Output\": 48\r\n  },\r\n  {\r\n    \"LineID\": \"CT1\",\r\n    \"MachineID\": 6,\r\n    \"Product\": \"Xcel Toric\",\r\n    \"DryLine\": \"1\",\r\n    \"Hour\": 8,\r\n    \"Input\": 2305,\r\n    \"Output\": 2176\r\n  },\r\n  {\r\n    \"LineID\": \"CT1\",\r\n    \"MachineID\": 6,\r\n    \"Product\": \"Xcel Toric\",\r\n    \"DryLine\": \"1\",\r\n    \"Hour\": 9,\r\n    \"Input\": 1765,\r\n    \"Output\": 1728\r\n  }\r\n]"

[Marcin]

Ok I managed to do it by using javaScript wrapper. How can I do it using MVC wrapper?:


<div id="chart"></div>
<script>
    var seriesData = @Html.Raw(Model.GraphData)

    $("#chart").kendoChart({
        dataSource: seriesData,
        series: [{
            field: "Output"
        }]
    });
</script>

Where "Model.GraphData" is a JSON string.

Thanks  

[Daniel]

Hello Marcin,

I posted my reply in the support ticket on the same topic. For convenience, I am pasting it below and I am attaching the sample project. In order to avoid duplication, lets continue either here or in the support thread.

The chart does not support binding directly to a DataTable but it is possible to achieve this by loading the data via Ajax or by projecting the DataTable rows to a collection of objects and binding the collection on the server. I attached a sample project that demonstrates both approaches.

Regards,
Daniel
Telerik

 

 

[Marcin]

Ok I managed to do with the bar chart which works very nice:

 <div class="chart-wrapper">
                    @(Html.Kendo().Chart()
    .Name("DailyOutput")
    .Theme("Bootstrap")
    .Title(title => title
               .Text(Model.GraphInfo.Title)
           .Align(ChartTextAlignment.Center)
        )
    .Legend(legend => legend
            .Visible(true)
        )
    .Series(series =>
        {
            series.Column("Input").CategoryField("Hour");
            series.Column("Output").CategoryField("Hour");
        }
        ).SeriesColors("Red", "Green")
    .CategoryAxis(axis => axis
        .MajorGridLines(lines => lines.Visible(false))
        .Line(line => line.Visible(true))
        )
    .ValueAxis(axis => axis.Numeric()
        .Max(8000)
        .MajorGridLines(lines => lines.Visible(false))
        .Visible(true)
            )
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "Graph"))
    )
                    )
                </div>


But I'm trying to follow same method  with PieChart and it doesn't work. Could you please have a look?

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
                .Name("GetDailyOutputByProdFFS")
        .Theme("Bootstrap")
                .Title(title => title
                            .Text("GetDailyOutputByProdFFS")
                    .Position(ChartTitlePosition.Bottom))
        .Legend(legend => legend
            .Visible(false)
        )
        .Series(series =>
        {
            series.Pie("Output")
            .Labels(labels => labels
                .Template("#= category #: \n #= value#%")
                .Background("transparent")
                .Visible(true)
            )
            .StartAngle(150);
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
                .DataSource(dataSource => dataSource
                                .Read(read => read.Action("GetDailyOutputByProdFFS", "Graph"))
            )
    )
</div>

[Daniel]

Hello Marcin,

You should set the category field:

series.Pie("Output", "CategoryField")

or if there is no category field - set null as second parameter:

series.Pie("Output", null)

With the code that you provided the overload of the Pie method that accepts the series data will be used.

Regards,
Daniel
Telerik