HtmlChart Client Templates for Tooltips

10 posts, 0 answers
  1. Sigifredo
    Sigifredo avatar
    9 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2012 Link to this post

    Hi,

    I am trying to use the sample code of the HtmlChart \ Client Templates demo (url below) because I want to populate some data description on the tool tip. However I am getting the following error message when I run the project:

    Microsoft JScript runtime error: Expected '}'

    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultvb.aspx 

    You may be able to reproduce the error using the demo sample code exactly as is.

    I am using Windows 7, Visual Studio 2010, Telerik RadControls for ASP.NET AJAX Q3 2012  (lastest version), VB.NET


    Thanks,

    Sigi Perez
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 22 Oct 2012 Link to this post

    Hello Sigi,

     I have just tested both the demo and the code (you can see my test in the attached file, both a video and the test page itself). It all seems to be working fine with me. Am I missing something? Does this error manifest with you on the demo itself? What are the steps needed so that I see it as well? If you can reproduce it with my page could you modify it accordingly and post the changes here?


    Regards,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sigifredo
    Sigifredo avatar
    9 posts
    Member since:
    Oct 2011

    Posted 22 Oct 2012 Link to this post

    Hi Marin,

    Thanks for your response. You are correct, the sample code from the demo works just fine. I actually was able to make it run last night. I don't know what was causing the issue last week but I think there was something hanging from the previous version of the Telerik Rad controls in the vb project. See, I upgraded the Rad controls on my machine from Q3 2011? to the new version Q3 2012 and auto updated the project references. However, even thought the project references were updated that sample code wouldn't run. I had to recreate the entire project from scratch and after that it worked fine.

    There is however, one other issue I ran into last night and don't know if I should use this thread or start a new and call this SOLVED.
     
    The issue has to do when I tried to display a string on the HtmlChart  TooltipsAppearance ClientTemplate and the string has the character " (double quotes) in it. It seems like the " create a problem and the HtmlChart doesn't display anything. I can't figure how to get around that issue. Unfortunately, renaming\replacing the " in the descriptions is not an option for us.


    Try using the following ItemDescription and you'll be able to replicate the issue probably... (30" WREATH PROT W/CTR STOR 6PK)

    Below is the code I am using...

       <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Height="600px" DataSourceID="SqlDataSource1"
                OnClientSeriesClicked="OnClientSeriesClicked">
                <ChartTitle Text="Quantity On Hand">
                </ChartTitle>
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="QuantityOnHand">
                            <LabelsAppearance DataFormatString="{0:###,##0}">
                            </LabelsAppearance>
                            <TooltipsAppearance ClientTemplate="#=dataItem.ItemDescription#"/>
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="ItemNumber">
                        <MinorGridLines Color="#eeeeee" Width="1" />
                    </XAxis>
                    <YAxis>
                        <LabelsAppearance DataFormatString="{0:###,##0}" />
                        <MinorGridLines Color="#eeeeee" Width="1" />
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Position="Bottom" />
                </Legend>
            </telerik:RadHtmlChart>


    Thanks, 

    Sigi Perez
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 23 Oct 2012 Link to this post

    Hello Sigi,

    It is possible that the references were not properly updated, or the project was not rebuild with the new dlls; the end result is that the functionality would not have been available and thus an error would have been thrown.

    It would usually be better to start a new thread for a new issue, as this makes each thread more concise, so when someone else searches for a solution of a problem only relevant and coherent threads will be found.

    Now, regarding the quotes - the main feature of RadHtmlChart is its client-side rendering. This means that all properties, strings and data must go from markup, to code-behind, to JavaScript. This will inevitably require escaping of special symbols for the specific language. What would need to be done in this case is adding three backslashes for C# - one will escape the quote for C#, the second will escape the first for C# and the third will escape the quote for JavaScript. For example, this datasource will work fine:
    protected DataTable GetData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("QuantityOnHand"));
        tbl.Columns.Add(new DataColumn("ItemNumber"));
        tbl.Columns.Add(new DataColumn("ThirdColumn"));
        tbl.Columns.Add(new DataColumn("ItemDescription"));
        tbl.Rows.Add(new object[] { 1, "first", "firstRecord3", "30\\\" WREATH PROT W/CTR STOR 6PK" });
        tbl.Rows.Add(new object[] { 2, "second", "secondRecord3", "secondRecord4" });
        tbl.Rows.Add(new object[] { 3, "third", "thirdRecord3", "thirdRecord4" });
        tbl.Rows.Add(new object[] {4, "fourth", "fourthRecord3", "fourthRecord4" });
        return tbl;
    }

    For the tooltips there is another option as well - they are HTML elements (and not SVG like the rest of the chart) so they can take entities as well:
    tbl.Rows.Add(new object[] { 1, "first", "firstRecord3", "30&quot; WREATH PROT W/CTR STOR 6PK" });


    Regards,
    Marin Bratanov
    the Telerik team
    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 their blog feed now.
  6. Pirooz
    Pirooz avatar
    6 posts
    Member since:
    Nov 2007

    Posted 11 Feb 2013 Link to this post

    Hey Marin,

    Can you please post sample code of how to set the ClientTemplate correctly using C#? We are trying to create charts dynamically using the code behind. If there is any alternative to customize the tooltip or labels appearance in the code behind that would be good too.

    Thanks.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Feb 2013 Link to this post

    Hi,

    You can use the following C# code to set ClientTemplates for ToolTips and Labels of the chart:

    RadHtmlChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = "#=dataItem.ItemDescription#";
    (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).LabelsAppearance.ClientTemplate = "#=dataItem.ItemDescription#";

    where ItemDescription is the ToolTips/Labels column from your datasource. Make sure that the Series which will be set with the LabelsAppearance ClientTemplate is initially cast to the corresponding Series type.

    We are currently working on allowing RadHtmlChart to use Kendo number and date formats and therefore in order to set a certain format one should follow the examples that KendoUI offers here. For instance:

    RadHtmlChart1.PlotArea.Series[0].TooltipsAppearance.ClientTemplate = "#=kendo.format(\\\'{0:C}\\\', dataItem.QuantityOnHand)#";

    You can also find helpful a short list of standard/custom number and date formats here.

    Kind regards,
    Danail Vasilev
    the Telerik team
    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 their blog feed now.
  8. Limo Kipchumba
    Limo Kipchumba avatar
    3 posts
    Member since:
    Apr 2012

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

    Hello Danail,

    Have been trying to set the ClientTemplate using C# and am getting the attached result, what am I doing wrong?

    Thanks in advance.
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Jun 2014 Link to this post

    Hello Limo,

    If you want to use#= dataItem.Period# and #=dataItem.TotalSales# fields in the template then you must do the following steps:
        - Data bind the chart to a data source that has these fields.
        - Configure series and x-axis to the get the corresponding data source values through the DataFieldY and DataLabelsField properties.

    If you want, however, to keep up with the current programmatic creation approach then you can use #=category# and  #=value# fields in the template in order to get the corresponding x-axis category and y-axis value. More information is available in this 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.

     
  10. Limo Kipchumba
    Limo Kipchumba avatar
    3 posts
    Member since:
    Apr 2012

    Posted 09 Jul 2014 in reply to Danail Vasilev Link to this post

    Hello Danail,

    I have attached an image to expound on the challenge that am facing, have done databind to RadHtmlChart but it does not show the legend , have tried all possible cause but no luck, any idea?

    The other issue is, when i use RadAjaxManager i can comfortable drilldown on barchart , linechart , areachart and columnchart, but i can't find a way out on PieSeries and DonutSeries, and i really need to use the two.

    Am using this javascript function for the barchart and the rest
    <script type="text/javascript">

    function OnClientSeriesClicked(sender, args) {
    if (args.get_seriesName() != "Month") {
    window.$find("<%= RadAjaxManagerMonthlySales.ClientID %>").ajaxRequest(sender.get_id() + "|" + args.get_category());
    }
    }
    </script>

    Thanks in advance, I appreciate your previous assistance.

    Regards

    Limo Shadrack


  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 10 Jul 2014 Link to this post

    Hi Limo,

    When you data bind the chart it does not know what names to apply for each sector, unless you specify the NameField field. You can see this here: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/clientsidedatabinding/defaultcs.aspx. On a side note - pie an donut series do not have axes, so you can remove their configuration from the markup.

    To get the data item associated with the clicked series item I advise that you use the seriesClick Kendo event: http://docs.telerik.com/kendo-ui/api/dataviz/chart#events-seriesClick. Here is an example:

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded"
                                   NameField="Country">
                    <LabelsAppearance DataFormatString="{0:N0} bbl">
                    </LabelsAppearance>
                    <TooltipsAppearance Color="White" />
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script type="text/javascript">
        function drillDown(args) {
            alert(args.category);
        }
        function preventChartLegendClicks() {
            var chart = $find("<%=RadHtmlChart1.ClientID %>")._chartObject;
            chart.bind("seriesClick", drillDown);
            //chart.bind("legendItemHover", stopEvent);
            Sys.Application.remove_load(preventChartLegendClicks);
        }
        Sys.Application.add_load(preventChartLegendClicks);
    </script>
    protected void Page_Load(object sender, System.EventArgs e)
    {
        RadHtmlChart1.DataSource = GetPieData();
        RadHtmlChart1.DataBind();
    }
     
    protected DataTable GetPieData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("Barrels"));
        tbl.Columns.Add(new DataColumn("Country"));
        tbl.Columns.Add(new DataColumn("Color"));
        tbl.Columns.Add(new DataColumn("IsExploded"));
     
        tbl.Rows.Add(new object[] { 80309, "Canada", "Black", true });
        tbl.Rows.Add(new object[] { 46428, "Saudi Arabia", "Gray", false });
        tbl.Rows.Add(new object[] { 40573, "Mexico", "DarkGray", false });
        tbl.Rows.Add(new object[] { 40154, "Venezuela", "DarkRed", false });
     
        return tbl;
    }

    You can find more details about the event arguments in the article I linked so you can modify this sample to fit your needs.

    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.

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