Name or rename a Series on client-side databind

[Dušan]

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

[Danail Vasilev]

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

[Dušan]

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>

[Danail Vasilev]

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

[Dušan]

Thanks Danail, that works for me!

[Ruchi]

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

[Danail Vasilev]

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

 

 

[Ruchi]

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

[Danail Vasilev]

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

 

 

[Ruchi]

Hello Danail,

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

Thanks and Regards,
Ruchi Patel

[Mike Barraclough]

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.

[Danail Vasilev]

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

[Mike Barraclough]

Doing the second repaint made it work. 

 Thanks!