This is a migrated thread and some comments may be shown as answers.

Line Chart y axis labels being cut off and how to format currency and Date

2 Answers 614 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 12 May 2012, 02:31 AM
I've been trying all day without asking, but i give up.  If anybody can help me with this I would appreciate it.

Here is how much chart looks.

My chart

There are the issues I need help with.

    The labels on the left I have figured how to format, however, they are being cut off.  How do I shift the everything right so the labels are there?
    The next issue is how do I actually format the data as currency itself? (300119,302519 I would like to be $300,119,$302,519)
    How do I actually format the date as a real date on the graph?  For example 5082012 should be 5/08/2012.
    Is there a way to hide the series labels? for example the $$$ and Date?



Here is the code i'm using.  I might be weird but I prefer to do everything in behind code, so if there is a solution that way I would love it!  Hopefully this is easy!

private void BindChart2()
    {
        string[] ParamArgs = { "DealershipIdParam|DemoDealership" };
        DataTable ChartTable2 = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Total_Listing_Value", ParamArgs, "CarLot_Dealership_Total_Listing_Value");
        DataTable MinTable = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Min_Listing_Value", ParamArgs, "CarLot_Dealership_Min_Listing_Value");
        DataTable MaxTable = MySQLProcessing.MySQLProcessor.StoreProcedureDTTable("CarLot_Dealership_Max_Listing_Value", ParamArgs, "CarLot_Dealership_Max_Listing_Value");


        RadChart2.DataSource = ChartTable2;
        RadChart2.PlotArea.XAxis.AxisLabel.Visible = true;
        RadChart2.PlotArea.YAxis.AxisLabel.Visible = true;
        RadChart2.PlotArea.XAxis.DataLabelsColumn = "Date";
        RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -45;
        string[] min = MinTable.Rows[0].ItemArray[0].ToString().Split('.');
        string[] max = MaxTable.Rows[0].ItemArray[0].ToString().Split('.');
        RadChart2.PlotArea.YAxis.MinValue = Convert.ToInt32(min[0]);
        RadChart2.PlotArea.YAxis.MaxValue = Convert.ToInt32(max[0]);
        RadChart2.PlotArea.YAxis.Step = 1000;
        RadChart2.PlotArea.YAxis.AutoScale = false;
        RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font("Verdana", 6, System.Drawing.FontStyle.Bold);
        RadChart2.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.Currency;
        //RadChart2.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Pixel(-400);
        //RadChart2.PlotArea.YAxis.AutoScale = true;
        //RadChart2.AutoLayout = true;
        RadChart2.DataBind();




<telerik:RadChart ID="RadChart2" runat="server" ChartImageFormat="Jpeg"
                  Skin="Metal" DefaultType="Line" Width="600px">
                  <Appearance Corners="Round, Round, Round, Round, 10">
                      <FillStyle FillType="Image">
                          <FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip">
                          </FillSettings>
                      </FillStyle>
                      <Border Color="111, 111, 111" />
                  </Appearance>
                  <Legend Visible="False">
                      <Appearance Dimensions-Margins="16%, 3%, 1px, 1px"
                          Position-AlignedPosition="TopRight" Visible="False">
                          <ItemTextAppearance TextProperties-Color="Black">
                          </ItemTextAppearance>
                          <FillStyle MainColor="Transparent">
                          </FillStyle>
                          <Border Color="Transparent" />
                      </Appearance>
                  </Legend>
                  <PlotArea>
                      <DataTable Visible="True">
                      </DataTable>
                      <EmptySeriesMessage Visible="True">
                          <Appearance Visible="True">
                          </Appearance>
                      </EmptySeriesMessage>
                      <XAxis>
                          <Appearance Color="Transparent" MajorTick-Color="174, 174, 174">
                              <MajorGridLines Color="40, 255, 255, 255" PenStyle="Solid" />
                              <TextAppearance TextProperties-Color="51, 51, 51">
                              </TextAppearance>
                          </Appearance>
                          <AxisLabel>
                              <TextBlock Text="Date">
                                  <Appearance TextProperties-Color="51, 51, 51">
                                  </Appearance>
                              </TextBlock>
                          </AxisLabel>
                      </XAxis>
                      <YAxis AutoScale="False" MaxValue="100" MinValue="0" Step="10">
                          <Appearance Color="Transparent" MajorTick-Color="174, 174, 174"
                              MinorTick-Color="174, 174, 174">
                              <MajorGridLines Color="40, 255, 255, 255" />
                              <MinorGridLines Color="40, 255, 255, 255" />
                              <TextAppearance TextProperties-Color="51, 51, 51">
                              </TextAppearance>
                          </Appearance>
                          <AxisLabel>
                              <TextBlock Text="$$$">
                                  <Appearance TextProperties-Color="51, 51, 51">
                                  </Appearance>
                              </TextBlock>
                          </AxisLabel>
                      </YAxis>
                      <Appearance Corners="Round, Round, Round, Round, 4">
                          <FillStyle FillType="Image">
                              <FillSettings BackgroundImage="{plotarea}" ImageAlign="Top"
                                  ImageDrawMode="Flip" ImageFlip="FlipY">
                              </FillSettings>
                          </FillStyle>
                          <Border Color="174, 174, 174" Width="4" />
                      </Appearance>
                  </PlotArea>
                  <ChartTitle>
                      <Appearance Position-AlignedPosition="Top">
                          <FillStyle MainColor="Transparent">
                          </FillStyle>
                      </Appearance>
                      <TextBlock Text="Total Listing Monetary Value">
                          <Appearance TextProperties-Font="Arial, 16pt">
                          </Appearance>
                      </TextBlock>
                  </ChartTitle>
              </telerik:RadChart>

mysql produces

$$$    Date
300119    05082012
302519    05092012
302819    05102012
305219    05112012

i would prefer it to produce
$$$    Date
300119    05/08/2012
302519    05/09/2012
302819    05/10/2012
305219    05/11/2012


Thanks!!!

2 Answers, 1 is accepted

Sort by
0
Joshua
Top achievements
Rank 1
answered on 15 May 2012, 09:49 PM
Anybody?
0
Accepted
Evgenia
Telerik team
answered on 16 May 2012, 05:10 PM
Hi Joshua,

 Onto your questions:

1. You should set the AutoLayout property of the chart to true as it will automatically arrange the chart elements so that all of them are fully readable and visible. More information about it can be found in our help topic.
2. You can set currency format to the series items labels with the use of ChartSeries.DefaultLabelValue property. The possible formats are any custom format strings as mentioned in 3.
3. You can set custom format for Axis Labels of RadChart you should use ValueFormat property as it  automatically formats axis label values as Currency, Scientific, General, Number, Percent, ShortDate, ShortTime, LongDate, LongTime or None. Then you can set Custom Format Strings (http://msdn.microsoft.com/en-us/library/0c899ak8.aspx) to the property CustomFormat. This is demonstrated in our demo with source code provided.
4. You can hide the series names by setting their LegendDisplayMode property to Nothing.

Greetings,
Evgenia
the Telerik team
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Chart (Obsolete)
Asked by
Joshua
Top achievements
Rank 1
Answers by
Joshua
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or