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

RadHtmlChart legend click

2 Answers 402 Views

Chart (HTML5)

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

2 Answers, 1 is accepted

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)

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>