Changing labels from json data

[Bil]

Hi guys,

I have a pie chart that I'm fetching json data from my controller to populate. The json is pretty basic:

[
{
type: "AddOutageRequest",
count: 155
},
{
type: "AuthorizationRequest",
count: 362
},
{
type: "CurrentOutageRequest",
count: 2118
},
{
type: "PlannedOutageRequest",
count: 97
},
{
type: "RegionRequest",
count: 1212
}
]

This is good and I fetch it with my controller method but the labels on the pie chart/legend/etc. are (of course) the same as the "type" field. I want to present it in a more friendly manner so for example show "PlannedOutageRequest" as "Planned Outages" on the chart. 

How would I do this in my chart wrapper (as I can't change the backend) or would I have do some javascript after the chart loads?

Here's my chart markup if that helps:

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
          .Name("serverRequestsByTypeChart")
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
            .Series(series =>
            {
                series
                    .Pie("count", "type")
                    .Labels(labels => labels
                      .Template("#= category #: \n #= value#")
                      .Background("transparent")
                      .Visible(true)
                  ); ;
            })

          .DataSource(datasource =>
          {
              datasource.Read(read => read.Action("RequestTypesByTimePeriod", "Data"));
          })

          )
</div>

Thanks!

[T. Tsonev]

Hello Bil,

The label template can be used to display other data item fields too:

.Template("#= dataItem.title #: \n #= value#")

Where title is just any feed on your objects coming from the controller.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Bil]

Right, that's assuming that I have the data in the feed in the format I want to display it. That's easy enough but I don't. So either I have to change the data feed or do something in javascript to replace the text on the fly. I was hoping to keep the data feed low and not have UI elements in it but wasn't sure how to do a replacement of the labels in the chart after the data was loaded.

[T. Tsonev]

Hello Bil,

The template can also invoke a function:

.Template("#= labelTemplate(data) #")

<script>
  function labelTemplate(data) {
    return data.dataItem.title + " " + data.value;
  }
</script>

I hope this makes sense.

Regards,
T. Tsonev
Telerik