This is a migrated thread and some comments may be shown as answers.

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

9 Answers 310 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Cindy
Top achievements
Rank 1
Cindy asked on 21 Oct 2013, 11:46 PM
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.

9 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 23 Oct 2013, 01:44 PM
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!
0
Cindy
Top achievements
Rank 1
answered on 29 Oct 2013, 08:16 PM
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}")
)
)
0
Cindy
Top achievements
Rank 1
answered on 29 Oct 2013, 08:20 PM
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);
0
Iliana Nikolova
Telerik team
answered on 30 Oct 2013, 01:26 PM
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!
0
Cindy
Top achievements
Rank 1
answered on 01 Nov 2013, 09:51 PM
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}")
)
)
0
Iliana Nikolova
Telerik team
answered on 05 Nov 2013, 11:35 AM
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!
0
Cindy
Top achievements
Rank 1
answered on 05 Nov 2013, 05:23 PM
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>)
)
)
0
Cindy
Top achievements
Rank 1
answered on 05 Nov 2013, 05:54 PM
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}")
)

)
0
Iliana Nikolova
Telerik team
answered on 07 Nov 2013, 10:14 AM
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!
Tags
Chart
Asked by
Cindy
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Cindy
Top achievements
Rank 1
Share this question
or