This isn't really a Telerik question but more of a general charting question.
We've got a spot where a person can choose 1 of 4 options. Depending of what they choose from drop down lists, different options are better. My boss has suggested a column chart where it will show the columns with an arbitrary value but you can look at it and see that 'option 2 is best for this set of options but option 3 is best for these options.'
Is using a column chart reasonable or is there some better way to do it.
I have already seen that there is no way to put custom labels on an HtmlChart so I'd have to hide the values (probably between 0 and 1) and put something there instead.
TIA - Jeff (Used Telerik years ago and now at a new job trying to use it again.....)
We've got a spot where a person can choose 1 of 4 options. Depending of what they choose from drop down lists, different options are better. My boss has suggested a column chart where it will show the columns with an arbitrary value but you can look at it and see that 'option 2 is best for this set of options but option 3 is best for these options.'
Is using a column chart reasonable or is there some better way to do it.
I have already seen that there is no way to put custom labels on an HtmlChart so I'd have to hide the values (probably between 0 and 1) and put something there instead.
TIA - Jeff (Used Telerik years ago and now at a new job trying to use it again.....)
3 Answers, 1 is accepted
0
Hi Jeff,
Since Q3 2012, the RadHtmlChart control offers client-side templates for its series labels and tooltips. More information on the matter is available in the ClientTemplate for Series Labels and Tooltips help article. You can also execute JavaScript in the templates (see Using ClientTemplates to Display HTML and Execute JavaScript help article).
The example below, illustrates how to change the series items labels tooltips based on their actual value (e.g., if value is higher than 20 "Option is good" text will be displayed else "Option is bad" text will be displayed):
ASPX:
You can also find the full runnable VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
Since Q3 2012, the RadHtmlChart control offers client-side templates for its series labels and tooltips. More information on the matter is available in the ClientTemplate for Series Labels and Tooltips help article. You can also execute JavaScript in the templates (see Using ClientTemplates to Display HTML and Execute JavaScript help article).
The example below, illustrates how to change the series items labels tooltips based on their actual value (e.g., if value is higher than 20 "Option is good" text will be displayed else "Option is bad" text will be displayed):
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="series 1"> <LabelsAppearance> <ClientTemplate> #if(value > 20) {# Option is good. Value is #=value# #} else {# Option is bad. Value is #=value# #}# </ClientTemplate> </LabelsAppearance> <TooltipsAppearance> <ClientTemplate> #if(value > 20) {# Option is good. Value is #=value# #} else {# Option is bad. Value is #=value# #}# </ClientTemplate> </TooltipsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> <telerik:AxisItem LabelText="item 4" /> </Items> </XAxis> </PlotArea></telerik:RadHtmlChart>You can also find the full runnable VS example in the attached archive.
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 04 Feb 2014, 03:04 PM
Thanks Danail. But I think I would really rather have the labels next the graph and not on the series themselves.
Is it possible to use customer labels on the y-axis ?
Is it possible to use customer labels on the y-axis ?
0
Hi Jeff,
You can use templates for the y-axis through the chartObject. For example:
JavaScript:
ASPX:
I have also added this feature request in our feedback portal here, so that you can track its progress, put you comments below and raise the priority of the item by voting on it.
Another approach could be to hide the y-axis labels, get the series items labels and change their x-position, so that they align over the y-axis. For example:
JavaScript:
ASPX:
Note, however, that this approach will work only if you have investigated the IDs of the text elements, so that you know which elements to move.
You can also manually render the labels values in separate divs and align them over the y-axis.
I have also updated your Telerik points for sharing your ideas with us.
Regards,
Danail Vasilev
Telerik
You can use templates for the y-axis through the chartObject. For example:
JavaScript:
<script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.labels.template = "#if(value > 20) {# Value #=value# is a good option#} else {# value below 20 is a bad option #}#"; chart.repaint(); }</script><telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="series 1"> <LabelsAppearance> <ClientTemplate> #if(value > 20) {# Option is good. Value is #=value# #} else {# #}# </ClientTemplate> </LabelsAppearance> <TooltipsAppearance> <ClientTemplate> #if(value > 20) {# Option is good. Value is #=value# #} else {# #}# </ClientTemplate> </TooltipsAppearance> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis> <LabelsAppearance DataFormatString="dd{0}"> </LabelsAppearance> </YAxis> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> <telerik:AxisItem LabelText="item 4" /> </Items> </XAxis> </PlotArea></telerik:RadHtmlChart>Another approach could be to hide the y-axis labels, get the series items labels and change their x-position, so that they align over the y-axis. For example:
JavaScript:
<script> function pageLoad() { var chart2 = $find("<%=RadHtmlChart2.ClientID%>"); var textElements = $telerik.$('text'); for (var i = 0; i < textElements.length; i++) { var currID = parseInt(textElements[i].attributes["id"].value.substr(4, 6)); if (currID >= 34 && currID <= 40) { textElements[i].attributes["x"].value = 0; } } }</script><telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis> <LabelsAppearance Visible="false"> </LabelsAppearance> </YAxis> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> <telerik:AxisItem LabelText="item 4" /> </Items> </XAxis> </PlotArea></telerik:RadHtmlChart>You can also manually render the labels values in separate divs and align them over the y-axis.
I have also updated your Telerik points for sharing your ideas with us.
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 UI for ASP.NET AJAX, subscribe to the blog feed now.