Stacked column chart in asp.net c# MVC razor view

Question

I am trying to create a stacked column chart in asp.net c#. I am using razor view. I have searched a lot to find a solution but all I get is a snippet of code. Since I am new to asp.net I have no idea in creating charts. I fetch chart values from the database. Any working examples to create stacked column chart in razor view will be very helpful to me. I don't want any paid chart libraries. I got a code to create barchart but i don't how to make it as a stacked chart. Also I am not sure about the chart values

var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
        name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();

Thanks in advance

Answer 1

High Charts for .NET has been my goto solution for charting like this, you can reference their library and natively generate the chart image based on your data.
They also have a JS library to dynamically generate the charts in your views if you'd prefer that route.

Answer 2

As you are using MVC and razor I supose your project is a web app.

In this case I highly recommend you to use HTML5 canvas for graphics. It's learning curve is a bit high, but is very powerful.

If you want to skip the math and programming difficulties you also could use one of the many existing graph libraries. Including one I wrote:

https://github.com/Bardobrave/Graph.js

Here some examples with bar graphics:

var barData = [[10, -20, 125, 230, -25, 245, 260, 20, 125, 125, 305, 110], [150, -50, 175, 280, -75, 295, 210, -70, 185, -20, 355, 160]];
var container = document.getElementById("graphContainer");
var myGraph = new BarGraph(container);
myGraph.draw({
    data: barData,
    colors: ["#0F0", "blue"],
    labelsX: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DIC"],
fontSize: "9px"
});

http://jsfiddle.net/bardobrave/exqLtyme/