BeepChart

Overview

BeepChart is a sophisticated data visualization control that provides professional charting capabilities for WinForms applications. It supports multiple chart types including line, bar, pie, area, and bubble charts with advanced features like zooming, panning, interactive tooltips, and custom drawing capabilities.

Built on the BeepControl foundation, BeepChart features flexible axis types (numeric, text, date), auto-scaling viewports, legend management, and comprehensive theming support. It's designed for high-performance rendering with support for large datasets and real-time updates.

Key Features

Chart Types

BeepChart supports various visualization types for different data scenarios:

Basic Usage

// Create a basic line chart
var chart = new BeepChart
{
    Size = new Size(600, 400),
    Location = new Point(10, 10),
    ChartType = ChartType.Line,
    ChartTitle = "Sales Trend",
    ChartValue = "$125,000",
    ChartSubtitle = "Monthly Revenue",
    XAxisTitle = "Month",
    YAxisTitle = "Revenue ($)",
    ShowLegend = true
};

// Create data series
var salesSeries = new ChartDataSeries
{
    Name = "Sales",
    Color = Color.Blue,
    ShowLine = true,
    ShowPoint = true,
    ChartType = ChartType.Line
};

// Add data points
salesSeries.Points.AddRange(new[]
{
    new ChartDataPoint("Jan", "10000", 10000f, "January"),
    new ChartDataPoint("Feb", "15000", 15000f, "February"),
    new ChartDataPoint("Mar", "12000", 12000f, "March"),
    new ChartDataPoint("Apr", "18000", 18000f, "April"),
    new ChartDataPoint("May", "22000", 22000f, "May")
});

// Set data and add to form
chart.DataSeries = new List { salesSeries };
this.Controls.Add(chart);

var chart = new BeepChart
{
    ChartType = ChartType.Line,
    ChartTitle = "Performance Comparison",
    Size = new Size(800, 500)
};

// Create multiple series
var series1 = new ChartDataSeries
{
    Name = "Product A",
    Color = Color.Blue,
    ShowLine = true,
    ShowPoint = true
};

var series2 = new ChartDataSeries
{
    Name = "Product B", 
    Color = Color.Red,
    ShowLine = true,
    ShowPoint = true
};

// Add data to both series
// ... (add data points)

chart.DataSeries = new List { series1, series2 };

var pieChart = new BeepChart
{
    ChartType = ChartType.Pie,
    ChartTitle = "Market Share",
    Size = new Size(500, 400),
    ShowLegend = true
};

var pieSeries = new ChartDataSeries
{
    Name = "Market Share",
    ChartType = ChartType.Pie
};

pieSeries.Points.AddRange(new[]
{
    new ChartDataPoint("Company A", "", 35f, "Company A", Color.Blue),
    new ChartDataPoint("Company B", "", 25f, "Company B", Color.Red),
    new ChartDataPoint("Company C", "", 20f, "Company C", Color.Green),
    new ChartDataPoint("Others", "", 20f, "Others", Color.Gray)
});

pieChart.DataSeries = new List { pieSeries };

Properties

Chart Configuration

Display Text Properties

Axis Configuration

Font Properties

Data Structure

ChartDataSeries

ChartDataPoint

// Create a data series
var series = new ChartDataSeries
{
    Name = "Revenue",
    Color = Color.Blue,
    ShowLine = true,
    ShowPoint = true,
    ChartType = ChartType.Line
};

// Add various types of data points
series.Points.Add(new ChartDataPoint("2024-01", "10000", 10000f, "Jan 2024", Color.Blue, "January: $10,000"));
series.Points.Add(new ChartDataPoint("2024-02", "15000", 15000f, "Feb 2024", Color.Blue, "February: $15,000"));

// For bubble charts, the Value property determines bubble size
var bubblePoint = new ChartDataPoint("100", "200", 50f, "Large Bubble", Color.Red, "X:100, Y:200, Size:50");

Methods

Events

var chart = new BeepChart();

// Handle custom drawing
chart.CustomDrawSeries += (s, e) => {
    // Custom rendering logic
    var graphics = e.Graphics;
    var chartArea = e.ChartArea;
    var dataSeries = e.DataSeries;
    
    // Draw custom elements
    graphics.DrawString("Custom Overlay", SystemFonts.DefaultFont, 
        Brushes.Red, chartArea.Location);
};

// Handle mouse interactions
chart.MouseMove += (s, e) => {
    // Custom hover logic
    var point = chart.GetHoveredDataPoint(e.Location);
    if (point != null)
    {
        // Update status bar or perform custom actions
        UpdateStatusBar($"Value: {point.Value}, Label: {point.Label}");
    }
};

Examples

public class RealTimeChart : UserControl
{
    private BeepChart chart;
    private Timer updateTimer;
    private ChartDataSeries dataSeries;
    private Random random = new Random();

    public RealTimeChart()
    {
        InitializeChart();
        StartRealTimeUpdates();
    }

    private void InitializeChart()
    {
        chart = new BeepChart
        {
            Dock = DockStyle.Fill,
            ChartType = ChartType.Line,
            ChartTitle = "Real-time Data Stream",
            XAxisTitle = "Time",
            YAxisTitle = "Value",
            ShowLegend = true
        };

        dataSeries = new ChartDataSeries
        {
            Name = "Sensor Data",
            Color = Color.Blue,
            ShowLine = true,
            ShowPoint = false // Don't show points for smoother real-time display
        };

        chart.DataSeries = new List { dataSeries };
        this.Controls.Add(chart);
    }

    private void StartRealTimeUpdates()
    {
        updateTimer = new Timer { Interval = 100 }; // 10 FPS
        updateTimer.Tick += UpdateData;
        updateTimer.Start();
    }

    private void UpdateData(object sender, EventArgs e)
    {
        // Add new data point
        var timestamp = DateTime.Now.ToString("HH:mm:ss");
        var value = Math.Sin(DateTime.Now.Ticks / 10000000.0) * 100 + random.Next(-10, 10);
        
        dataSeries.Points.Add(new ChartDataPoint(timestamp, value.ToString(), (float)value));

        // Keep only last 100 points for performance
        if (dataSeries.Points.Count > 100)
        {
            dataSeries.Points.RemoveAt(0);
        }

        // Update chart
        chart.AutoScaleViewport();
        chart.Invalidate();
    }

    public void StopUpdates() => updateTimer?.Stop();
    public void StartUpdates() => updateTimer?.Start();
}

public void CreateFinancialDashboard()
{
    // Revenue trend chart
    var revenueChart = new BeepChart
    {
        Size = new Size(400, 300),
        Location = new Point(10, 10),
        ChartType = ChartType.Area,
        ChartTitle = "Revenue",
        ChartValue = "$2.4M",
        ChartSubtitle = "↗ 12% from last month",
        XAxisTitle = "Month",
        YAxisTitle = "Revenue ($)",
        ShowTitle = true
    };

    var revenueSeries = new ChartDataSeries
    {
        Name = "Monthly Revenue",
        Color = Color.Green,
        ShowArea = true,
        ShowLine = true
    };

    // Add revenue data
    var revenueData = new[]
    {
        ("Jan", 180000f), ("Feb", 220000f), ("Mar", 195000f),
        ("Apr", 240000f), ("May", 285000f), ("Jun", 310000f)
    };

    foreach (var (month, amount) in revenueData)
    {
        revenueSeries.Points.Add(new ChartDataPoint(month, amount.ToString(), amount));
    }

    revenueChart.DataSeries = new List { revenueSeries };

    // Market share pie chart
    var marketChart = new BeepChart
    {
        Size = new Size(300, 300),
        Location = new Point(430, 10),
        ChartType = ChartType.Pie,
        ChartTitle = "Market Share",
        ShowLegend = true
    };

    var marketSeries = new ChartDataSeries
    {
        Name = "Market Share",
        ChartType = ChartType.Pie
    };

    marketSeries.Points.AddRange(new[]
    {
        new ChartDataPoint("Our Company", "", 35f, "Our Company", Color.Blue),
        new ChartDataPoint("Competitor A", "", 28f, "Competitor A", Color.Red),
        new ChartDataPoint("Competitor B", "", 22f, "Competitor B", Color.Green),
        new ChartDataPoint("Others", "", 15f, "Others", Color.Gray)
    });

    marketChart.DataSeries = new List { marketSeries };

    // Add to form
    this.Controls.Add(revenueChart);
    this.Controls.Add(marketChart);
}

public class DataExplorer : UserControl
{
    private BeepChart chart;
    private Label statusLabel;
    private Button resetZoomButton;

    public DataExplorer()
    {
        InitializeExplorer();
    }

    private void InitializeExplorer()
    {
        // Create chart with interactive features
        chart = new BeepChart
        {
            Dock = DockStyle.Fill,
            ChartType = ChartType.Line,
            ChartTitle = "Interactive Data Explorer",
            XAxisTitle = "X Values",
            YAxisTitle = "Y Values"
        };

        // Generate sample data
        var series = new ChartDataSeries
        {
            Name = "Sample Data",
            Color = Color.Blue,
            ShowLine = true,
            ShowPoint = true
        };

        var random = new Random();
        for (int i = 0; i < 1000; i++)
        {
            var x = i;
            var y = Math.Sin(i * 0.1) * 100 + random.Next(-20, 20);
            series.Points.Add(new ChartDataPoint(x.ToString(), y.ToString(), (float)y, 
                $"Point {i}", Color.Blue, $"X: {x}, Y: {y:F2}"));
        }

        chart.DataSeries = new List { series };

        // Add status bar
        statusLabel = new Label
        {
            Dock = DockStyle.Bottom,
            Height = 25,
            Text = "Mouse wheel to zoom, drag to pan, hover for details"
        };

        // Add reset button
        resetZoomButton = new Button
        {
            Text = "Reset Zoom",
            Size = new Size(100, 30),
            Location = new Point(10, 10)
        };
        resetZoomButton.Click += (s, e) => {
            chart.AutoScaleViewport();
            chart.Invalidate();
        };

        // Handle mouse events for status updates
        chart.MouseMove += OnChartMouseMove;

        this.Controls.Add(chart);
        this.Controls.Add(statusLabel);
        this.Controls.Add(resetZoomButton);
        resetZoomButton.BringToFront();
    }

    private void OnChartMouseMove(object sender, MouseEventArgs e)
    {
        var point = chart.GetHoveredDataPoint(e.Location);
        if (point != null)
        {
            statusLabel.Text = $"Hovered: {point.ToolTip ?? $"X: {point.X}, Y: {point.Y}"}";
        }
        else
        {
            statusLabel.Text = "Mouse wheel to zoom, drag to pan, hover for details";
        }
    }
}

Interactivity

BeepChart provides rich interactive features for data exploration:

Mouse Interactions

public class InteractiveChart : BeepChart
{
    private ChartDataPoint selectedPoint;

    public event EventHandler PointSelected;

    protected override void OnMouseClick(MouseEventArgs e)
    {
        base.OnMouseClick(e);

        var clickedPoint = GetHoveredDataPoint(e.Location);
        if (clickedPoint != null)
        {
            selectedPoint = clickedPoint;
            PointSelected?.Invoke(this, clickedPoint);
            
            // Highlight selected point
            Invalidate();
        }
    }

    protected override void OnMouseDoubleClick(MouseEventArgs e)
    {
        base.OnMouseDoubleClick(e);

        // Reset zoom on double-click
        AutoScaleViewport();
        Invalidate();
    }

    // Custom drawing to highlight selected point
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        if (selectedPoint != null)
        {
            // Draw selection indicator
            // Custom highlighting logic here
        }
    }
}

Theming

BeepChart provides comprehensive theming with chart-specific color properties:

// Theme colors automatically applied
var chart = new BeepChart
{
    Theme = "DarkTheme"
};

// Chart-specific theme properties:
// - ChartBackColor: Chart background
// - ChartLineColor: Default line color
// - ChartFillColor: Fill areas
// - ChartAxisColor: Axis lines
// - ChartTitleColor: Title text
// - ChartTextColor: Labels and text
// - ChartLegendBackColor: Legend background
// - ChartLegendTextColor: Legend text
// - ChartGridLineColor: Grid lines
// - ChartDefaultSeriesColors: Series color palette

public void ApplyCustomChartTheme(BeepChart chart)
{
    // Override theme colors for custom styling
    chart.ChartBackColor = Color.FromArgb(32, 32, 32);
    chart.ChartLineColor = Color.White;
    chart.ChartAxisColor = Color.Gray;
    chart.ChartTitleColor = Color.White;
    chart.ChartTextColor = Color.LightGray;
    chart.ChartGridLineColor = Color.FromArgb(64, 64, 64);

    // Custom series colors
    chart.ChartDefaultSeriesColors = new List
    {
        Color.FromArgb(0, 150, 255),   // Blue
        Color.FromArgb(255, 100, 0),   // Orange
        Color.FromArgb(0, 200, 100),   // Green
        Color.FromArgb(255, 50, 150),  // Pink
        Color.FromArgb(150, 0, 255)    // Purple
    };

    // Apply custom fonts
    chart.ChartTitleFont = new Font("Arial", 14, FontStyle.Bold);
    chart.ChartValueFont = new Font("Arial", 24, FontStyle.Bold);
    chart.ChartSubtitleFont = new Font("Arial", 10, FontStyle.Regular);

    chart.ApplyTheme();
}

Best Practices

📊 Data Visualization

• Choose appropriate chart types: Line for trends, bar for comparisons, pie for parts of whole
• Limit data points: Use reasonable point counts for performance (< 10,000 points)
• Meaningful labels: Provide clear axis titles and series names
• Consistent colors: Use consistent color schemes across related charts
• Readable scales: Ensure axis scales are appropriate for your data range

⚡ Performance

• Auto-scaling: Use AutoScaleViewport() for initial display
• Selective updates: Update only changed data series when possible
• Point optimization: Remove unnecessary points for line charts with many data points
• Custom drawing: Use CustomDrawSeries events sparingly for complex overlays
• Memory management: Clear large datasets when no longer needed

🎨 Visual Design

• Readable fonts: Ensure title and axis fonts are appropriately sized
• Color contrast: Maintain good contrast between chart elements and background
• Legend placement: Position legends to not obscure important data
• Grid lines: Use subtle grid lines to aid reading without clutter
• Tooltip content: Provide meaningful tooltip information for data points

♿ Accessibility

• Color independence: Don't rely solely on color to convey information
• Tooltips: Provide detailed tooltips for screen readers
• High contrast: Test charts in high contrast themes
• Alternative formats: Consider data tables as alternatives for complex charts
• Keyboard navigation: Implement keyboard shortcuts for zooming and panning

🔧 Implementation Tips

• Axis types: Use appropriate axis types (Numeric, Text, Date) for your data
• Error handling: Handle invalid data points gracefully
• Real-time data: Implement efficient update strategies for live data
• Export functionality: Consider adding export capabilities for charts
• Responsive design: Ensure charts work well at different sizes