Search code examples
c#asp.netchartswebformsasp.net-4.5

How to paint a displaced bar in ASP.NET Chart


I am using System.Web.UI.DataVisualization.Charting.Chart and trying to paint displaced bars, but instead of this way: enter image description here this other way: enter image description here

I mean, I would like to paint the bar starting in the point 1 and displaced 55px to the right.

I have achieved this: enter image description here

with the following code:

Chart1.Series.Clear();

    int[,] horas = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };
    Chart1.DataSource = horas;
    var series1 = new Series
    {
        Color = System.Drawing.Color.Green,
        IsVisibleInLegend = false,
        IsXValueIndexed = true,
        ChartType = SeriesChartType.RangeColumn,
    };
    series1["PixelPointWidth"] = "1";

    int[,] horas1 = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };
    var series2 = new Series
    {
        Color = System.Drawing.Color.Green,
        IsVisibleInLegend = false,
        IsXValueIndexed = true,
        ChartType = SeriesChartType.RangeColumn
    };
    series2["PixelPointWidth"] = "110";

    for (int i = 0; i < horas.GetLength(0); i++)
    {
        series1.Points.AddXY(horas[i, 0], horas[i, 1]);
    }
    for (int i = 0; i < horas.GetLength(0); i++)
    {
        series2.Points.AddXY(horas1[i, 0], horas1[i, 1]);
    }

    int b = 0;
    foreach (var label in Chart1.ChartAreas[0].AxisX.CustomLabels)
    {
        label.Text = b.ToString();
        b++;
    }

    Chart1.Series.Add(series1);
    Chart1.Series.Add(series2);

    Chart1.ChartAreas[0].AxisY.Interval = 0;
    Chart1.ChartAreas[0].AxisX.Interval = 1;
    Chart1.ChartAreas[0].AxisY.Maximum = 1;
    Chart1.ChartAreas[0].AxisY.Minimum = 0;

    Chart1.ChartAreas[0].AxisX.MajorGrid.LineWidth = 0;
    Chart1.ChartAreas[0].AxisY.MajorGrid.LineWidth = 0;
    Chart1.DataBind();

But this is not an optimal solution as I must paint at least 1 pixel in the side I don't want.

I would appreciate any solution or suggestion on how to achieve my goal. Thx in advance.

Edit. This is working in a Windows Server 2012 under IIS 6.0 developed with VS 2015 Professional in the NET 4.5 Framework

Edit: I mean 55 px to the right, but the best solution would be to the next point in the X axis

Edit: this is the content of web.config.

    <configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
  </appSettings>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ChartImageHandler" />
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
        path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>
  <system.web>
    <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        validate="false" />
    </httpHandlers>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
    </pages>
    <compilation debug="true" targetFramework="4.5">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5"/>
  </system.web>
</configuration>


Solution

  • Rather than trying to paint displaced chart bars, you should simply shift the axis labels by using CustomLabels.

    enter image description here

    ASPX:

    <!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="Chart1" runat="server" Height="600px" Width="800px" >
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                            <AxisY>
                                <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                            </AxisY>
                            <AxisX>
                                <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                            </AxisX>
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
        </form>
    </body>
    </html>
    

    CS:

    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int[,] horas = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };
    
            var series1 = new Series
            {
                Color = Color.Green,
                IsVisibleInLegend = false,
                IsXValueIndexed = true,
                ChartType = SeriesChartType.RangeColumn,
                CustomProperties = "PointWidth=0.8"
            };
    
            for (int i = 0; i < horas.GetLength(0); i++)
            {
                series1.Points.AddXY(horas[i, 0], horas[i, 1]);
            }
    
            Chart1.Series.Add(series1);
    
            Chart1.ChartAreas[0].AxisX.Interval = 1;
    
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 0, ToPosition = 1, Text = "0", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 1, ToPosition = 2, Text = "1", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 2, ToPosition = 3, Text = "2", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 3, ToPosition = 4, Text = "3", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 4, ToPosition = 5, Text = "4", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 5, ToPosition = 6, Text = "5", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 6, ToPosition = 7, Text = "6", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 7, ToPosition = 8, Text = "7", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 8, ToPosition = 9, Text = "8", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 9, ToPosition = 10, Text = "9", GridTicks = GridTickTypes.All });
            Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 10, ToPosition = 11, Text = "10", GridTicks = GridTickTypes.All });
        }
    }