locked
Add space at bottom of graph control RRS feed

  • Question

  • User224181609 posted

    I have a graph where the x axis is Date, and have angled the date labels to keep them from running together.  However this results in the dates being a little too long vertically to fit in the space below the graph (see image below).

    So the question:  How can I increase space below the graph so that the dates will fit?

    Sunday, June 24, 2018 1:37 PM

Answers

  • User283571144 posted

    Hi ClarkNK,

    According to your description, I suggest you could try to set the LabelStyle.Interval to 1.

    Then the chart will work well.

    More details, you could refer to below codes:

    ASPX:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChartTest.aspx.vb" Inherits="VBWebform.ChartTest" %>
    
    <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource2" BackColor="#FEDABA" Width="500px" Height="500px" BorderlineWidth="0">
                      <Series>
                         <asp:Series Name="Series1" ChartType="Line" XValueMember="LogDate" YValueMembers="Value" IsValueShownAsLabel="True" Legend="Legend1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                            <AxisX IsLabelAutoFit="false"   >
                                <MajorGrid Enabled="False" />
                                <LabelStyle  Angle="-75"   />
                                
                            </AxisX>
                        </asp:ChartArea>
                    </ChartAreas>
                    <Legends>
                        <asp:Legend Alignment="Center" DockedToChartArea="ChartArea1" Docking="Top" IsDockedInsideChartArea="False" Name="Legend1" Title="My Legend">
                        </asp:Legend>
                    </Legends>
                </asp:Chart>
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-VbIdentity-20180507035628ConnectionString %>" SelectCommand="SELECT * FROM [ChartData]"></asp:SqlDataSource>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    Imports System.Drawing
    Imports System.Web.UI.DataVisualization.Charting
    
    Public Class ChartTest
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Chart2.ChartAreas(0).AxisX.LabelStyle.Interval = 1
    
        End Sub
    
        Protected Sub Chart2_PrePaint(sender As Object, e As DataVisualization.Charting.ChartPaintEventArgs) Handles Chart2.PrePaint
            ' Clear the existing labels (during PrePaint, axis labels will show up in the CustomLabels collection)
            Chart2.ChartAreas(0).AxisX.CustomLabels.Clear()
            ' For each data point, we want to add a strip line and a label
            Dim newline As StripLine
            Dim MyLabel As CustomLabel
            ' W is the width of graph in days, and N is the width setting for custom lables
            Dim N As Double
            Dim W As Double = (Chart2.ChartAreas(0).AxisX.Maximum - Chart2.ChartAreas(0).AxisX.Minimum())
            ' Create striplines at the X datapoints
            For Each DataPoint As [DataPoint] In Chart2.Series(0).Points
                newline = New StripLine
                newline.BorderColor = Drawing.Color.Black
                newline.IntervalOffset = DataPoint.XValue
                Chart2.ChartAreas(0).AxisX.StripLines.Add(newline)
                N = W / 8
                MyLabel = New CustomLabel(DataPoint.XValue - N, DataPoint.XValue + N, DateTime.FromOADate(DataPoint.XValue).ToShortDateString(), 0, LabelMarkStyle.None)
                Chart2.ChartAreas(0).AxisX.CustomLabels.Add(MyLabel)
            Next
    
        End Sub
    
    End Class

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 27, 2018 9:37 AM

All replies

  • User283571144 posted

    Hi ClarkNK,

    According to your description, I couldn't directly tell you how to add space at buttom of the graph control.

    Could you please tell me which control you have used for creating the chart? Asp.net webchart control or something else?

    Could you please post some related codes about how you created the chart?

    If you could post more details information, it will be more easily for us to find the solution.

    Besides, I suggest you could try to improve the width of the chart, then I think the date will show well.

    Best Regards,

    Brando

    Monday, June 25, 2018 6:18 AM
  • User224181609 posted

    Sorry, I just assumed everyone would know I was referring to the asp.net control.  I am using that control, with a little extra code that creates vertical lines at the x data points instead of a regular grid of vertical lines.

    And I am guessing that when I highlight the graph (using VS2013 for Web, free version), that somewhere in the many possibilities shown in the Properties pane there is probably a setting to do what I need.

    The data points are being drawn from a database. Here is the source code for the control:

    <asp:Chart ID="Chart2" runat="server" DataSourceID="SDSChart" BackColor="#FEDABA" Width="500px" Height="500px" BorderlineWidth="0">
    <series>

    <%-- <asp:Series Name="Series1" ChartType="Line" XValueMember="Date" YValueMembers="Value" IsValueShownAsLabel="True" Legend="Legend1">
    </asp:Series>--%>

    <asp:Series Name="Series1" ChartType="Line" XValueMember="Date" YValueMembers="Value" IsValueShownAsLabel="True" Legend="Legend1" >
    </asp:Series>

    </series>
    <chartareas>
    <asp:ChartArea Name="ChartArea1">
    <AxisX IsLabelAutoFit="False">
    <MajorGrid Enabled="False" />
    <LabelStyle Angle="-75" />
    </AxisX>
    </asp:ChartArea>
    </chartareas>
    <Legends>
    <asp:Legend Alignment="Center" DockedToChartArea="ChartArea1" Docking="Top" IsDockedInsideChartArea="False" Name="Legend1" Title="My Legend">
    </asp:Legend>
    </Legends>
    </asp:Chart>

    Here is the VB code-behind being used to created the vertical striplines at the datapoints:

    Protected Sub Chart2_PrePaint(sender As Object, e As DataVisualization.Charting.ChartPaintEventArgs) Handles Chart2.PrePaint
    ' Clear the existing labels (during PrePaint, axis labels will show up in the CustomLabels collection)
    Chart2.ChartAreas(0).AxisX.CustomLabels.Clear()
    ' For each data point, we want to add a strip line and a label
    Dim newline As StripLine
    Dim MyLabel As CustomLabel
    ' W is the width of graph in days, and N is the width setting for custom lables
    Dim N As Double
    Dim W As Double = (Chart2.ChartAreas(0).AxisX.Maximum - Chart2.ChartAreas(0).AxisX.Minimum())
    ' Create striplines at the X datapoints
    For Each DataPoint As [DataPoint] In Chart2.Series(0).Points
    newline = New StripLine
    newline.BorderColor = Drawing.Color.Black
    newline.IntervalOffset = DataPoint.XValue
    Chart2.ChartAreas(0).AxisX.StripLines.Add(newline)

    N = W / 7
    MyLabel = New CustomLabel(DataPoint.XValue - N, DataPoint.XValue + N, DateTime.FromOADate(DataPoint.XValue).ToShortDateString(), 0, LabelMarkStyle.None)

    Chart2.ChartAreas(0).AxisX.CustomLabels.Add(MyLabel)
    Next
    End Sub

    Monday, June 25, 2018 11:56 AM
  • User224181609 posted

    Well I have made some progress, but am still stuck.  I did manage to increase the space below the graph by working with the properties pane of the graph control.  Going into the "Chart / Chart Area / Collection / Inner plot position" setting I discovered that adjusting the "height" setting expands the top and bottom, so by doing that and also adjusting the Height property of the Chart itself I was able to get more space at the bottom of the chart.

    But you can see from the image (below) that neither the x axis title or the date labels moved down to make use of any of that extra space.  I even tried removing the x-axis "TestGraph" title  entirely, but the individual dates along the x axis still do not expand into the available space.  So I still have not figured out how to make the dates take up more vertical space :=(

    Tuesday, June 26, 2018 1:55 AM
  • User283571144 posted

    Hi ClarkNK,

    According to your description, I suggest you could try to set the LabelStyle.Interval to 1.

    Then the chart will work well.

    More details, you could refer to below codes:

    ASPX:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChartTest.aspx.vb" Inherits="VBWebform.ChartTest" %>
    
    <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource2" BackColor="#FEDABA" Width="500px" Height="500px" BorderlineWidth="0">
                      <Series>
                         <asp:Series Name="Series1" ChartType="Line" XValueMember="LogDate" YValueMembers="Value" IsValueShownAsLabel="True" Legend="Legend1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                            <AxisX IsLabelAutoFit="false"   >
                                <MajorGrid Enabled="False" />
                                <LabelStyle  Angle="-75"   />
                                
                            </AxisX>
                        </asp:ChartArea>
                    </ChartAreas>
                    <Legends>
                        <asp:Legend Alignment="Center" DockedToChartArea="ChartArea1" Docking="Top" IsDockedInsideChartArea="False" Name="Legend1" Title="My Legend">
                        </asp:Legend>
                    </Legends>
                </asp:Chart>
                <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-VbIdentity-20180507035628ConnectionString %>" SelectCommand="SELECT * FROM [ChartData]"></asp:SqlDataSource>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
            </div>
        </form>
    </body>
    </html>
    

    Code-behind:

    Imports System.Drawing
    Imports System.Web.UI.DataVisualization.Charting
    
    Public Class ChartTest
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Chart2.ChartAreas(0).AxisX.LabelStyle.Interval = 1
    
        End Sub
    
        Protected Sub Chart2_PrePaint(sender As Object, e As DataVisualization.Charting.ChartPaintEventArgs) Handles Chart2.PrePaint
            ' Clear the existing labels (during PrePaint, axis labels will show up in the CustomLabels collection)
            Chart2.ChartAreas(0).AxisX.CustomLabels.Clear()
            ' For each data point, we want to add a strip line and a label
            Dim newline As StripLine
            Dim MyLabel As CustomLabel
            ' W is the width of graph in days, and N is the width setting for custom lables
            Dim N As Double
            Dim W As Double = (Chart2.ChartAreas(0).AxisX.Maximum - Chart2.ChartAreas(0).AxisX.Minimum())
            ' Create striplines at the X datapoints
            For Each DataPoint As [DataPoint] In Chart2.Series(0).Points
                newline = New StripLine
                newline.BorderColor = Drawing.Color.Black
                newline.IntervalOffset = DataPoint.XValue
                Chart2.ChartAreas(0).AxisX.StripLines.Add(newline)
                N = W / 8
                MyLabel = New CustomLabel(DataPoint.XValue - N, DataPoint.XValue + N, DateTime.FromOADate(DataPoint.XValue).ToShortDateString(), 0, LabelMarkStyle.None)
                Chart2.ChartAreas(0).AxisX.CustomLabels.Add(MyLabel)
            Next
    
        End Sub
    
    End Class

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 27, 2018 9:37 AM
  • User224181609 posted

    Thank you Brando, that did the trick!

    Wednesday, June 27, 2018 12:16 PM