HtmlChart Client Templates for Tooltips

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

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

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:

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:


Regards,
Marin Bratanov
the Telerik team

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.

Hi,

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


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:

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

Kind regards,
Danail Vasilev
the Telerik team

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.

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

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

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:

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