da_jokker da_jokker - 1 month ago 18
ASP.NET (C#) Question

Web.Helpers.Chart and Multiple Series?

I am using the "system.web.helpers.chart" and it is working (happen to be doing it in MVC but that shouldn't matter). But for the life of me, I can't seem to display the data like I want. All the examples seem to show what I'm looking for, but none of the code seems to back it up.

Take a simple data grid:

Fruit ........ Color ........ Quantity

Apples ....... Red .............. 5

Apples ....... Green ........... 3

Apples ....... Yellow ........... 2

Grapes ....... White ........... 20

Grapes ...... Red .............. 10

So all I'm looking for is like one of those "Column" charts, that should have the Fruit at the bottom. My Apples should have 3 columns grouped together (one for each color), and my Grapes should have 2 columns grouped together.

It's basically should look like ... with the exception that the fruit names be on the bottom, and the color be in the grid (or a legend)

enter image description here

Oh.. almost forgot.. basically here is my code...

SQL = "Select Fruit, Color, Quantity From Inventory"

Chart...

.AddSeries(
chartType: "Column",
xValue: myDataTable.Rows,
xField: "Fruit",
yValues: myData.Rows,
yFields: "Quantity"
);


UPDATE ....

Based on the answer, (I'm not totally there yet) but this has got me really close using a Data Table....

myDataTable.DefaultView.RowFilter = "FooColor = 'Black'";
myChart.AddSeries(
chartArea: "Default",
chartType: "Column",
name: "Black",
xValue: myDataTable.DefaultView.ToTable().Rows, xField: "FooName",
yValues: myDataTable.DefaultView.ToTable().Rows, yFields: "FooPrice"
);

myDataTable.DefaultView.RowFilter = "FooColor = 'Blue'";
myChart.AddSeries(
chartArea: "Default",
chartType: "Column",
name: "Blue",
xValue: myDataTable.DefaultView.ToTable().Rows, xField: "FooName",
yValues: myDataTable.DefaultView.ToTable().Rows, yFields: "FooPrice"
);

Answer

Try this:

            var chart1 = new Chart(width: 600, height: 400, themePath: "Theme.xml")
               .AddSeries(
                   chartArea: "Default",
                   chartType: "Column",
                   name: "Red",
                   xValue: new[] { "Apples", "Grapes" },
                   yValues: new[] { 5, 10 })
               .AddSeries(
                   chartArea: "Default",
                   chartType: "Column",
                   name: "White",
                   xValue: new[] { "Apples", "Grapes" },
                   yValues: new[] { 0, 20 })
               .AddSeries(
                   chartArea: "Default",
                   chartType: "Column",
                   name: "Green",
                   xValue: new[] { "Apples", "Grapes" },
                   yValues: new[] { 3, 0 })
               .AddSeries(
                   chartArea: "Default",
                   chartType: "Column",
                   name: "Yellow",
                   xValue: new[] { "Apples", "Grapes" },
                   yValues: new[] { 2, 0 });

enter image description here