RadHtmml Chart Tootip Issue when Mixed Numbers were there

12 posts, 0 answers
  1. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

    Posted 14 May 2014 Link to this post

    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.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 15 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

    Posted 19 May 2014 in reply to Danail Vasilev Link to this post

    Hi Danail Vasilev ,

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

    Thanks,
    Chary.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 20 May 2014 Link to this post

    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.

     
  6. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

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

    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.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 23 May 2014 Link to this post

    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.

     
  8. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

    Posted 26 May 2014 in reply to Danail Vasilev Link to this post

    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.
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 28 May 2014 Link to this post

    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.

     
  10. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

    Posted 28 May 2014 in reply to Danail Vasilev Link to this post

    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.
  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 28 May 2014 Link to this post

    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.

     
  12. Chary
    Chary avatar
    13 posts
    Member since:
    Apr 2014

    Posted 29 May 2014 in reply to Danail Vasilev Link to this post

    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.

  13. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 29 May 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017