Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadHtmlChart legend click

2 Answers 242 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 10 Jun 2015, 02:08 PM

Hi 

 

I have incorporated a RadHtmlChart on my application and have all the data binding and series set up done client side. The chart displays and has the required functionality except for one thing:

The first time I click on a legend item nothing happens. After this any subsequent clicks have the desired outcome i.e. the series' and legend item's visibility changes. I am not sure why the initial click does not perform these default functions but the 2nd, 3rd, etc clicks do. Can you help? Is there an initialisation I am missing that is triggered by the first click? Is there an extra bind/refresh/redraw needed?

 I appreciate there is no code listed but I'm hoping this is a generic question that someone can help me with.

 

Thanks

Michael

2 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 10 Jun 2015, 02:21 PM

As it will maybe help below is the asp and javascript I am using. (Some of this code may help those trying to do the client side series creation and databinding)

 c#

01.<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Visible="true" >
02.    <ClientEvents OnLoad="onChartLoad" OnLegendItemClick="OnLegendItemClick"  ></ClientEvents>
03.            <ChartTitle Text="Fill Rates">
04.            </ChartTitle>
05.             
06.            <PlotArea>
07.                <Series>
08.                    <telerik:ColumnSeries DataFieldY="CoreMed"  Stacked="false" Gap="1.5" Spacing="0.4"
09.                        Name="Core Med">
10.                        <LabelsAppearance DataFormatString="{0:N0} %"></LabelsAppearance>
11.                        <TooltipsAppearance Color="White" />
12.                        </telerik:ColumnSeries>
13. 
14.                </Series>
15.                <XAxis DataLabelsField="Nation" >
16.                            <MinorGridLines Visible="false"></MinorGridLines>
17.                            <MajorGridLines Visible="true"></MajorGridLines>
18.                        </XAxis>
19.                        <YAxis MaxValue="100" MinValue="0">
20.                            <LabelsAppearance DataFormatString="{0} %"></LabelsAppearance>
21.                            <MinorGridLines Visible="false"></MinorGridLines>
22.                        </YAxis>
23.            </PlotArea>
24.        </telerik:RadHtmlChart>

Javascript/JQuery

001.<script type="text/javascript" language="javascript" >
002.  
003.        (function (global, undefined) {
004.            var chart = null;
005.            //variable to store initial series
006.            var startSeries = null;
007. 
008.            global.onChartLoad = function onChartLoad(sender, args) {
009. 
010.                //get the chart object
011.                chart = sender;
012. 
013.                //create a copy of the initial series
014.                startSeries = $telerik.$.extend(true, {}, chart._chartObject.options.series[0]);
015. 
016.                //clear the data series
017.                var clearSeries = [];
018.                chart._chartObject._sourceSeries = clearSeries;
019. 
020.                //set the data source to blank
021.                var initalSpec = [{ "Nation": "Scotland" }, { "Nation": "England" }, { "Nation": "Northern Ireland" }, { "Nation": "Wales" } ];
022.                chart.set_dataSource(initalSpec);
023.                //refresh/repaint the chart
024.                chart._chartObject.refresh();
025.                chart.repaint();
026.            }
027. 
028.            RowSelectedCs = function (sender, args) {
029. 
030.                //get the selected items from the radGrid
031.                var selected = sender.get_selectedItems();
032. 
033.                //set up the array and objects
034.                var spec2 = [];
035.                var scot = { "Nation": "Scotland" };
036.                var eng = { "Nation": "England" };
037.                var ni = { "Nation": "Northern Ireland" };
038.                var wales = { "Nation": "Wales" };
039. 
040.                //create an array to hold all the series
041.                var ser = [];
042. 
043.                //set the data source
044.                chart.set_dataSource(spec2);
045.                //null variable to store the temp series
046.                var newSeries = null;
047. 
048.                for (i = 0; i < selected.length; i++) {
049.                    //remove the whitespace from the data field
050.                    var seriesField = null;
051.                    var fieldData = null;
052.                    var rowId = null;
053.                    fieldData = selected[i].getDataKeyValue("Specialty") + selected[i].getDataKeyValue("Level") + selected[i].getDataKeyValue("PostType");
054.                    rowId = selected[i].get_id().toString();
055. 
056.                    var col1Source = selected[i].getDataKeyValue("ScotFillRate");
057.                    var col2Source = selected[i].getDataKeyValue("EngFillRate");
058.                    var col3Source = selected[i].getDataKeyValue("NIFillRate");
059.                    var col4Source = selected[i].getDataKeyValue("WalesFillRate");
060.                    var itemIndexRef = selected[i].get_itemIndex().toString();
061.                    //GET THE ITEM INDEX REF FROM GRID
062.                    //console.log(itemIndexRef);
063.                    scot[fieldData+itemIndexRef] = rowId;
064.                    eng[fieldData+itemIndexRef] = rowId;
065.                    ni[fieldData+itemIndexRef] = rowId;
066.                    wales[fieldData+itemIndexRef] = rowId;
067. 
068.                    //set the data
069.                    if (col1Source== ""|| col1Source.substring(0,5) == "0.000") {
070.                        scot[fieldData] = "0";
071.                    } else if(col1Source.substring(0,5) == "100.0") {
072.                        scot[fieldData] = col1Source.substring(0,3);
073.                    }else {
074.                         scot[fieldData] = selected[i].getDataKeyValue("ScotFillRate").substring(0,5);
075.                    }
076.                    if (col2Source == ""|| col2Source.substring(0,5) == "0.000") {
077.                        eng[fieldData] = "0";
078.                    } else if(col2Source.substring(0,5) == "100.0") {
079.                        eng[fieldData] = col2Source.substring(0,3);
080.                    }else {
081.                         eng[fieldData] = col2Source.substring(0,5);
082.                    }
083.                    if (col3Source == ""||col3Source.substring(0,5) == "0.000") {
084.                        ni[fieldData] = "0";
085.                    } else if(col3Source.substring(0,5) == "100.0") {
086.                        ni[fieldData] = col3Source.substring(0,3);
087.                    }else {
088.                         ni[fieldData] = col3Source.substring(0,5);
089.                    }
090.                    if (col4Source == ""||col4Source.substring(0,5) == "0.000") {
091.                        wales[fieldData] = "0";
092.                    } else if(col4Source.substring(0,5) == "100.0") {
093.                        wales[fieldData] = col4Source.substring(0,3);
094.                    }else {
095.                         wales[fieldData] = col4Source.substring(0,5);
096.                    }
097. 
098.                    //copy the original series
099.                    //console.log(startSeries);
100.                    newSeries = new startSeries.constructor();
101.                    //console.log(newSeries);
102.                    //alter the new series properties
103.                    newSeries.name = selected[i].getDataKeyValue("Specialty") + " " + selected[i].getDataKeyValue("Level") + " " + selected[i].getDataKeyValue("PostType");
104.                    seriesField = selected[i].getDataKeyValue("Specialty") + selected[i].getDataKeyValue("Level") + selected[i].getDataKeyValue("PostType");
105. 
106.                    //replace spaces, dashes and slashes
107.                    seriesField = seriesField.replace(/[ /-]/g, '');
108.                    newSeries.field = seriesField;
109.                    newSeries.labels = { format: "{0:0} %", visible: "true", font: "12px Arial,Helvetica,sans-serif" };
110.                    newSeries.tooltip = { color: "#ffffff", visible: "true", font: "12px Arial,Helvetica,sans-serif" };
111.                    newSeries.RowRef = rowId;
112.                    ser.push(newSeries);
113.                    //console.log(newSeries)
114.                }
115.                //set the chart series to the array of new series
116.                chart._chartObject._sourceSeries = ser;
117. 
118.                //push the the objects into the array
119.                spec2.push(scot);
120.                spec2.push(eng);
121.                spec2.push(ni);
122.                spec2.push(wales);
123.                //console.log(spec2);
124.                //refresh/repaint the chart
125.                chart._chartObject.refresh();
126.                chart.repaint();
127. 
128.            }
129. 
130.        })(window);
131. 
132.</script>

0
Danail Vasilev
Telerik team
answered on 15 Jun 2015, 06:41 AM
Hello Michael,

We are not aware of the mentioned issue. Does upgrading to the latest Telerik UI version - 2015.1.401 helps? If not can you send me a full runnable sample that reproduces the issue? In order to do that you can bind the chart a dummy data source.

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
Tags
Chart (HTML5)
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or