how to show bar chart with Target ?

[Liven]

Dear All,

i need to show a bar graph.

First x-axis - Month like January, February etc. .

Second X axis- every month i need to show two countries  like USA, UK

Y Axis- Total Amount. 

Per country, month expense is Y1 and forecast amount is Y2.

if i can combine Bar chart with bullet charge will achieve my goal. or if Bar chart can show "Target" also will be ok. appreciate your help.

i attached a demo graph for your reference. 

 

[Marin Bratanov]

Hi Liven,

A bullet chart can show goals out of the box: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/bulletchart/defaultcs.aspx.

Alternatively, you can add a second series with the difference until the goal and stack it with the actual data: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/stackedgroups/defaultcs.aspx. You can even add a field for the color to indicate larger differences, for example: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx.

On secondary x-axis - RadHtmlChart offers only one axis, and so this requirement is not directly possible with it. Perhaps the easiest solution is to keep the months on the x-axis and put labels on the series (you can place them at the bottom of the series). Below is a basic example that uses column series so they can have labels for the countries (bullet charts don't have labels):

Another approach would be to align several charts next to each other and use the x-axis title for the months, and the x-axis items for the countries. Then you would have to hide most of the y-axes labels and ensure their min and max values are synced between all charts.

<telerik:RadHtmlChart runat="server" ID="rhc1">
    <PlotArea>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="Jan" />
                <telerik:AxisItem LabelText="Feb" />
            </Items>
        </XAxis>
        <Series>
            <telerik:ColumnSeries Name="USA" Stacked="true" GroupName="USA">
                <LabelsAppearance Position="InsideBase">
                    <ClientTemplate>USA</ClientTemplate>
                </LabelsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries VisibleInLegend="false" Stacked="true" GroupName="USA">
                <LabelsAppearance Visible="false"></LabelsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="3" />
                    <telerik:CategorySeriesItem Y="0" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="UK" Stacked="true" GroupName="UK">
                <LabelsAppearance Position="InsideBase">
                    <ClientTemplate>UK</ClientTemplate>
                </LabelsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries VisibleInLegend="false" Stacked="true" GroupName="UK">
                <LabelsAppearance Visible="false"></LabelsAppearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="3" />
                    <telerik:CategorySeriesItem Y="0" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

 

Regards,
Marin Bratanov
Progress Telerik