Save user settings in database for RadHtmlChart PieChart

5 posts, 0 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 19 May 2015 Link to this post

    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...

     

     

     

     

     

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 20 May 2015 Link to this post

    Hello,

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 20 May 2015 in reply to Danail Vasilev Link to this post

    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;
                      }
                  }
              }
          }

     

     

     

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 22 May 2015 Link to this post

    Hello,

    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
    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
  6. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 22 May 2015 Link to this post

    I figured it out.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017