Add Data Labels for charts in a cshtml file

Question

User325035487 posted

I am making a simple intranet application for support requests using razor cstml. Data is stored in an access database.

For report i make use of instructions in http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart to generate charts.

I use this code to generate the chart which is working fine. But I cant figure out how to display the data label for each column. Can some one help me. I am a beginner.

@using System.Data;

@{
            var db = Database.Open("mainreq");
           
        
        var months = Request["month"];
        
        <p>months</p>
        if (User.IsInRole(@"DOMAIN\Request Admin"))
        {
                       <p>Welcome</p>
        }
        else
        {
                       Response.Redirect("default");
        }

         var sql="";

        
        var sql_average = "SELECT * FROM Request_Avg  WHERE MONTH=@0 ORDER BY month";

        var average_data = db.Query(sql_average,months); 
}
 

<div class="charts">

    @{
        string theme ="<Chart>\r\n <ChartAreas>\r\n <ChartArea Name=\"Default\" _Template_=\"All\">\r\n <AxisX Interval=\"1\" />\r\n  </ChartArea>\r\n </ChartAreas>\r\n <Legends>\r\n <Legend _Template_=\"All\" Alignment=\"Center\" BackColor=\"Transparent\" Docking=\"Bottom\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" IsTextAutoFit =\"False\" LegendStyle=\"Row\">\r\n </Legend>\r\n </Legends>\r\n <BorderSkin SkinStyle=\"Emboss\" />\r\n</Chart>";

        var myChart = new Chart(width: 600, height: 400, theme: theme)

        .AddTitle("Average Response Time for Requests")
        .AddLegend()
        
        .AddSeries("Days", chartType: "StackedColumn",
         
            xValue: average_data, xField: "category",
            yValues: average_data, yFields: "Average")
        
        .Write();
    }
</div>
 

If you need I am happy to provide additional information. thanks.

Answer 1

User-1454326058 posted

Hi jkjhse,

Do you want to add the real data of each column?

Base on the Chart class, I did the test, but failed to find the solution.

There is the Chart Class that may benefit you:

# Chart Class

http://msdn.microsoft.com/en-us/library/system.web.helpers.chart(v=vs.111).aspx

Thanks

Best Regards              

Answer 2

User325035487 posted

I want value of each columns as shown in the picture. As i mentioned I am a beginner. So i am not sure how to use the class you mentioned. Thanks for the reply.

Answer 3

User325035487 posted

I am still searching for an answer and found one for MVC3 Razor.. How to adapt this to ASP Web Pages Razor

http://stackoverflow.com/questions/8403866/values-in-a-pie-chart

//I did it by using the System.Web.UI.DataVisualization.Charting.Chart class.

//Here is the code in my Controller:

public ActionResult Chart()
{
    Chart chart = new Chart();
    chart.ChartAreas.Add(new ChartArea());

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Pie;
    chart.Series["Data"]["PieLabelStyle"] = "Outside"; 
    chart.Series["Data"]["PieLineColor"] = "Black";
    chart.Series["Data"].Points.DataBindXY(
        data.Select(data => data.Name.ToString()).ToArray(), 
        data.Select(data => data.Count).ToArray());
    //Other chart formatting and data source omitted.

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

//And the View:

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

Working Solution for the guy who asked

        Chart chart = new Chart();

        chart.ChartAreas.Add(new ChartArea());

        chart.Series.Add(new Series("Data"));
        chart.Legends.Add(new Legend("Stores"));
        chart.Series["Data"].ChartType = SeriesChartType.Pie;
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"]["PieLineColor"] = "Black";
        for (int x = 0; x < viewModel.SalesInStorePerPaymentCollected.XValues.Length; x++)
        {
           int ptIdx = chart.Series["Data"].Points.AddXY(
                viewModel.SalesInStorePerPaymentCollected.XValues[x],
                viewModel.SalesInStorePerPaymentCollected.YValues[x]);
           DataPoint pt = chart.Series["Data"].Points[ptIdx];
           pt.LegendText = "#VALX: #VALY";
           pt.LegendUrl = "/Contact/Details/Hey";
        }

        chart.Series["Data"].Label = "#PERCENT{P0}";
        chart.Series["Data"].Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
        chart.Series["Data"].ChartType = SeriesChartType.Pie;
        chart.Series["Data"]["PieLabelStyle"] = "Outside";
        chart.Series["Data"].Legend = "Stores";
        chart.Legends["Stores"].Docking = Docking.Bottom;

        var returnStream = new MemoryStream();
        chart.ImageType = ChartImageType.Png;
        chart.SaveImage(returnStream);
        returnStream.Position = 0;
        return new FileStreamResult(returnStream, "image/png");

Can anyone please help me adapt it to asp chart helper...

Answer 4

User325035487 posted

Hi.. any one has an idea for this problem? sorry to bump this. I started with web matrix. Dont know C#.