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

Name or rename a Series on client-side databind

12 Answers 144 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Dušan
Top achievements
Rank 1
Dušan asked on 19 Jun 2013, 10:06 AM
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

12 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 24 Jun 2013, 11:02 AM
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.
0
Dušan
Top achievements
Rank 1
answered on 27 Jun 2013, 09:04 AM
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>

0
Accepted
Danail Vasilev
Telerik team
answered on 27 Jun 2013, 05:14 PM
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.
0
Dušan
Top achievements
Rank 1
answered on 28 Jun 2013, 07:14 AM
Thanks Danail, that works for me!
0
Ruchi
Top achievements
Rank 1
answered on 05 Mar 2015, 12:14 PM
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
0
Danail Vasilev
Telerik team
answered on 05 Mar 2015, 12:22 PM
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.

 
0
Ruchi
Top achievements
Rank 1
answered on 05 Mar 2015, 12:35 PM
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
0
Danail Vasilev
Telerik team
answered on 05 Mar 2015, 01:16 PM
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.

 
0
Ruchi
Top achievements
Rank 1
answered on 07 Mar 2015, 04:09 AM
Hello Danail,

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

Thanks and Regards,
Ruchi Patel
0
Mike Barraclough
Top achievements
Rank 1
answered on 09 Oct 2015, 05:48 PM
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.
0
Danail Vasilev
Telerik team
answered on 13 Oct 2015, 06:59 AM
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
0
Mike Barraclough
Top achievements
Rank 1
answered on 13 Oct 2015, 04:54 PM

Doing the second repaint made it work. 

 Thanks!

Tags
Chart (HTML5)
Asked by
Dušan
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Dušan
Top achievements
Rank 1
Ruchi
Top achievements
Rank 1
Mike Barraclough
Top achievements
Rank 1
Share this question
or