Example for MVC 4 render data as Kendo Chart has Telerik shared an example?

10 posts, 0 answers
  1. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 21 Oct 2013 Link to this post

    I have 3 series of data (JSON) and am in MVC 4 but I cannot find any example or tutorial how to link the Json to a chart series?  Can you share a link?

    Ok I have 3 series of data (ex.  3 countries and a sum for each country) can be string, json whatever....
    using MVC 4  is there a clear example of using a view how I map these series to a chart????? 

    I am searching Telerik/Kendo and no sample for MVC 4  and chart (not grid) is coming up.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 23 Oct 2013 Link to this post

    Hi Cindy,

    For working examples you could check Kendo UI Chart online demos as well as the offline demos from the distribution package.  

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 29 Oct 2013 Link to this post

    thank you
    the legend displays value in the series name.   Are there some more robust examples for legend api that I am missing?



    @(Html.Kendo().Chart(Model)
    .Name("chart1")
    .Title("IV Capture")
    .DataSource(dataSource => dataSource.Read(read => read.Action("FetchChartData", "Home"))
    .Group(group => group.Add(model => model.SModality))
    .Sort(sort => sort.Add(model => model.Zone).Ascending())
    )
    .Series(series =>
    {
    series.Column(model => model.IValue)
    .Name("value")
    .Stack(true);
    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom))


    .CategoryAxis(axis =>
    axis.Categories(model => model.Zone)
    .Labels(labels => labels.ToString())
    )
    .ValueAxis(axis => axis
    .Numeric().Labels(labels => labels.Format("{0}"))
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    )
    )
  5. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 29 Oct 2013 Link to this post

    this is the best I can figure from examples

    @model IEnumerable<MvcApplication1.Models.Order>
        @{
            var series = Html.Kendo()
                             .Chart(Model)
                             .Name("chart")
                             .Title("Orders")
                             .DataSource(dataSource => dataSource.Read(read => read.Action("FetchChartData", "my Chart" )).Group(group => group.Add(model => model.Description)).Sort(sort => sort.Add(model => model.Description).Ascending()))
                             .Series(
                             series:[{
                                    name:(model => model.OrderDetail.Name),
                                    stack:(model => model.Description),
                                    data:(model => model.OrderDetail.Count)
                             }])
        }<div class="chart-wrapper">
            @(series;
    }        $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 30 Oct 2013 Link to this post

    Hi Cindy,

    By design the legend displays the series names, however you could display different information using legend.labels.template. For example:   

    @(Html.Kendo().Chart()
      //....
      .Legend(legend => legend
          .Labels(l=>l.Template("legend labels template"))
       )
    )
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 01 Nov 2013 Link to this post

    Please see attached image, using your reference to the API, the best I could come up with does not show me how to put the grouped series with their values into the legend

    @(Html.Kendo().Chart(Model)
    .Name("chart1")
    .Title("IV Capture")
    .DataSource(dataSource => dataSource.Read(read => read.Action("FetchChartData", "Home"))
    .Group(group => group.Add(model => model.SModality))
    .Sort(sort => sort.Add(model => model.Zone).Ascending())
    )
    .Series(series =>
    {
    series.Column(model => model.IValue)
    .Name("value")
    .Stack(true);
    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Labels(labels=>labels.Template("Name: #: text #"))
    )

    .CategoryAxis(axis =>
    axis.Categories(model => model.Zone)
    .Labels(labels => labels.ToString())
    )
    .ValueAxis(axis => axis
    .Numeric().Labels(labels => labels.Format("{0}"))
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    )
    )
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 05 Nov 2013 Link to this post

    Hello Cindy,

    I am not quite sure if I understand correctly which value you would like to display in the chart legend - keep in mind the legend is due to the entire series not to the points in the series. In order to assist you best and provide concrete recommendations I would like to ask you to provide more details about the exact outcome you would like to implement? Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 05 Nov 2013 Link to this post

    I am trying to give more information about the graph in the legend. 
    In some graph software that is called a full legend, maybe with Kendo I have to produce another grid?  In table format I need to show the series and the grouped value total for the series.  I guess I will hide the legend, for grouped stacked does not make sense.

    This stems from also failing to be able to get at the JSON series as it binds to set the color.  Tried using something like below but you can see the  syntax is wrong   How can I set the color based on the group name?

    )
    .Events(e => e.DataBound(@<text>function() { if (model.SModality == "_Lost" this.series.color=red } </text>)
    )


     @model IEnumerable<MvcApplication1.Models.Modality>

    @(Html.Kendo().Chart(Model)
    .Name("chart1")
    .Title("IV Capture")
    .DataSource(dataSource => dataSource.Read(read => read.Action("FetchChartData", "Home"))
    .Group(group => group.Add(model => model.SModality))
    .Sort(sort => sort.Add(model => model.Zone).Ascending())
    )
    .Series(series =>
    {
    series.Column(model => model.IValue)
    .Name("value")
    .Stack(true)
    .GroupNameTemplate("#= group.value # (#= series.name #)");

    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Labels(labels=>labels.Template("Name: #: text #"))
    )

    .CategoryAxis(axis =>
    axis.Categories(model => model.Zone)
    .Labels(labels => labels.ToString())
    )
    .ValueAxis(axis => axis
    .Numeric().Labels(labels => labels.Format("{0}"))
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    )
    .Events(e => e.DataBound(@<text>function() { if (model.SModality == "_Lost" this.series.color=red } </text>)
    )
    )
  10. Cindy
    Cindy avatar
    10 posts
    Member since:
    Nov 2012

    Posted 05 Nov 2013 Link to this post

    GroupNameTemplate warns it is obsolete, cannot find any replacement for it in API, cannot get the group name, series name and value to show up anyway I try.

    Do I have to bind another grid to the chart data to get an adequate legend?

    Are there any customizations we can do to the new version of Kendo legends?

    Can I instead even control color of the series based on the group name?

    Want to have a full legend box.
     see attached file please



    @model IEnumerable<MvcApplication1.Models.Modality>

    @(Html.Kendo().Chart(Model)
    .Name("chart1")
    .Title("IV Capture")
    .DataSource(dataSource => dataSource.Read(read => read.Action("FetchChartData", "Home"))
    .Group(group => group.Add(model => model.SModality))
    .Sort(sort => sort.Add(model => model.Zone).Ascending())
    )
    .Series(series =>
    {
    series.Column(model => model.IValue)
    .Name("value")
    .Stack(true)
    .GroupNameTemplate("#= group.value # (#= series.name #)");


    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Labels(labels=>labels.Template("Name: #: text #"))
    )

    .CategoryAxis(axis =>
    axis.Categories(model => model.Zone)
    .Labels(labels => labels.ToString())
    )
    .ValueAxis(axis => axis
    .Numeric().Labels(labels => labels.Format("{0}"))
    )
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    )

    )
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 07 Nov 2013 Link to this post

    Hello Cindy,

    It appears for some reason the attachment didn't make it through, however from the provided details it seems you would like to display a table with the series details which is not supported by Kendo UI Chart. As a possible workaround I can suggest hiding the default chart legend and add an additional <div> which to configure in the desired outcome.

    Regarding the:

    • GroupNameTemplate - it is obsolete now and you should specify the template in the series.name. For example: 
    @(Html.Kendo().Chart(Model)
      //....
      .Series(series => {
         series.//...
           .Name("#= group.value #");          
      })
    )
    • Series colors - you could use the seriesColors option:
      .SeriesColors(
         "#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
         "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
      )

    Also you could reach the series options via the chart options. I.e.:  

    e.sender.options.series[i].color = "red"

    Regards, Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready