Changing labels from json data

4 posts, 0 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 02 May 2015 Link to this post

    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!

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 05 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 05 May 2015 in reply to T. Tsonev Link to this post

    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.
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 07 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready