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.Chartin ASP.NET Web Pages.Choose chart types via
chartTypeparameter.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!