Is using a column chart appropriate ?

4 posts, 0 answers
  1. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jan 2014

    Posted 31 Jan 2014 Link to this post

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

    Posted 03 Feb 2014 Link to this post

    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:
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 in reply to Danail Vasilev Link to this post

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

    Posted 07 Feb 2014 Link to this post

    Hi Jeff,

    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>
    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 {#  #}#
                        </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>
    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:
    <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>
    ASPX:
    <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>
    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
    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.
Back to Top