Showing value (in thousands)

4 posts, 0 answers
  1. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 22 Jun 2015 Link to this post

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

    Posted 23 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 23 Jun 2015 in reply to Danail Vasilev Link to this post

    I get a runtime error with that code:

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

  5. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 24 Jun 2015 in reply to Danail Vasilev Link to this post

    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>

Back to Top