ASP.NET MVC Chart: how to show values on each column

Question

I'm trying to use the Chart functionnality provided by the .NET framework, but I need a result that I can't do actually.

My code:

string themeChart = @"<Chart>
                      <ChartAreas>
                        <ChartArea Name=""Default"" _Template_=""All"">
                          <AxisY>
                            <LabelStyle Font=""Verdana, 12px"" />
                          </AxisY>
                          <AxisX LineColor=""64, 64, 64, 64"" Interval=""1"">
                            <LabelStyle Font=""Verdana, 12px"" />
                          </AxisX>
                        </ChartArea>
                      </ChartAreas>
                    </Chart>";


 var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
      chartType: "column",
      xValue: arrayXVal,
      yValues: arrayYVal)
           .AddTitle("ChartTitle")
           .GetBytes("png");

 return File(dataChart, "image/png");

My chart is like this picture.

I need to do a chart like this:

The values can be above the columns or "in" like in the second image.

Thanks a lot!

EDIT: I found this page : W3School page. You can see that there is an image who illustrate what I need. But the code is not provided...

EDIT 2: I also found this page: Displaying Data in a Chart with ASP.NET Web Pages (Razor) but the code is not provided.

Answer: Due to your answers, I tried to use DataVisualization.Charting and, with nearly no changes from my previous code, it gave me an acceptable result.

You can find my full code here: Bitmap image = new Bitmap(1000, 300); Graphics g = Graphics.FromImage(image); var chart1 = new System.Web.UI.DataVisualization.Charting.Chart(); chart1.Width = 1000; chart1.Height = 300; chart1.ChartAreas.Add("xAxis").BackColor = System.Drawing.Color.White; chart1.Titles.Add("Chart title"); chart1.Series.Add("xAxis");

        for (int i = 0; i < 24; i++)
        {
            chart1.Series["xAxis"].Points.AddXY(i + " h", arrayValues[i]);
        }

        chart1.Series["xAxis"].IsValueShownAsLabel = true;
        chart1.Series["xAxis"].LabelForeColor = Color.Black;
        chart1.ChartAreas[0].AxisX.Interval = 1;
        chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray;
        chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;
        chart1.BackColor = Color.White;

        MemoryStream imageStream = new MemoryStream();
        chart1.SaveImage(imageStream, ChartImageFormat.Png);
        chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.High;
        Response.ContentType = "image/png";
        imageStream.WriteTo(Response.OutputStream);
        g.Dispose();
        image.Dispose();
        return null;

Thanks a lot Balthy for your answer.

I'll give the bounty to Balthy, because it's the first and complete answer.

I'll mark Adithya Kumaranchath's answer as "main answer" because he describes with more details the steps to follow.

Answer 1

I understand the part that you do not want to touch the server side code but the options seem to be limited. I am not sure if you can do that but if you can change the server side, you sure can make these changes.

I have done this for you:

1. Add System.Web.DataVisualization; to your MVC website.
2. Add "using System.Web.UI.DataVisualization.Charting;" to your controller.

3. Include the below code in your controller:

            public ActionResult CreateChart()
            {   
            Bitmap image = new Bitmap(500, 50);
            Graphics g = Graphics.FromImage(image);
            var chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
            chart1.Width = 1000;
            chart1.Height = 300;
            chart1.ChartAreas.Add("xAxis").BackColor = System.Drawing.Color.FromArgb     (64,System.Drawing.Color.White);
            chart1.Series.Add("xAxis");
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(6);
            chart1.Series["xAxis"].Points.AddY(5);    
            chart1.Series["xAxis"].IsValueShownAsLabel = true;
            chart1.BackColor = Color.Transparent;
            MemoryStream imageStream = new MemoryStream();
            chart1.SaveImage(imageStream, ChartImageFormat.Png);
            chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.SystemDefault;
            Response.ContentType = "image/png";
            imageStream.WriteTo(Response.OutputStream);
            g.Dispose();
            image.Dispose();
            return null;
       }
   

4. Include the below piece of code in your view where you want to see the chart.

5. Now run the code and you will be able to see this.

   

Customize the params as needed. Hope this helps.