Chart data binding to Datatable

7 posts, 0 answers
  1. Marcin
    Marcin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 16 Feb 2015 Link to this post

    Hi, 

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

    Thanks
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 18 Feb 2015 Link to this post

    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
     

    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. Marcin
    Marcin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 18 Feb 2015 in reply to Iliana Nikolova Link to this post

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






  5. Marcin
    Marcin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 19 Feb 2015 in reply to Marcin Link to this post

    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  




  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Feb 2015 Link to this post

    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
     

    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.

     
  7. Marcin
    Marcin avatar
    4 posts
    Member since:
    Feb 2015

    Posted 04 Mar 2015 Link to this post

    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>
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Mar 2015 Link to this post

    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
     

    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