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

[Jegan]

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 .

[Marin Bratanov]

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

[Jegan]

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?

• I have read that adding more than one will result in overlapping charts and extended legend in the url http://www.telerik.com/help/aspnet-ajax/htmlchart-types-pie-chart.html.We have the requirement of adding more than one series for Pie & donut Charts.Is it possible to avoid overlapping ?

• We have found that render the chart data as table is possible with radhtmlchart in the url  http://blogs.telerik.com/aspnet-ajax/posts/13-08-01/radhtmlchart-vs-radchart-round2-choose-asp-net-chart Can u provide me the sample code to achieve it?

[Danail Vasilev]

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

[Jegan]

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.

[Danail Vasilev]

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:

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

[Jegan]

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 

[Danail Vasilev]

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

[Jegan]

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.



 

[Danail Vasilev]

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