Tutorial 55: XYZ surface databinding C# sample
« on: February 05, 2016, 01:39:45 AM »
This sample code will plot a surface chart using data from a DataGridView and will show how to bind the control
so selections and modifications in either one are reflected on the other
.
 
Key aspects of this tutorial:
  • Change data in DataGridView and chart control will update automatically.
  • You can make a selection of cells in DataGridView and data will be highlighted in chart also.
  • You can rotate the chart in 3D moving the mouse while pressing left button.
  • You can move up/down any point using mouse (press CONTROL and drag the point in chart)
  • You can make a selection of points in chart pressing SHIFT and moving the mouse over.

Steps:

1. Create a new Windows application project (C#)
2. Add Crossing Charts Library to the toolbox pallete and drag it to Form1.
3. Add a DataGridView control to the Form1.
4. Copy and paste de following code:

Code: [Select]
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
// Chart component import:
using CrossingChartsLibrary;
using System.Collections;
using System.Drawing.Drawing2D;
 
 
namespace SurfaceChart3D
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            Random rnd = new Random();
 
            // Prepare the Data Grid Viewer
            int rows = 20;
            int cols = 20;
            ArrayList[] hotspots = new ArrayList[rows];
            dataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.AllCells;
            dataGridView1.DefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCenter;
            dataGridView1.RowHeadersWidthSizeMode = DataGridViewRowHeadersWidthSizeMode.AutoSizeToAllHeaders;
            dataGridView1.Columns.Clear();
            for (int c = 1; c <= cols; c++)
            {
                dataGridView1.Columns.Add("", (c * 100).ToString());
            }
            dataGridView1.Rows.Add(rows);
            int y = 0;
            for (int r = 1; r <= rows; r++)
            {
                dataGridView1.Rows[r - 1].HeaderCell.Value = (r * 10).ToString();
                hotspots[r - 1] = new ArrayList();
                for (int k = 1; k <= cols; k++)
                {
                    dataGridView1.Rows[r - 1].Cells[k - 1].Value = y;
                    y += rnd.Next(10) - 5;
                    if (y < 0) y = 0;
                    hotspots[r - 1].Add("X-Axis = " + dataGridView1.Columns[k - 1].HeaderCell.Value.ToString() + ", Z-Axis = " +
 dataGridView1.Rows[r - 1].HeaderCell.Value + ", Height = " + dataGridView1.Rows[r - 1].Cells[k - 1].Value);
                }
            }
 
            // Chart general customization
            CrossingCharts1.AutoRefresh = false; // to avoid redrawing the chart after each assignment, disable autorefresh
            CrossingCharts1.Title = "Surface 3D Chart Sample";
            CrossingCharts1.TitleColor = Color.Cyan;
            CrossingCharts1.ShowDataTable = false;
            CrossingCharts1.ShowValues = false;
            CrossingCharts1.ShowLegend = false;
            CrossingCharts1.BackStyle = STYLEBACKGROUND.STYLEBACKGROUND_SOLID;
            CrossingCharts1.BackColor = Color.Black;
            CrossingCharts1.WallsBackStyle = STYLEWALLBACKGROUND.STYLEWALLBACKGROUND_TRANSPARENT;
            CrossingCharts1.WallsBackColorPrincipal = Color.White;
 
            // Default surface look & feel
            CrossingCharts1.SetAllSeriesLineStyle(new Pen(Color.White)); // line colors
            CrossingCharts1.SurfaceGradientType = SURFACE_GRADIENT_TYPE.ONE_COLOR;
            CrossingCharts1.SurfaceBrushStyle = new SolidBrush(Color.FromArgb(220, Color.LightBlue));
 
            // X-Axis parameters
            CrossingCharts1.ShowXAxis = true;
            CrossingCharts1.XAxisDividersCount = 10;
            CrossingCharts1.ShowDividersX = false;
            CrossingCharts1.XAxisColor = Color.White;
            CrossingCharts1.XAxisNumericFormat = "0";
 
            // Y-Axis parameters
            CrossingCharts1.ShowYAxis = true;
            CrossingCharts1.YAxisColor = Color.White;
            //CrossingCharts1.YAxisScaleMinimum = 0;  // in this case, we'll let the chart to calculate the max/min
for this axis
            //CrossingCharts1.YAxisScaleMaximum = 500;
            CrossingCharts1.YAxisScaleMode = SCALEMODE.SCALEMODE_AUTOMATIC_MIN_ZERO;
            CrossingCharts1.YAxisNumericFormat = "0";
 
            // Z-Axis parameters
            CrossingCharts1.ShowZAxis = true;
            CrossingCharts1.ShowDividersZ = false;
            CrossingCharts1.ZAxisDividersCount = 12;
            CrossingCharts1.ZAxisColor = Color.White;
            CrossingCharts1.ZAxisNumericFormat = "0";
 
            // Tooltips
            CrossingCharts1.HotSpotsEnabled = true;
            CrossingCharts1.HotSpotTooltips = hotspots;  // here we assign our custom labels (if not set, the text will
 be automatically created if enabled).
 
            // Apply some inner margin
            CrossingCharts1.MarginRight = 100;
            CrossingCharts1.MarginLeft = 100;
            CrossingCharts1.MarginBottom = 50;
 
            // Set chart style
            CrossingCharts1.Style = STYLE2D3D.STYLE3D_XYZ_SURFACE;
 
            // New properties for databinding
            CrossingCharts1.HotSpotOutlineStyle = new Pen(Color.Red);
            CrossingCharts1.DataSource = dataGridView1;
            CrossingCharts1.DataSourceMode = DATASOURCE_SCHEME.XZ_HEADERS_Y_CELLS;
 
            // Refresh/Paint chart
            CrossingCharts1.RefreshChart();
 
        }
 
        private void btWireframe_Click(object sender, EventArgs e)
        {
            CrossingCharts1.SurfaceWireOnly = true;
            CrossingCharts1.SetAllSeriesLineStyle(new Pen(Color.LightGreen));
            CrossingCharts1.RefreshChart();
        }
 
        private void btSingleColorGradient_Click(object sender, EventArgs e)
        {
            CrossingCharts1.SurfaceWireOnly = false;
            CrossingCharts1.SurfaceBrushStyle = new SolidBrush(Color.LightGreen);
            CrossingCharts1.SetAllSeriesLineStyle(new Pen(Color.Black));
            CrossingCharts1.RefreshChart();
        }
 
        private void btTwoColorGradient_Click(object sender, EventArgs e)
        {
            CrossingCharts1.SurfaceWireOnly = false;
            CrossingCharts1.SurfaceGradientType = SURFACE_GRADIENT_TYPE.TWO_COLORS_LINEAR_GRADIENT;
            CrossingCharts1.SurfaceBrushStyle = new LinearGradientBrush(new PointF(0, 0),
new PointF(1, 1), Color.White, Color.Red);
            CrossingCharts1.SetAllSeriesLineStyle(new Pen(Color.Black));
            CrossingCharts1.RefreshChart();
        }
 
        private void btHeatMap_Click(object sender, EventArgs e)
        {
            CrossingCharts1.SurfaceWireOnly = false;
            CrossingCharts1.SurfaceGradientType = SURFACE_GRADIENT_TYPE.LIST_OF_COLORS_LINEAR_GRADIENT;
            CrossingCharts1.SurfaceGradientColors = new List<Color>() { Color.White, Color.Blue,
 Color.Cyan, Color.Green, Color.Yellow, Color.Red, Color.Black };
            CrossingCharts1.SetAllSeriesLineStyle(new Pen(Color.Transparent));
            CrossingCharts1.RefreshChart();
        }
 
 
 
        private void dataGridView1_KeyDown(object sender, KeyEventArgs e)
        {
            float modifier;
            if (e.KeyData == Keys.Oemplus) { modifier = 1; }
            else if (e.KeyData == Keys.OemMinus) { modifier = -1; }
            else return;
 
            CrossingCharts1.DataSource = null;
            foreach (DataGridViewCell cell in dataGridView1.SelectedCells)
            {
                cell.Value = float.Parse(cell.Value.ToString()) + modifier;
            }
            CrossingCharts1.DataSource = dataGridView1;
        }
 
 
    }
}

Results:

« Last Edit: February 16, 2016, 11:29:12 AM by CrossingCharts »