Name or rename a Series on client-side databind

13 posts, 1 answers
  1. Dušan
    Dušan avatar
    3 posts
    Member since:
    Jun 2010

    Posted 19 Jun 2013 Link to this post

    Hi,
    I have a question and would appreciate your help.

    Is it possible to name or rename a ColumnSeries on client-side databind so that is displays correctly in my chart legend?
    I'm implementing a javascript function that calls a web service (or page method) and then repaints my RadHtmlChart with the retrieved JSON data. The new series names should be set from a value in my JSON data.

    function bindToChartData_Graf1() {
      $.ajax({
        type: "POST",
        url: "HtmlChart.aspx/GraphData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        success: function (data) {
          var RadHtmlChart1 = $find('<%=RadHtmlChart1.ClientID%>');
          RadHtmlChart1.set_dataSource(data.d);
          RadHtmlChart1.set_transitions(true);
          RadHtmlChart1.repaint();
        }
      });
    }


    I did manage to rename the Series with server-side code as shown below, but would like to implement this in javascript.

    Private Sub RadHtmlChart1_DataBound(sender As Object, e As System.EventArgs) Handles RadHtmlChart1.DataBound
        Try
            Dim chart As Telerik.Web.UI.RadHtmlChart = sender
            chart.PlotArea.Series(0).Name = year1 'value is dynamic
            chart.PlotArea.Series(1).Name = year2 'value is dynamic
        Catch ex As Exception
            'error
        End Try
    End Sub

    Thanks in advance for help.
    Dušan
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 24 Jun 2013 Link to this post

    Hi Dušan,

    There is no client-side getter/setter methods for Series names in RadHtmlChart. The exception is the PieSeries which has NameField property, responsible for the names of databound PieSeries Items. This series type lets you access the chart's datasource on the client and modify the namefield values.

    What I can suggest you, however, in order to modify chart's series names, in your case is to access the RadHtmlChart's internal name property through the chartObject, as follows:

    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
        <ChartTitle>
        </ChartTitle>
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
                </telerik:ColumnSeries>
                <telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="myLabels">
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>
    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID %>");
            chart._chartObject.options.series[0].name = "New Series Name 1";
            chart._chartObject.options.series[1].name = "New Series Name 2";
            chart.repaint();
        }
    </script>



    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dušan
    Dušan avatar
    3 posts
    Member since:
    Jun 2010

    Posted 27 Jun 2013 Link to this post

    HI Danail,

    Thank you for the reply and your suggestion, but i'm having problems implementing your code. Your example works perfectly until i start to use RadHtmlChart's client-side method set_dataSource(). At that point it always uses the series name defined in the markup (Name1 and Name2). Any suggestions?

    My code:
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
        <ChartTitle>
        </ChartTitle>
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
                </telerik:ColumnSeries>
                <telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="myLabels">
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>
    JavaScript:
    <script type="text/javascript">
            function pageLoad() {
            var data = [
                {
                    "myValues1": 9.65,
                    "myValues2": 34.36,
                    "myLabels": "1"
                },
                {
                    "myValues1": 1.423,
                    "myValues2": 12.3,
                    "myLabels": "2"
                },
                {
                    "myValues1": 64.1,
                    "myValues2": 15.2,
                    "myLabels": "3"
                },
                {
                    "myValues1": 69.2,
                    "myValues2": 29.8,
                    "myLabels": "4"
                }]
     
            var chart = $find("<%=RadHtmlChart1.ClientID %>");
            chart.set_dataSource(data);
            chart._chartObject.options.series[0].name = "New Series Name 1";
            chart._chartObject.options.series[1].name = "New Series Name 2";
            chart.repaint();
        }
    </script>

  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Jun 2013 Link to this post

    Hello Dušan,

    As I have already mentioned in my previous post there aren't any public client-side getter/setter methods for Series names in RadHtmlChart. The provided solutions was just a workaround that may not work in all cases. Nevertheless I can suggest you to repaint the HtmlChart twice - after setting the datasource and after changing the series names:
    chart.set_dataSource(data);
    chart.repaint();
    chart._chartObject.options.series[0].name = "New Series Name 1";
    chart._chartObject.options.series[1].name = "New Series Name 2"
    chart.repaint();



    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Dušan
    Dušan avatar
    3 posts
    Member since:
    Jun 2010

    Posted 28 Jun 2013 Link to this post

    Thanks Danail, that works for me!
  7. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 05 Mar 2015 Link to this post

    Hello Team,

    I am also trying to bind RadHTmlChart client-side databind: the above post helps me to rename the series.

    But as per the enhancement required in my application, i want to create column series dynamically, that is in json object.

    Please find some part of code below, Let me know if anyone having any solution. Thanks in advance, 

    var chart = $find(sender._element.id);
                var i = 2;
                for (var key in jsonResult)
                {
    // here i want to add column series to chart.
                    i ++;
                }
                chart.repaint();


    Regards,
    Ruchi Patel
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 05 Mar 2015 Link to this post

    Hi Ruchi ,

    You can create a new series by making a deep copy of an existing series:

    //Reference the kendo widget
    var kendoChart = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget();
    //Create new series by making a deep copy of an existing series
    var newSeries = $telerik.$.extend(true, {}, kendoChart.options.series[0]);
    //Modify the new series
    newSeries.name = "New Series";
    newSeries.color = "green";
    newSeries.data = [{ value: 18000 }, { value: 25000 }, { value: 22000 }];
    //Add the new series and repaint the chart, so that the new changes can take effect
    kendoChart.options.series.push(newSeries);
    kendoChart.redraw();


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 05 Mar 2015 Link to this post

    Hello Danail,

    Thanks for your reply.

    but we are not using kendo controls. its RadHtmlChart that we are trying to bind, I tried by Series.push as per the code below, but its still not working as i think its not getting DataFieldY.
    var chart = $find(sender._element.id);
            var i = 1;
            chart._series = [];
            for (var key in jsonResult)
            {
                chart._series.push(key);
                i ++;
            }           
            
            $find(sender._element.id).set_dataSource(jsonResult);
            chart.repaint();


    Let me know if you have anymore idea about missing part.
    Thanks and Regards,
    Ruchi Patel
  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 05 Mar 2015 Link to this post

    Hello Ruchi ,

    RadHtmlChart is actually an ASP.NET server-side wrapper of KendoUI charting widget. In order to modify the chart on the client-side you can do that through the kendo widget. The widget can be referenced by the get_kendoWidget() method for newer versions of the controls and through the _chartObject property for older ones.


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 06 Mar 2015 in reply to Danail Vasilev Link to this post

    Hello Danail,

    Yes it works for me now, Thank you for your support.

    Thanks and Regards,
    Ruchi Patel
  12. Mike Barraclough
    Mike Barraclough avatar
    4 posts
    Member since:
    Oct 2005

    Posted 09 Oct 2015 in reply to Danail Vasilev Link to this post

    I had stumbled across this solution for setting the series name dynamically on the client. And it works - the first time.  But when I change the datasource on the client and want to change the series (legend) names, it doesn't change them.  The chart is repainted correctly, but the legend doesn't change.
  13. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Oct 2015 Link to this post

    Hi Mike,

    Repainting the chart after changing the data source and after changing the series names resolve the issue on my side. You can examine the code below for details

    <script type="text/javascript">
        function pageLoad() {
            var data = [
                {
                    "myValues1": 9.65,
                    "myValues2": 34.36,
                    "myLabels": "1"
                },
                {
                    "myValues1": 1.423,
                    "myValues2": 12.3,
                    "myLabels": "2"
                },
                {
                    "myValues1": 64.1,
                    "myValues2": 15.2,
                    "myLabels": "3"
                },
                {
                    "myValues1": 69.2,
                    "myValues2": 29.8,
                    "myLabels": "4"
                }]
     
            var chart = $find("<%=RadHtmlChart1.ClientID %>");
            chart.set_dataSource(data);
            chart._chartObject.options.series[0].name = "New Series Name 1";
            chart._chartObject.options.series[1].name = "New Series Name 2";
            chart.repaint();
        }
     
        function OnClientClicked() {
            var data = [
                {
                    "myValues1": 22,
                    "myValues2": 55,
                    "myLabels": "111"
                },
                {
                    "myValues1": 6,
                    "myValues2": 1,
                    "myLabels": "222"
                }]
     
            var chart = $find("<%=RadHtmlChart1.ClientID %>");
            chart.set_dataSource(data);
            chart.repaint();
            chart._chartObject.options.series[0].name = "Series 1111";
            chart._chartObject.options.series[1].name = "Series 2222";
            chart.repaint();
        }
    </script>
    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="OnClientClicked" Text="Change Data Source" />
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
        <ChartTitle>
        </ChartTitle>
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
                </telerik:ColumnSeries>
                <telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="myLabels">
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Mike Barraclough
    Mike Barraclough avatar
    4 posts
    Member since:
    Oct 2005

    Posted 13 Oct 2015 in reply to Danail Vasilev Link to this post

    Doing the second repaint made it work. 

     Thanks!

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