locked
Add Data Labels for charts in a cshtml file RRS feed

  • 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.

    Wednesday, May 28, 2014 9:56 AM

All replies

  • 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              

    Thursday, May 29, 2014 4:06 AM
  • User325035487 posted

    Chart with data label values

    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.

    Thursday, May 29, 2014 5:33 AM
  • 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...

    Friday, May 30, 2014 10:59 AM
  • User325035487 posted

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

    Monday, June 16, 2014 2:00 PM