Showing value (in thousands)

[Johnathan]

Is there any way to set the DataFormatString for the YAxis.LabelsAppearance property so that it will show a value as 1/1000th or 1/millionth of the actual figure in the data source?  Kind of like the equivalent of string.Format("0,") which does the same thing?

[Danail Vasilev]

Hi Johnathan,

You should use templates, for example:

JavaScript:

<script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.valueAxis.labels.template = "#= FormatLongNumber(value) #";
                chart.repaint();
            };


            function FormatLongNumber(value) {

                if (value === 0) {
                    return 0;
                }

                // hundreds
                if (value <= 999) {
                    return value;
                }

                // thousands
                if (value >= 1000 && value <= 999999) {
                    return (value / 1000) + 'K';
                }

                // millions
                if (value >= 1000000 && value <= 999999999) {
                    return (value / 1000000) + 'M';
                }

                // billions
                if (value >= 1000000000 && value <= 999999999999) {
                    return (value / 1000000000) + 'B';
                }

                return value;
            }
        </script>

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="500" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product 1">
                        <LabelsAppearance>
                            <ClientTemplate>
                                 #if(value != undefined){# #=FormatLongNumber(value)# #}#
                            </ClientTemplate>
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="45000000" />
                            <telerik:CategorySeriesItem Y="53000000" />
                            <telerik:CategorySeriesItem Y="60000000" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Product 1">
                        <LabelsAppearance>
                            <ClientTemplate>
                               #if(value != undefined){# #=FormatLongNumber(value)# #}#
                            </ClientTemplate>
                        </LabelsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15000000" />
                            <telerik:CategorySeriesItem Y="23000000" />
                            <telerik:CategorySeriesItem Y="10000000" />
                            <telerik:CategorySeriesItem Y="120000" />
                            <telerik:CategorySeriesItem Y="345000" />
                            <telerik:CategorySeriesItem Y="12000" />
                            <telerik:CategorySeriesItem Y="2000" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1" />
                        <telerik:AxisItem LabelText="2" />
                        <telerik:AxisItem LabelText="3" />
                        <telerik:AxisItem LabelText="4" />
                        <telerik:AxisItem LabelText="5" />
                        <telerik:AxisItem LabelText="6" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Product sales for 2011">
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom" />
            </Legend>
        </telerik:RadHtmlChart>

Regards,
Danail Vasilev
Telerik

[Johnathan]

I get a runtime error with that code:

 Type 'Telerik.Web.UI.HtmlChart.PlotArea.AxisLabelsAppearance' does not have a public property named 'ClientTemplate'

[Johnathan]

I figured out why your code works and mine didn't.  You're changing the label on top of each bar of the bar chart.  I am trying to change the label on the Y-Axis.  The labels on top of the bars are hidden in my code, and I don't mind seeing the full value on the tooltip.

<telerik:RadHtmlChart ID="barChart" Transitions="true" Skin="Windows7" CssClass="chartTest" Width="100%" runat="server">
    <ClientEvents OnLoad="OnLoad"></ClientEvents>
    <ChartTitle>
        <Appearance>
            <TextStyle Bold="true" FontSize="12" />
        </Appearance>
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom"></Appearance>
    </Legend>
    <PlotArea>
        <XAxis Name="TransactionDate" DataLabelsField="trans_date">

            <LabelsAppearance RotationAngle="300" Step="1" Visible="true">
                <TextStyle Bold="true" FontSize="9" />
            </LabelsAppearance>
            <TitleAppearance Visible="false"></TitleAppearance>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </XAxis>
        <YAxis Name="Impact" MajorTickType="None" MinValue ="0">
            <TitleAppearance>
                <TextStyle Bold="true" FontSize="10" />
            </TitleAppearance>
            <MajorGridLines Visible="true" />
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
</telerik:RadHtmlChart>