Search code examples
chartsstacked-area-chartdundas

Trying to create a dynamic Dundas Stackedarea chart


Good afternoon. I try to research and have yet to find anyone that has an example of this, I normally do not ask for help, I just figure it out, but this one is killing me! I am trying to create a stacked area chart dynamically, I already can create a dynamic area chart, but cannot for the life of me figure out how to get a stacked area chart to stack the series. I have made something similar in excel and I can get it to chart fine, but it is not dynamic. I have data that is laid out like this: How the data is laid out

And this is how I want the chart to look: How I want the chart to look

How can I associate the data to categories or whatever it is I need to do? I have the data in an array but I can just not seem to figure out how to get the chart to stack. Can anyone help? If you need some more info please ask, I know I am not including my code, mainly because it is very ugly and drawn out, but can try to compress it a bit and simplify if anyone needs that.

My code is below (maybe that will help, even if it is ugly)

For tmpatozgroup = 1 To 1
            Dim chart1 As New Chart()
            chart1.ID = "chrt-" & tmpatozgroup & "-" & atozser
            Dim seriesperrow As Integer

            Dim chartArea1 As New ChartArea()
            chart1.Height = 340
            chart1.Palette = ChartColorPalette.Dundas
            chart1.BackColor = System.Drawing.Color.LightGray
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss
            chart1.BorderLineColor = System.Drawing.Color.Gray
            chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderLineWidth = 4
            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.LightGray
            chartArea1.AxisX.LabelsAutoFit = False
            chartArea1.AxisX.LabelStyle.FontAngle = -45
            chartArea1.Area3DStyle.Enable3D = True
            chart1.ChartAreas.Add(chartArea1)
            Dim series1 As New Series()

            series1.Name = tblGrouping1(tmpatozgroup, 0)
            chart1.Series.Add(series1)
            chart1.Legends.Clear()
            If Not IsNothing(tblGrouping1(tmpatozgroup, 0)) Then
                For tmpatozgroup2 = 1 To 9

                    Dim legend1 As New Legend()
                    Dim sername As String
                    Dim servalues() As Double
                    Dim serformat As String
                    Dim chrtSeriesCnt As Integer

                            sername = tblGrouping1(0, tmpatozgroup2)
                            'need to tear the current row out of the array and place in tmpseries
                            Dim tmpatozcnt As Integer
                            For tmpatozcnt = 1 To 999
                                If IsNothing(tblGrouping1(0, tmpatozcnt)) Then atozseries = tmpatozcnt : Exit For
                                tmpSeries(tmpatozcnt) = tblGrouping1(tmpatozgroup2, tmpatozcnt)
                                chrtSeriesLabels(tmpatozcnt) = tblGrouping1(0, tmpatozcnt)
                            Next
                            servalues = tmpSeries
                            serformat = chrtSeriesForm1


                    chart1.Width = 1000
                    seriesperrow = 1

                    'chart1.AlignDataPointsByAxisLabel()

                    series1.Type = SeriesChartType.StackedColumn
                    series1("StackedGroupName") = "'" & tblGrouping1(tmpatozgroup, 0) & "'"
                    If Not IsNothing(tblGrouping1(tmpatozgroup, 0)) Then

                        For Each ser As Series In chart1.Series

                            For i2 As Integer = 1 To atozseries - 1

                                ser.Points.AddXY(chrtSeriesLabels(i2), servalues(i2 - 1))
                                ser.Points(i2 - 1).BorderColor = Drawing.Color.FromArgb(Split(sercolor(i2), "|")(0), Split(sercolor(i2), "|")(1), Split(sercolor(i2), "|")(2))
                                ser.Points(i2 - 1).Color = Drawing.Color.FromArgb(Split(sercolor(i2), "|")(0), Split(sercolor(i2), "|")(1), Split(sercolor(i2), "|")(2))
                                'ser.XAxisType = AxisType.Secondary

                                Dim tooltipformat As String
                                If serformat = "Currency" Then serformat = "$#,##0.00" : tooltipformat = "{$#,#.00}"
                                If serformat = "###,###,##0.00" Then serformat = "#,##0.00" : tooltipformat = "{#,#}"
                                If serformat = "###,###,##0" Then serformat = "0" : tooltipformat = "{#,#}"
                                ser.Points(i2 - 1).ToolTip = ser.Points(i2 - 1).AxisLabel & " : #VALY" & tooltipformat

                            Next
                            chart1.ChartAreas(0).AxisX.Interval = 1
                            chart1.ChartAreas(0).AxisX.LabelStyle.Interval = 1
                            chart1.ChartAreas(0).AxisX.Title = "test" 'chrtXAxisName
                            chart1.ChartAreas(0).AxisY.Title = sername
                            chart1.ChartAreas(0).AxisY.LabelStyle.Format = serformat
                            chart1.Palette = ChartColorPalette.Dundas
                        Next

                    End If
                Next
                If seriesonrow = seriesperrow Or seriesonrow = 0 Then
                    tr = New TableRow
                    tr.CssClass = "charts column"
                    tr.Style("display") = "none"

                End If
                td = New TableCell
                td.HorizontalAlign = HorizontalAlign.Center
                td.ColumnSpan = 6 / seriesperrow
                td.Controls.Add(chart1)
                tr.Cells.Add(td)
                tblReport.Rows.Add(tr)
                chart1 = Nothing
            End If
        Next

Thanks a bunch in advance! Later


Solution

  • Here's a sample:

        <asp:Chart ID="Chart1" runat="server" Width="600px">
            <Series>
                <asp:Series Name="Series1" ChartType="StackedArea">
                    <Points>
                        <asp:DataPoint XValue="1" YValues="10" />
                        <asp:DataPoint XValue="2" YValues="20" />
                        <asp:DataPoint XValue="3" YValues="30" />
                        <asp:DataPoint XValue="4" YValues="15" />
                    </Points>
                </asp:Series>
                <asp:Series ChartArea="ChartArea1" ChartType="StackedArea" Name="Series2">
                    <Points>
                        <asp:DataPoint XValue="1" YValues="20" />
                        <asp:DataPoint XValue="2" YValues="40" />
                        <asp:DataPoint XValue="3" YValues="60" />
                        <asp:DataPoint XValue="4" YValues="45" />
                    </Points>
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisY>
                        <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                    </AxisY>
                    <AxisX>
                        <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    

    enter image description here

    EDIT: Using code-behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            Chart chart1 = new Chart();
    
            ChartArea area1 = new ChartArea("Area1");
    
            Series series1 = new Series();
            series1.ChartType = SeriesChartType.StackedArea;
            series1.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 10 } });
            series1.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 20 } });
            series1.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 30 } });
            series1.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 15 } });
            series1.ChartArea = "Area1";
    
            Series series2 = new Series();
            series2.ChartType = SeriesChartType.StackedArea;
            series2.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 20 } });
            series2.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 40 } });
            series2.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 60 } });
            series2.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 45 } });
            series2.ChartArea = "Area1";
    
            chart1.ChartAreas.Add(area1);
            chart1.Series.Add(series1);
            chart1.Series.Add(series2);
    
            Controls.Add(chart1);
        }
    

    EDIT 2: adding a legend:

        protected void Page_Load(object sender, EventArgs e)
        {
            Chart chart1 = new Chart();
    
            ChartArea area1 = new ChartArea("Area1");
    
            Legend legend1 = new Legend("Legend1");
            legend1.Docking = Docking.Top;
            legend1.Alignment = System.Drawing.StringAlignment.Center;
    
            Series series1 = new Series("Bought");
            series1.ChartType = SeriesChartType.StackedArea;
            series1.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 10 } });
            series1.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 20 } });
            series1.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 30 } });
            series1.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 15 } });
            series1.ChartArea = "Area1";
            series1.Legend = "Legend1";
    
            Series series2 = new Series("Sold");
            series2.ChartType = SeriesChartType.StackedArea;
            series2.Points.Add(new DataPoint { XValue = 1, YValues = new double[] { 20 } });
            series2.Points.Add(new DataPoint { XValue = 2, YValues = new double[] { 40 } });
            series2.Points.Add(new DataPoint { XValue = 3, YValues = new double[] { 60 } });
            series2.Points.Add(new DataPoint { XValue = 4, YValues = new double[] { 45 } });
            series2.ChartArea = "Area1";
            series2.Legend = "Legend1";
    
            chart1.ChartAreas.Add(area1);
            chart1.Legends.Add(legend1);
            chart1.Series.Add(series1);
            chart1.Series.Add(series2);
    
            Controls.Add(chart1);
        }