
Webpages Charts in ASP
Sure! Here's an intro to using Charts in ASP.NET Web Pages (the WebMatrix-style ASP.NET Web Pages framework) for creating simple data visualizations:
ASP.NET Web Pages — Using Charts
ASP.NET Web Pages support charting via the System.Web.Helpers.Chart helper class, which lets you generate charts dynamically with just a few lines of code.
1. Basic Chart Example
@{ var chart = new System.Web.Helpers.Chart(width: 600, height: 400) .AddTitle("Sales Chart") .AddSeries( name: "Sales", xValue: new[] { "Jan", "Feb", "Mar", "Apr" }, yValues: new[] { "100", "120", "140", "130" }) .Write();}
This generates a simple line chart showing sales data over months.
2. Chart Types
You can specify chart types such as:
"Column"
(bar chart)"Line"
"Pie"
"Bar"
"Area"
Example:
@{ var chart = new System.Web.Helpers.Chart(600, 400) .AddTitle("Pie Chart Example") .AddSeries( chartType: "Pie", xValue: new[] { "Apples", "Bananas", "Cherries" }, yValues: new[] { "30", "45", "25" }) .Write();}
3. Saving Charts as Images
Instead of writing chart directly to response, you can save it as a file:
@{ var path = Server.MapPath("~/charts/sales.png"); var chart = new System.Web.Helpers.Chart(600, 400) .AddTitle("Sales Chart") .AddSeries( name: "Sales", xValue: new[] { "Jan", "Feb", "Mar" }, yValues: new[] { "100", "150", "130" }) .Save(path);}<img src="~/charts/sales.png" alt="Sales Chart" />
4. Multiple Series
Add multiple data series for comparison:
@{ var chart = new System.Web.Helpers.Chart(600, 400) .AddTitle("Multi-Series Chart") .AddSeries( name: "2019", xValue: new[] { "Q1", "Q2", "Q3", "Q4" }, yValues: new[] { "100", "120", "140", "130" }) .AddSeries( name: "2020", xValue: new[] { "Q1", "Q2", "Q3", "Q4" }, yValues: new[] { "110", "130", "120", "140" }) .Write();}
Summary
Use
System.Web.Helpers.Chart
in ASP.NET Web Pages.Choose chart types via
chartType
parameter.Add data with
AddSeries()
.Render with
.Write()
or save with.Save()
.
If you want help creating specific charts, integrating with databases, or customizing styles, just ask!