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

[Cindy]

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.

[Iliana Dyankova]

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

[Cindy]

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

[Cindy]

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

[Iliana Dyankova]

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

[Cindy]

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

[Iliana Dyankova]

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

[Cindy]

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

[Cindy]

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

)

[Iliana Dyankova]

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