Trying to create a dynamic Dundas Stackedarea chart

Question

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

Sorry, it is in aspx, VB.net currently, dundas.charting.webcontrol is the namespace, I am guessing webforms. — Larry Myers hometownnerd, Oct 20 '15 at 18:18
I was going to suggest `System.Web.UI.DataVisualization.Charting` which has a `StackedArea` chart type, but sounds like you're already using something else. — jsanalytics, Oct 20 '15 at 20:01
Also please add proper tags to your question so you get proper help. I don't touch anything with "VB" written on it...:O) — jsanalytics, Oct 20 '15 at 20:07
Would you happen to have an example of a stackedarea for that namespace? I am not dead set on dundas and can easily switch. As far as tagging it, with C# and VB being so close and with there being so many converters I do not mind having examples in C# if they are available, most of the time the good examples for everything is in C#, even MS likes to give the examples in C#, so I am used to converting anyway. I appreciate any help you can provide! — Larry Myers hometownnerd, Oct 22 '15 at 13:26

jsanalytics · Accepted Answer · 2015-10-22T16:00:59.020

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>

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);
    }

Thanks a bunch for that. Would you happen to have a dynamically made example? I see how it works here but if I wanted to make it dynamically in code and then add it to the page, do you have any code for that? I have added the namespace but I can not figure out how to make a chart with it yet. — Larry Myers hometownnerd, Oct 22 '15 at 14:12
I don't have one right now but it pretty much looks like what you already did in your post. — jsanalytics, Oct 22 '15 at 14:25
AWESOME THANKS SO MUCH!!! This has been killing me! Will try this, maybe I am just being stupid in how I am trying to do this, it makes sense in my head but not when it comes out. — Larry Myers hometownnerd, Oct 22 '15 at 14:51
Ok, I understand what you have. But I have a question, if lets say that 1,2,3,4 are the xaxis labels but the actual series1 is called "bought" and series2 is called "sold" how could that be shown, that is where my issue is actually occurring. I have found some issues in my code that I have fixed, but I cannot figure out how to get that part to work. — Larry Myers hometownnerd, Oct 22 '15 at 15:51
Ok, Thanks again, I think I get it, I was over thinking it I believe. Now to figure out how to make it work in my code. — Larry Myers hometownnerd, Oct 22 '15 at 16:35

Trying to create a dynamic Dundas Stackedarea chart

1 Answers1