RadHtmlChart legend click

3 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 Link to this post

    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. Michael
    Michael avatar
    2 posts
    Member since:
    Nov 2014

    Posted 10 Jun 2015 Link to this post

    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>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 15 Jun 2015 Link to this post

    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
Back to Top