Bubble and donut chart not supporting While binding with x-axis string value in RadHtmlchart

10 posts, 0 answers
  1. Jegan
    Jegan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 24 Oct 2013 Link to this post

    Hi , 
         Bubble and donut charts are  not supporting, While binding with string value in x-axis , it shows error . please tell me the solution to bind the  string value to the  x-axis with the radhtmlchart .

    thanks .
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 28 Oct 2013 Link to this post

    Hello Jegan,

    This thread that I just answered has the same question: http://www.telerik.com/community/forums/aspnet-ajax/htmlchart/bubble-and-donut-chart-not-supporting-while-binding-with-x-axis-string-value-in-radhtmlchart.aspx. I suggest that you examine it and, if you have further questions, post there.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jegan
    Jegan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 29 Oct 2013 Link to this post

    Thanks for your reply . I have some other doubts about radhtmlchart please reply me 

    •  you have mentioned that Bubble chart will support only if the xaxis values are numeric ,Is it possible to display string/datetime data in XAxis Items for scatterSeries?



  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 31 Oct 2013 Link to this post

    Hi Jegan,

    Please find below my answers to your questions:
    • DateAxis - you can use Date Axis for category series (Area, Line, Bar, etc.) as well as for numeric ones (Scatter, ScatterLine, Bubble). Such an examples are illustrated in HtmlChart - Date Axis online demo as well as in Date Axis help article.
    • Pie/Donut series labels - Note that Pie and Donut charts accepts only a single series. I guess you mean scenario in which multiple Pie/Donut charts are present on the pages - a dashboard. If that is the case, labels overlapping may occurs when the text is longer. Currently the labels of Pie charts are rendered outside the pie while Donut labels are rendered inside it. In Q1 2014, two new features will be present in the chart that will fix these issues - a margin property for the PlotArea and a property that controls the position of the labels - inside/outside the Pie/Donut. 
    • DataTable below the chart - you can simply use any grid control (e.g. RadGrid) and bind it to the same datasource of the chart:

    ASPX:

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
        <PlotArea>
            <Series>
                <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
                </telerik:ScatterLineSeries>
            </Series>
            <XAxis BaseUnit="days">
            </XAxis>
        </PlotArea>
        <ChartTitle Text="Sold Cars per Date">
        </ChartTitle>
    </telerik:RadHtmlChart>
    <telerik:RadGrid ID="RadGrid1" runat="server" Width="640px" ></telerik:RadGrid>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
     
        RadGrid1.DataSource = GetData();
        RadGrid1.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID");
        dt.Columns.Add("SellQuantity");
        dt.Columns.Add("SellDate");
     
        dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
        dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));
     
        return dt;
    }



    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Jegan
    Jegan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 22 Nov 2013 Link to this post

    Hi,

    Thanks for your reply.I have tried out the provided sample.I am able to display the numeric or date time data in X Axis for Bar Chart in the Unordered sequence.Please refer the attached screen shot.

    1. How to display numeric or date time data in X Axis for Bubble & Scatter Marker Chart in the Unordered sequence(as specified in the attached screenshot)?If it is possible,please provide me the sample code.
    2. How to display accurate input datetime value in XAxis for Bubble & scatter marker chart.For Example: if i have passed 11/25/2013 11:47:56 PM as one of the input for XAxis ,11/25/2013 12:00:00 AM gets displayed in XAxis for Bubble & Scatter marker chart type.How to maintain the same datetime data in XAxis for Bubble & Scatter marker chart type?
    3.   How to apply specific format like (MM/dd/YYYY or $##,##,##0) for the datetime or numeric data displaying on the Legend for Pie & Donut Chart?


    Thanks in advance.

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 27 Nov 2013 Link to this post

    Hi Jegan,

    Please find below my answers to your questions:
    1. Unordered data - Bubble, Scatter and ScatterLine series use numeric XAxis which means that they display continuous data while area, bar, column and line series use category XAxis which means that they display discrete data. Therefore I am afraid the desired functionality is not achievable.
    2. Custom formats - You can use custom format strings, in order to achieve the desired format. For example:
    3. ASPX:

      <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
          <PlotArea>
              <Series>
                  <telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
                      <LabelsAppearance Visible="false"></LabelsAppearance>
                  </telerik:ScatterLineSeries>
              </Series>
              <XAxis BaseUnit="minutes">
                  <LabelsAppearance Step="2" DataFormatString="MM/dd/yyyy HH:00:00"></LabelsAppearance>
              </XAxis>
          </PlotArea>
          <ChartTitle Text="Sold Cars per Date">
          </ChartTitle>
      </telerik:RadHtmlChart>
      C#:
      protected void Page_Load(object sender, EventArgs e)
      {
          RadHtmlChart1.DataSource = GetData();
          RadHtmlChart1.DataBind();
       
          RadHtmlChart2.DataSource = GetData();
          RadHtmlChart2.DataBind();
      }
       
      protected DataTable GetData()
      {
          DataTable dt = new DataTable();
       
          dt.Columns.Add("ID");
          dt.Columns.Add("SellQuantity");
          dt.Columns.Add("SellDate");
       
          dt.Rows.Add(1, 2, new DateTime(2011, 06, 12, 13, 22, 44 ));
          dt.Rows.Add(1, 5, new DateTime(2011, 06, 12, 14, 33, 12));
          dt.Rows.Add(2, 6, new DateTime(2011, 06, 12, 15, 21, 45));
       
          return dt;
      }
      You may also find useful  Formatting Dates help article.
    4. Format legend - I am sorry to say that in the current version of RadControls ClientTemplates are not available for the legend, so that you cannot use formats in the legend. Nevertheless such a feature request has already been logged in our feedback portal here, so that you can monitor, comment or vote on it. For the time being you can use the workaround provided there.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Jegan
    Jegan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 06 Dec 2013 Link to this post

    Hi,
        We binding with formatted numeric data to the chart  using dataitem in the Page load script method (other formats i.e dollar format was applying correctly) While bind with numeric data having the comma(",") formatted was not applied correctly in the legend for Exploded pies and donut charts . 

     function pageLoad() {
                var chart = $find("<%=htmlChart.ClientID%>");
                if (document.getElementById('<%=dropChartType.ClientID%>').value == "ExplodedPies" || document.getElementById('<%=dropChartType.ClientID%>').value == "ExplodedDonuts") 
                {
                            chart._chartObject.options.legend.labels.template = "#=dataItem.XValue#";
                            chart.repaint();
                }
           }

    > In that X value column  contains formatted numeric data (Ex : 6,000) but we have only 6000 in the legend display  for exploded pie and donut charts 
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 10 Dec 2013 Link to this post

    Hello Jegan,

    It seems that you are trying to localize the RadHtmlChart. If that is so I can suggest that you follow the steps provided in the Localization help article.

    Note that if you want the localization to take effect an appropriate format string must be set for the corresponding chart elements (i.e. labels/legend items). For example:
    ASPX:
    <script src="../cultures/kendo.culture.en-EN.min.js"></script>
    <script type="text/javascript">
        kendo.culture("en-EN");
    </script>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="XValue" NameField="XValue">
                    <LabelsAppearance DataFormatString="N2">
                    </LabelsAppearance>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    JavaScript:
    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.legend.labels.template = "#=kendo.format(\'{0:N2}\',dataItem.XValue)#";
            chart.repaint();
        }
    </script>

    You may also find useful Formatting Numbers help article.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. Jegan
    Jegan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 01 Feb 2014 in reply to Danail Vasilev Link to this post

    Hi , 
           Its working fine , While  binding with formatted numeric data to the chart  (contains comma(",")) using dataitem in the Page load script method .

    function pageLoad() {
                var chart =$find("<%=htmlChart.ClientID%>");
                if(document.getElementById('<%=dropChartType.ClientID%>').value =="ExplodedPies" ||document.getElementById('<%=dropChartType.ClientID%>').value =="ExplodedDonuts") 
                {
     chart._chartObject.options.legend.labels.template = "#=kendo.format(\'{0:N2}\',dataItem.XValue)#";
      chart.repaint();
                }
           }

    But while bind with numeric data without  comma(",")  Example data contains years (2013 , 2014 ) ,For that also it ll apply the  comma format  . we need both scenarios to be worked , Please tell me solution asap .

    thanks,
    Jegan.



     
  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 04 Feb 2014 Link to this post

    Hi Jegan,

    You can execute JavaScript in ClientTemplates, so that if the value is:
    • integer plot it as it is.
    • float, apply the desired format.

    For example:
    JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.legend.labels.template = "#if (dataItem.XValue % 1 === 0) {# #=value# #} else {# #=kendo.format(\'{0:N2}\',dataItem.XValue)# #}#  ";
            chart.repaint();
        }
    </script>
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="XValue" NameField="XValue">
                    <LabelsAppearance DataFormatString="N2">
                    </LabelsAppearance>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID");
        dt.Columns.Add("XValue");
     
        dt.Rows.Add(1, 122.322);
        dt.Rows.Add(1, 533.123);
        dt.Rows.Add(2, 2014);
        dt.Rows.Add(2, 2012);
     
        return dt;
    }

    You may also find useful Using ClientTemplates to Display HTML and Execute JavaScript help article.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017