RadHtmlChart related Queries

11 posts, 0 answers
  1. Govindarajan
    Govindarajan avatar
    2 posts
    Member since:
    Nov 2013

    Posted 26 Nov 2013 Link to this post

       
     Hi,

    I am using RadHTMLChart(Telerik dll version : 2013.2.717.35) in my application.Please provide me the solution for the following queries:

    1.RadHtmlChart has the inbuilt functionality to enable or disable Series in the Legend.How to enable or disable Series in the Legend programatically?Is it possible to control the legend Items programatically for toggling the series?Please refer the screenshot legend click.png

    2.How to display Series Name for Pie Chart.I know that only one series can be plotted in pie chart for now.Is there anyway to display series name in chart area so that the user will identify ,which series have been plotted for pie chart?

    3.I have found that ClientTemplate property should be used to display one or more values in Label/ToolTip of BarSeries in one of the telerik link.Is there anyway to apply custom formats like ##,##.## or $### or MM/dd/YYYY or $##,##,##.#0 to the Label/ToolTip of BarSeries.I have tried with kendo.format method to apply custom formats.It did not work.Please provide me the solution to achieve it.

    4.I am using datetime value(sorted in ascending order) as a input data for XAxis .In bar chart,I am able to see all the input datetime values in XAxis.But in ScatterSeries ,some of the input datetime data gets disppear in the XAxis ,but I can view those disapeared XAxis data in  Label/Tooltip of ScatterSeries.How to display all the input datetime data in XAxis of ScatterSeries chart? Please refer the screenshot barseries_datetime.jpg & scatterseries_datetime.jpg

    Thanks in advance.Please reply me as soon as possible.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 28 Nov 2013 Link to this post

    Hello Govindarajan,

    Please find below my questions to your answers:
    • Toggle visibility of the series - Currently there aren't any properties exposed by the series that control their visibility. Such a feature request, however, has already been logged in our feedback portal here, so that you can monitor, comment and vote on it. For the time being you can use the workaround from the item to set the visibility of the series on the client and use step provided in this help article that illustrates how to execute JavaScript from the server.
    • Series names for PieSeries - Series names for Pie series are called categories. They can be obtained through the "category" property. For example:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <PlotArea>
            <Series>
                <telerik:PieSeries Name="sdf">
                    <LabelsAppearance>
                        <ClientTemplate>
                            series name: #=category#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <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>
    • Format dates in ClientTemplate - Note that quotes in the ClientTemplate must be escaped. For example:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries>
                    <LabelsAppearance>
                        <ClientTemplate>
                            category: #=kendo.format(\'{0:dd-MM-yyyy}\',category)#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis Type="date">
                <Items>
                    <telerik:AxisItem LabelText="2013/10/22" />
                    <telerik:AxisItem LabelText="2013/10/23" />
                    <telerik:AxisItem LabelText="2013/10/24" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    • Labels of Scatter/Scatter line series - generally line, area, column/bar series plot discrete data - series use category XAxis, while scatter and scatterline series plot continuous data - series use numeric XAxis. Therefore it is not possible to control the label on the XAxis for each scatter series item. What you can do, however, is to set particular BaseUnit(i.e. years, months, days, etc) or Step through which the labels will be rendered.

    You may also find useful articles in the ClientTemplate for Series Labels and Tooltips section, Handling Special Symbols article as well as Date Axis 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 14 Jun 2014 in reply to Danail Vasilev Link to this post

    hi
    i am using following code for tooltip in backend
      Top15_HighCost_Patients_Chart.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = "#= dataItem.BeneName#" + ",</br> Total Cost: $" + "#= dataItem.TotalCost#";
    now here total cost is numeric value so how can i formate it in backend?
    thanks
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 18 Jun 2014 Link to this post

    Hello Asutosh,

    You can use the kendo.format()method in order to format values in templates. For example:
    ClientTemplate="#= kendo.format(\'{0:C2}\', dataItem.TotalCost)#"

    You may also find useful the following resources:


    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. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

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

    hi 
    i am also using that but its not working in me
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 23 Jun 2014 Link to this post

    Hello Asutosh,

    If you are not using the latest official version of Telerik UI - 2014.2.618, does upgrading to it fixes the issue? If the above steps, however, do not help it would be better to try to reproduce the issue with the code below and then tell us what changes you have made, so that I can make an investigation locally.

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="TotalCost">
                    <LabelsAppearance>
                        <ClientTemplate>
                            #= kendo.format(\'{0:C2}\', dataItem.TotalCost)#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <TooltipsAppearance Color="White">
                        <ClientTemplate>
                            #= kendo.format(\'{0:C2}\', dataItem.TotalCost)#
                        </ClientTemplate>
                    </TooltipsAppearance>
                </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", typeof(int));
        dt.Columns.Add("TotalCost", typeof(int));
        dt.Rows.Add(1, 2);
        dt.Rows.Add(2, 5);
        dt.Rows.Add(3, 6);
        dt.Rows.Add(4, 4);
        dt.Rows.Add(5, 7);
        return dt;
    }



    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. s
    s avatar
    2 posts
    Member since:
    Aug 2014

    Posted 19 Aug 2014 Link to this post

    Hello Danail,

    I am suppose to draw a RadHtml Mixed Chart type. i am using Area chart and Scatter Line chart. Now the problem is i am not able to draw both series type in Same chart my chart showed either one of the series.
    Also my chart shows x-axis when i use scatter line chart where as in the case of Area chart x-axis is missing.

    Kindly look attached files.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 19 Aug 2014 Link to this post

    Hello,

    The scatter chart has a numerical x-axis while the area chart has a categorical x-axis so both cannot be put in the same RadHtmlChart, as explained here: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/mixedchartseries/defaultcs.aspx.

    The scatter chart shows a x-axis because it is only a set of numbers according to the data, but the area chart requires that the developer provides the categories shown on the x-axis.

    I hope this explains the case.


    Regards,

    Marin Bratanov
    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. Keith Jusas
    Keith Jusas avatar
    8 posts
    Member since:
    May 2009

    Posted 21 Aug 2014 in reply to Marin Bratanov Link to this post

    Hello Danail,

    We also use RadHTMLChart Control with "Scatter Series".  (its an dynamic series bind at runtime)
    Now the thing is we want to show some details on tooltip apart of  data that we have for "X/Y axis". i have read some where that " Each Series-Item does not have its own tooltip and text properties that can be set declaratively, they are taken from its value automatically".

     An option is using ClientTemplates to load a column from the datasource but we can not use ClientTemplates also because we are binding the chart with dynamic "Scatter Series" We are not sure how many series we get on the chart and in the case of "ClientTemplate" we have to define it at design time.

    Can we use "Telerik Tooltip control" with "RadHtmlChart" control so that our each Series-Item have its own tooltip. ?
    Or can we have any click event associate with a point on a scatter series so that we can pop up a window with details(that we want to show)

    Regard's
    Keith.
  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 22 Aug 2014 Link to this post

    Hi Keith,

    I have already answered your support ticket on the matter and I am pasting my answer here for anyone else having the same query:

    You can set the ClientTemplate from the server for each series, because it is a simple property of type string, e.g.:

    Copy Code
    Dim ss As ScatterSeries = New ScatterSeries()
    ss.TooltipsAppearance.ClientTemplate = "#=dataItem.field1# <br /> #=dataItem.field2#"

    This property is also available in the design-time wizard of the chart ( http://www.telerik.com/help/aspnet-ajax/htmlchart-design-time-using-visual-designer.html ) and I am attaching a screenshot of that as well.

     

    On using RadToolTip - such an integration is not possible because the chart renders as a markup image (VML or SVG) and the tooltip control cannot get hold of its elements in order to attach the events it needs to show up or get their position in order to calculate its own.

    You can use the following events:

    I hope this explains the case and help you move forward with your project.

    Regards,


    Regards, Marin Bratanov
    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. prateek
    prateek avatar
    1 posts
    Member since:
    May 2016

    Posted 24 May Link to this post

    hello,
    i am using using rad chart in my application and i have to bind the chart dynamically 
    is there any option to bind the Radchart uisng MVC web API .

    Thanks in advance.Please reply because i didn't find anything  and also i have others queries too  .

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