Avatar of Keith Westberg
Keith Westberg
 asked on

ASP.NET 100% Stacked Bar Chart data format?

Data source currently looks as follows:

name    date      total
A            04/16   18  
B            04/16   242
C            04/16   36
D            04/16   98
A            04/17   5
B            04/17   25
C            04/17   19
etc...

I need to render this data as a 100% stacked bar chart using the charting control from asp.net 4.0.  

Chart should have the date as the axis-X and the axis-Y should be 0 to 100%.  
Example: The first bar (04/16) would have A, B, C and D with the appropriate % of space taken in the bar.

Once I can get this to render, the only issue I can see that would change this data landscape would be if a NAME did not have a value for that date.  But I can cross that bridge when it arrives.

Thank you for your time..
Microsoft SQL Server 2005ASP.NET.NET Programming

Avatar of undefined
Last Comment
Keith Westberg

8/22/2022 - Mon
Robert Schutt

Hi,

I've been playing around with this, sorry for not wanting to post before I had something working.

What I haven't found yet is changing X/Y direction, that is what you wanted, right?

This is what I came up with so far:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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="SqlDataSource1">
            <Series>
                <asp:Series Name="Series1" ChartType="StackedBar100" XValueMember="date" 
                    YValueMembers="Column1">
                </asp:Series>
                <asp:Series Name="Series2" ChartType="StackedBar100" XValueMember="date" 
                    YValueMembers="Column2">
                </asp:Series>
                <asp:Series Name="Series3" ChartType="StackedBar100" XValueMember="date" 
                    YValueMembers="Column3">
                </asp:Series>
                <asp:Series Name="Series4" ChartType="StackedBar100" XValueMember="date" 
                    YValueMembers="Column4">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:eeConnectionString %>" SelectCommand="SELECT [date], 
100.0*(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date] and [name]='A')/(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date]) as Column1, 
100.0*(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date] and [name]='B')/(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date]) as Column2, 
100.0*(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date] and [name]='C')/(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date]) as Column3, 
100.0*(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date] and [name]='D')/(select SUM(total) FROM [ee].[dbo].[tblQ_27729744] t2 WHERE t2.[date]=t.[date]) as Column4
FROM [ee].[dbo].[tblQ_27729744] t
GROUP BY [date]
ORDER BY [date]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Open in new window

Robert Schutt

Here's the output I get with the example data, as you see, missing values are not a problem. Scalability is a bit of a problem, if you need the number of different names to be variable, maybe the series should be added programmatically after doing a SELECT DISTINCT [date]...
chart output
Robert Schutt

Oh, just tried the StackedColumn100 type for the series and that changes the X/Y axis around.
chart output columns(also added: IsValueShownAsLabel="True")
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Keith Westberg

ASKER
Sorry for delay Robert.

I see what you did, and thank you.  My problem is the number of pc's/columns are dynamic.  Could be 8, could be 12+.  I was hoping for a code based solution that would take the dump as provided above and generate the chart as you have rendered it... which is perfect.
ASKER CERTIFIED SOLUTION
Robert Schutt

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Keith Westberg

ASKER
I see where your going with this... Ill try to jump in this weekend and give it a run.  Thank you Robert... ill let you know how it pans out.

cheers
Robert Schutt

Cleaning up my monitored questions list I found this, did you ever get anywhere with this?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Keith Westberg

ASKER
Thank you Robert.. i to lost track.  =/

Worked great... thumbs up x 2