Prev Next

WebPages Charts

ASP.NET WebPages provides a powerful Charts helper for creating dynamic charts and visualizing data. The Charts helper supports various chart types, including bar, line, pie, and more, allowing you to represent data graphically with minimal effort.

Key Topics

Creating a Basic Chart

Example

@{
    var chart = new Chart(width: 600, height: 400)
        .AddTitle("Sales Data")
        .AddSeries(
            chartType: "Bar",
            xValue: new[] { "January", "February", "March" },
            yValues: new[] { 100, 200, 300 }
        );
    chart.Write();
}

Explanation: This example creates a bar chart with three data points representing sales data for January, February, and March. The Chart object generates the chart dynamically.

Adding Labels and Colors

Example

@{
    var chart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .AddLegend("Categories")
        .AddSeries(
            name: "Products",
            xValue: new[] { "Product A", "Product B", "Product C" },
            yValues: new[] { 50, 75, 100 },
            legend: "Sales",
            color: "Blue"
        );
    chart.Write();
}

Explanation: This example adds labels, a legend, and custom colors to a bar chart. The AddLegend and AddSeries methods enhance the chart's presentation.

Adding Multiple Series

Example

@{
    var chart = new Chart(width: 600, height: 400)
        .AddTitle("Monthly Sales Comparison")
        .AddSeries(
            name: "2023",
            chartType: "Line",
            xValue: new[] { "Jan", "Feb", "Mar" },
            yValues: new[] { 150, 200, 250 }
        )
        .AddSeries(
            name: "2024",
            chartType: "Line",
            xValue: new[] { "Jan", "Feb", "Mar" },
            yValues: new[] { 180, 220, 270 }
        );
    chart.Write();
}

Explanation: This example creates a line chart with two series, comparing monthly sales data for two years. The AddSeries method is used twice to add the data for both years.

Key Takeaways

  • The Charts helper simplifies creating various chart types like bar, line, and pie charts.
  • You can customize charts with titles, legends, colors, and multiple series.
  • Charts are generated dynamically on the server and rendered as images on the client side.
Prev Next