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

RadHtmml Chart Tootip Issue when Mixed Numbers were there

11 Answers 58 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Chary
Top achievements
Rank 1
Chary asked on 14 May 2014, 08:49 AM
Hi ,
I have binded a RadHtmlchart where my Datatable contains mixed numbers like few may be numbers and few are decimals so, when I see the tootltip I see in number format though conditionally I am assigning the tootltip as {0:N} for decimal and {0:N0} for number so,please let me know how solve this as when decimal data is there in tooltip expected is a decimal ex:22.44 and for number ex:22 is expected.

Thanks,
Chary.

11 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 15 May 2014, 09:47 AM
Hello Chary,

You can use templates. For example:

<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1">
                <LabelsAppearance>
                    <ClientTemplate>
                        #if(value % 2 == 0) {# #=kendo.format(\'{0:N0}\', value)# #} else {# #=kendo.format(\'{0:N2}\', value)# #} #
                    </ClientTemplate>
                </LabelsAppearance>
                <TooltipsAppearance>
                    <ClientTemplate>
                        #if(value % 2 == 0) {# #=kendo.format(\'{0:N0}\', value)# #} else {# #=kendo.format(\'{0:N2}\', value)# #} #
                    </ClientTemplate>
                </TooltipsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15000.1234" />
                    <telerik:CategorySeriesItem Y="23000" />
                    <telerik:CategorySeriesItem Y="10000.23254" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
            </Items>
        </XAxis>
    </PlotArea>
    <ChartTitle Text="Product sales for 2011">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>

You may also find useful the following resources on the matter:


Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chary
Top achievements
Rank 1
answered on 19 May 2014, 06:44 AM
Hi Danail Vasilev ,

Is this possible to assign Dynamically through code,if so can you please send me a sample of that.

Thanks,
Chary.
0
Danail Vasilev
Telerik team
answered on 20 May 2014, 11:50 AM
Hello Chary,

You must escape the quotes with two backslashes - the first backslash escapes the second one for the server, so that the remaining one can escape the quote on the client. For example:

(ColumnChart1.PlotArea.Series[0] as ColumnSeries).TooltipsAppearance.ClientTemplate = "#if(value % 2 == 0) {# #=kendo.format(\\'{0:N0}\\', value)# #} else {# #=kendo.format(\\'{0:N2}\\', value)# #} #";

More information on the matter is available in the Handling Special Symbols help article.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chary
Top achievements
Rank 1
answered on 20 May 2014, 02:12 PM
Hi Danail Vasilev ,

Thanks for the sample code but here is it possible to conditionally check whether a value contains '.(dot)' or not , as in the sample it is checking for even/odd number conditionally and based on that it is taking the tooltip but is it possible to check if this value contains '.(dot)' take this tooltip else another,please let us know how to achieve this.

Thanks,
Chary.
0
Danail Vasilev
Telerik team
answered on 23 May 2014, 07:27 AM
Hi Chary,

The % operator returns the modulus (i.e., division reminder), so that the flag "value % 2 == 0" returns:
  - True only when there is not division reminder (i.e., there is not a dot).
  - False only when there is a division reminder (i.e., there is a dot).

Note also that you can execute JavaScript in templates, so that as long as you can execute particular operations with JavaScript you should be able to do so in the template as well. More information on the matter is available in the Using ClientTemplates to Display HTML and Execute JavaScript help article.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chary
Top achievements
Rank 1
answered on 26 May 2014, 12:58 PM
Hi Danail Vasilev ,
Thanks for the post even I understand the above sample checks whether a number is even/odd and not decimal but here my requirement is to check whether a number is decimal/not , so is there a possibility in checking this condition is so please provide a sample for this.

Thanks,
Chary.
0
Danail Vasilev
Telerik team
answered on 28 May 2014, 11:49 AM
Hello Chary,

Please excuse me for misleading you. The correct condition should be "value % 1 == 0" and not "value % 2 == 0". For example:
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1" DataFieldY="SellQuantity">
                <LabelsAppearance>
                    <ClientTemplate>
                #if(value % 1 == 0) {# #=kendo.format(\'{0:N0}\', value)# #} else {# #=kendo.format(\'{0:N2}\', value)# #} #
                    </ClientTemplate>
                </LabelsAppearance>
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="SellCategory">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
    (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).TooltipsAppearance.ClientTemplate = "#if(value % 1 == 0) {# #=kendo.format(\\'{0:N0}\\', value)# #} else {# #=kendo.format(\\'{0:N2}\\', value)# #} #";
}
 
protected DataTable GetData()
{
    DataTable dt = new DataTable();
 
    dt.Columns.Add("ID", typeof(int));
    dt.Columns.Add("SellQuantity", typeof(decimal));
    dt.Columns.Add("SellCategory", typeof(string));
 
    dt.Rows.Add(1, 122.3465, "Item 1");
    dt.Rows.Add(2, 135, "Item 2");
    dt.Rows.Add(3, 135.000, "Item 3");
 
    return dt;
}

More information on the matter is available in this forum thread.
Note, however, that this approach will omit the case when there are only zeros after the dot. If you try to use the "value.string.indexOf(\'.\')==-1" condition you will get the same result because the zeros are not considered by the chart in this case.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chary
Top achievements
Rank 1
answered on 28 May 2014, 01:22 PM
Hi Danail,
The sample code works fine but I am afraid that I am unable to append a string before the Value/tooltip , is there a possibility of appending string before the value ex: Customers : 200 So,I would like to append Customers to the tooltip here so,If it is possible to do this please send us a sample.

Thanks,
Chary.
0
Danail Vasilev
Telerik team
answered on 28 May 2014, 03:07 PM
Hello Chary,

You must insert the text before the evaluation clause:
ASPX:
     <ClientTemplate>
Customer: #if(value % 1 == 0) {# #=kendo.format(\'{0:N0}\', value)# #} else {# #=kendo.format(\'{0:N2}\', value)# #} #
     </ClientTemplate>



Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chary
Top achievements
Rank 1
answered on 29 May 2014, 08:46 AM
Hi Danial,
When I append a static text in code behind file its accepting with out any error but when I append a string variable where the text changes dynamically this is not accepting and throwing me error when I hover on the series item,
EX: 
string columnName;
 cs.TooltipsAppearance.ClientTemplate = columnName + "#if(value % 1 == 0) {# #=kendo.format(\\'{0:N0}\\', value)# #} else {# #=kendo.format(\\'{0:N2}\\', value)# #} #";

Please let me know how can we do this.

Thanks,
Chary.

0
Danail Vasilev
Telerik team
answered on 29 May 2014, 10:49 AM
Hello Chary,

I have tried to reproduce the issue but to no avail. Could you please try to reproduce the problem with the attached VS example and then tell us what changes you have made, so that I can make an investigation locally?

You can also investigate the value of the columnName variable, in case there is some invalid data that is breaking the tooltip

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart (HTML5)
Asked by
Chary
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Chary
Top achievements
Rank 1
Share this question
or