Rank 2
We want to allow our users to configure a RadHtmlChart piechart a bit and save those settings, and when they return to that aspx page, the chart will load with those settings.
Is there a method to save their settings?
For example, the user only wants to see 5 of the 10 legend items by default.
But we still want to allow them to re-enable the none displayed legend items.. and etc...
So the user loads the page. The pie chart has 10 slices and thus 10 items in the legend.
The user clicks on several of the legend items so they are not displayed in the pie chart.
We want to save this configuration for them in the database.
When they revisit the page a few days later, it remembers their view settings for hte chart and displays it.
Then for example they then decide to show two of the excluded legend items by clicking on them again.
They legends that were once excluded are now included.
Etc..etc...
4 Answers, 1 is accepted
After you get the information regarding the series visibility from the data base you can set the visible property of the items either on the server-side or on the client-side like this:
ASPX:
<script> function OnClientClicked(sender, args) { var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); chart.options.series[0].data[1].visible = false; chart.redraw(); }</script><telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400" Height="400"> <PlotArea> <Series> <telerik:PieSeries Name="Series 1"> <SeriesItems> <telerik:PieSeriesItem Y="30" Name="item 1" /> <telerik:PieSeriesItem Y="10" Name="item 2" /> <telerik:PieSeriesItem Y="20" Name="item 3" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea></telerik:RadHtmlChart><telerik:RadButton ID="RadButton1" runat="server" Text="Hide Item Server-side" OnClick="RadButton1_Click" /><telerik:RadButton ID="RadButton2" runat="server" Text="Hide Item Client-side" OnClientClicked="OnClientClicked" AutoPostBack="false" />C#:
protected void RadButton1_Click(object sender, EventArgs e){ (RadHtmlChart1.PlotArea.Series[0] as PieSeries).SeriesItems[2].Visible = false;}Regards,
Danail Vasilev
Telerik
Rank 2
That helps a bit but my chart is bound to data on the server side.When I try to see the series items it is yielding a null enumeration.
Here is my code:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="400px" Width="480px" CssClass="fb-sized" OnPreRender="RadHtmlChart1_PreRender"> <ClientEvents OnLegendItemClick="OnLegendItemClicked"></ClientEvents> <Legend> <Appearance Position="Bottom"> </Appearance> </Legend> <PlotArea> <Series> <telerik:PieSeries DataFieldY="TypeCount" ExplodeField="IsExploded" NameField="Area"> <LabelsAppearance DataFormatString="{0}"> </LabelsAppearance> <TooltipsAppearance Color="White"> <ClientTemplate> #=dataItem.Area#<br />#=dataItem.TypeCount# </ClientTemplate> </TooltipsAppearance> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
C# Code for the chart:
The page load method for now just loads the data into the chart.
The Pre_Render event is where I moved my code for hiding and show a series in the pie chart. I had initially tried it in the page load, but I figured the databind event might need the configuration of the chart to occur after the fact.
protected void Page_Load(object sender, EventArgs e) { //Get the chart Data using (var context = new TIPWebITLibrary.DAL.TIPWebITDataContext()) { var distributionsByType = (from data in context.FTechInventoryMeta() join sites in context.tblTechSites on data.SiteUID equals sites.SiteUID where (data.EntityTypeUID == (int)EntityTypeEnum.Student || data.EntityTypeUID == (int)EntityTypeEnum.Staff || data.EntityTypeUID == (int)EntityTypeEnum.Room || data.EntityTypeUID == (int)EntityTypeEnum.Transfer) && sites.Active == true group data by new { data.EntityTypeUID } into grouping select new chartDistribution { Name = grouping.Key.ToString(), Area = grouping.Key.EntityTypeUID == 2 ? "Room" : grouping.Key.EntityTypeUID == 3 ? "Staff" : grouping.Key.EntityTypeUID == 4 ? "Room" : "Transfer", TypeCount = grouping.Count(p => Convert.ToBoolean(p.InventoryUID)), IsExploded = false }); RadHtmlChart1.DataSource = distributionsByType; RadHtmlChart1.DataBind(); } } protected void RadHtmlChart1_PreRender(object sender, EventArgs e) { var userPreferenceService = new UserPreferenceService(); User user = (User)Session["currentUser"]; var userChartPreferences = userPreferenceService.GetUserPreferences(user.UserID).Where(x => x.UserPreferenceName == "TagDistributionChart"); foreach (var userChartPreference in userChartPreferences) { //This is where I try and get hold of the charts series to hide and show. var series = RadHtmlChart1.PlotArea.Series; foreach (PieSeries item in series) { if (item.Name == userChartPreference.UserPreferenceValue) { item.Visible = false; } } } }
You cannot access data items of a data bound chart because it actually renders on the client-side. More information is available here - http://www.telerik.com/help/aspnet-ajax/htmlchart-troubleshooting-known-limitations.html
I can suggest you hide the items on the client-side as illustrated in my previous post. You can also register a JavaScript code from the code behind (see this article - http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-opening-from-server.html).
Regards,
Danail Vasilev
Telerik
Rank 2