Chapter 12: WebPages Chart
The Chart Helper is one of the most “wow” features of classic ASP.NET Web Pages. With just a few lines of code, you can generate professional-looking bar charts, line graphs, pie charts, area charts, and more — directly as an image — and embed them in your .cshtml page.
No JavaScript libraries, no external services, no complicated setup — just pure server-side chart rendering.
Why Was Chart Helper So Loved? (Teacher Story Time)
In 2010–2015 era:
- Most people were still using plain HTML + maybe Flash or early jQuery plugins for charts
- Setting up Google Charts / Highcharts / Chart.js required client-side code, JSON data, AJAX calls
- ASP.NET Web Pages said: “Why not just do it on the server with one object?”
→ You write C# code → Chart Helper creates a PNG image → browser shows it like any <img>
Perfect for reports, dashboards, sales summaries, student grades — especially when you already have data from Database or file.
1. Core Idea – How Chart Helper Works
You create a Chart object → add title, series (data sets), legend, themes → call .Write() or .GetUrl() to output it.
Basic flow:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("My First Chart") .AddSeries( name: "Sales", chartType: "Column", xValue: new[] { "Jan", "Feb", "Mar" }, yValues: new[] { 12000, 15000, 18000 } ) .Write(); // ← renders the chart image right here } |
That’s it — one object, chainable methods, done.
2. Full Practical Example – Monthly Sales Chart (from Database)
Let’s make it real. Assume we have the SmallBakery database from earlier lessons, but we’ll add a simple Sales table or just use hard-coded data for clarity.
File: SalesChart.cshtml
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
@{ Layout = "~/Shared/_Layout.cshtml"; // Sample data - in real life this comes from db.Query() var months = new[] { "January", "February", "March", "April", "May", "June" }; var sales2025 = new[] { 12000, 14500, 18000, 21000, 19000, 22000 }; var sales2026 = new[] { 15000, 17000, 19500, 23000, 20500, 25000 }; // Create the chart var chart = new Chart(width: 800, height: 500, theme: ChartTheme.Green) .AddTitle("Monthly Sales Comparison - Hyderabad Branch") .AddSeries( name: "2025", chartType: "Line", xValue: months, yValues: sales2025, legend: "2025 Sales" ) .AddSeries( name: "2026", chartType: "Line", xValue: months, yValues: sales2026, legend: "2026 Sales" ) .AddLegend("Yearly Comparison", "right") // position of legend .AddXAxis("Months", title: "Month of Year") .AddYAxis("Revenue (₹)", title: "Sales Amount in Rupees"); } <h1>Sales Performance Dashboard</h1> <div style="text-align: center; margin: 20px 0;"> @chart.Write(format: "png") <!-- or just @chart.Write() --> </div> <p style="text-align: center; font-style: italic;"> Data represents monthly revenue for the first half of the year. </p> |
What you get in browser:
- A nice line chart with two series (2025 vs 2026)
- Title at top
- Legend on right
- Axis labels
- Green theme (you can choose Blue, Vanilla, etc. or custom XML theme)
3. Common Chart Types (Supported by Chart Helper)
| chartType value | Visual style | Best for |
|---|---|---|
| Column | Vertical bars | Comparing categories |
| Bar | Horizontal bars | Long category names |
| Line | Connected points | Trends over time |
| Pie | Circular slices | Percentage distribution |
| Area | Filled under line | Cumulative trends |
| Doughnut | Pie with hole | Looks modern |
| Stock | Candlestick (for finance) | Stock prices |
| Scatter | Points without lines | Correlations |
Example pie chart (quick one):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
new Chart(500, 400) .AddTitle("Market Share 2026") .AddSeries( chartType: "Pie", xValue: new[] { "North", "South", "East", "West" }, yValues: new[] { 35, 25, 20, 20 } ) .Write(); |
4. Useful Options & Formatting (from W3Schools + Extras)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
var chart = new Chart(600, 400, theme: ChartTheme.Blue) .AddTitle("Revenue Trend", font: "Arial,20pt,Red", position: ChartTitlePosition.Top) .AddSeries(..., legend: "Online Sales") .AddLegend("Legend", legendPosition: "bottom-center") .AddXAxis("Time", min: 0, max: 12, interval: 1) .AddYAxis("Amount", min: 0, max: 30000, interval: 5000) .Write(format: "png"); // or "jpeg", "bmp" |
You can also:
- Use .GetUrl() → returns /ChartImg.axd?… URL → use in <img src=”@chart.GetUrl()” />
- Save to file: .Save(“~/charts/sales.png”)
- Themes: Green, Blue, Vanilla, Yellow (or custom XML file)
5. Real-World Tip: From Database (Combining with Previous Lessons)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@{ var db = Database.Open("SmallBakery"); var data = db.Query("SELECT MonthName, Revenue FROM MonthlySales ORDER BY MonthOrder"); var months = data.Select(r => (string)r.MonthName).ToArray(); var revenue = data.Select(r => (decimal)r.Revenue).ToArray(); var chart = new Chart(700, 450) .AddTitle("Monthly Revenue 2026") .AddSeries("Revenue", "Column", xValue: months, yValues: revenue) .Write(); } |
6. 2026 Perspective – Where Did It Go?
- Chart Helper was server-side → generated images → no interactivity (no hover tooltips, no zoom)
- In ASP.NET Core → Microsoft removed it → now people use:
- Chart.js (client-side, interactive)
- Plotly.NET
- Syncfusion / Telerik / DevExpress (paid)
- Quick-and-dirty: SVG via Razor or libraries
- But learning Chart Helper is still excellent for understanding data visualization basics
Summary – Blackboard Close
ASP.NET Web Pages Chart Helper = server-side chart image generator:
- new Chart(width, height) → start
- .AddTitle(), .AddSeries(…), .AddLegend(), .AddXAxis/YAxis()
- .Write() or .GetUrl() → show image
- Types: Column, Line, Pie, Area, etc.
- Themes & formatting → quick professional look
- Great for static reports/dashboards when you have DB or array data
Next class?
- Want example with 3D charts, multiple Y-axes, or stock chart?
- How to make dynamic chart from form input (user selects year)?
- Or move to WebPages Email (sending mails with charts attached 😄)?
Tell me — you’re doing amazing in this full W3Schools ASP track from Hyderabad! Keep the energy up! 🚀🇮🇳
