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

you can add this to the xml in your code to show a number above every data point

<Series>
  <Series Name=""Default"" IsValueShownAsLabel=""true""></Series>
</Series>

then add a name to your chart series in your chart object

var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
  name:"Default",
  chartType: "column",

the name in your xml series should match the name in chart object

Answer 2

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.

Answer 3

I think you need to interact with the points directly to add a Label value. Hopefully this short example will be of some use. It adds the Chart Area in code rather than the xml theme, but I am sure it could be swapped if necessary.

public ActionResult Chart()
{
    var chart = new System.Web.UI.DataVisualization.Charting.Chart();
    chart.ChartAreas.Add(new ChartArea());

    // Dummy data
    var data = Enumerable.Range(1, 2).Select(i => new { Name = i.ToString(), Count = i }).ToArray();

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Column;

    for (int x = 0; x < data.Length; x++)
    {
        // Add each point and set its Label
        int ptIdx = chart.Series["Data"].Points.AddXY(
             data[x].Name,
             data[x].Count);
        DataPoint pt = chart.Series["Data"].Points[ptIdx];
        pt.Label = "#VALX: #VALY";
        pt.Font = new System.Drawing.Font("Arial", 12f, FontStyle.Bold);
        pt.LabelForeColor = Color.Green;
    }

    using (MemoryStream ms = new MemoryStream())
    {
        chart.SaveImage(ms, ChartImageFormat.Png);
        return File(ms.ToArray(), "image/png");
    }
}

Then in my razor view I simply have:

<img alt="alternateText" src="@Url.Action("Chart")" />

The pt.Label value is a kind of format string and can use "#VALX" or "#VALY" to show only one or the other.