XYZ scatter chart

[Sigfredo]

Do you guys have a chart that supports 2d arrays or 3 different values? For example, I would like to plot a XY scatter chart with a Z value represented by color with a color  scale map illustrating the values by color. 

double X = 2400

DateTimeStamp Y  = 2017-09-16 21:38:21

double Z = -71.38

thanks

[Saravana Kumar Kanagavel]

Hi Sigfredo, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and currently we don’t have support to map the color for the each point from the array collection. So , we have dynamically generate the color and applying the each scatter point in chart. 

 

Please refer the code example below 

 

[C#] 

   

            ChartSeries series1 = new ChartSeries("Technology AAA", ChartSeriesType.Scatter); 

            series1.Points.Add(500, 356, 3); 

            series1.Points.Add(1000, 491, 4); 

            series1.Points.Add(1500, 382, 3); 

            series1.Points.Add(2000, 437, 3); 

            series1.Points.Add(2500, 351, 4); 

            ChartSeries series2 = new ChartSeries("Technology BBB", ChartSeriesType.Scatter); 

            series2.Points.Add(500, 175, 4); 

            series2.Points.Add(1000, 291, 3); 

            series2.Points.Add(1500, 182, 2); 

            series2.Points.Add(2000, 237, 4); 

            series2.Points.Add(2500, 151, 4); 

            ChartSeries series3 = new ChartSeries("Technology BBB", ChartSeriesType.Scatter); 

            series3.Points.Add(500, 250, 5); 

            series3.Points.Add(1000, 391, 2); 

            series3.Points.Add(1500, 282, 4); 

            series3.Points.Add(2000, 387, 2); 

            series3.Points.Add(2500, 251, 4); 

            chart.Series.Add(series1); 

            chart.Series.Add(series3); 

            chart.Series.Add(series2); 

            Random r = new Random(); 

            for(int i=0;i<chart.Series.Count; i++) 

            {  

                for (int j = 0; j < chart.Series[i].Points.Count; j++) 

                { 

                    chart.Series[i].Styles[j].Interior = new Syncfusion.Drawing.BrushInfo(Color.FromArgb(r.Next(0, 256), r.Next(0, 256), r.Next(0, 256))); 

                } 

            } 

 

We have prepared the sample for your reference and attached in the below location. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/132711/ze/Sample-1325912990 

Please find the output of the sample below 

 

 

 

Please let us know , if you have any concern on this. 

 

Regards, 

Saravana Kumar K  

[Sigfredo]

Thank you for the reply and example.

How would the user looking at the chart know what value the color represents? 

I'm looking for something similar to the attached file.

Thanks 

[Saravana Kumar Kanagavel]

Hi Sigfredo, 

 

Thanks for your update. 

 

We have analyzed your query and modified the sample based on your requirement. In the sample , we have shown the three point values such as x, y (this values are represent the points) and z values(this value is represent the mapping color value) via tooltip when we hover on points. 

 

Please refer the code example below 

 

[C#] 

     public void InitializeChartData() 

        { 

            Color[] colors = { Color.Green, Color.Red, Color.Orange, Color.MistyRose, Color.Purple, Color.Azure, Color.Brown, Color.Crimson, Color.DarkOrchid }; 

            ChartSeries series1 = new ChartSeries("Technology AAA", ChartSeriesType.Scatter); 

            series1.Points.Add(1, 356, 3); 

            series1.Points.Add(2, 491, 4); 

            series1.Points.Add(3, 382, 1); 

            series1.Points.Add(4, 437, 2); 

            series1.Points.Add(5, 351, 5); 

            ChartSeries series2 = new ChartSeries("Technology BBB", ChartSeriesType.Scatter); 

            series2.Points.Add(1, 175, 2); 

            series2.Points.Add(2, 291, 5); 

            series2.Points.Add(3, 182, 4); 

            series2.Points.Add(4, 237, 1); 

            series2.Points.Add(5, 151, 3); 

            ChartSeries series3 = new ChartSeries("Technology BBB", ChartSeriesType.Scatter); 

            series3.Points.Add(6, 250, 5); 

            series3.Points.Add(7, 391, 2); 

            series3.Points.Add(8, 282, 3); 

            series3.Points.Add(9, 387, 1); 

            series3.Points.Add(10, 251, 4); 

            chart.ShowToolTips = true; 

            series1.PrepareStyle += new ChartPrepareStyleInfoHandler(ChartControlSeries_PrepareStyle); 

            series2.PrepareStyle += new ChartPrepareStyleInfoHandler(ChartControlSeries_PrepareStyle); 

            series3.PrepareStyle += new ChartPrepareStyleInfoHandler(ChartControlSeries_PrepareStyle); 

            chart.Series.Add(series1); 

            chart.Series.Add(series3); 

            chart.Series.Add(series2); 

            Random r = new Random(); 

            for (int i = 0; i < chart.Series.Count; i++) 

            { 

                for (int j = 0; j < chart.Series[i].Points.Count; j++) 

                { 

                    ChartPoint point = chart.Series[i].Points[j]; 

                    Color pointColor = colors[Convert.ToInt32(point.YValues[1])]; 

                    chart.Series[i].Styles[j].Interior = new Syncfusion.Drawing.BrushInfo(pointColor); 

                } 

            } 

            chart.Legend.Visible = false; 

            this.Controls.Add(chart); 

        } 

        protected void ChartControlSeries_PrepareStyle(object sender, ChartPrepareStyleInfoEventArgs args) 

        { 

            ChartSeries series = sender as ChartSeries; 

            if (series != null) 

            { 

                args.Style.ToolTip = "X : " + series.Points[args.Index].X.ToString() + ", Y : " + series.Points[args.Index].YValues[0].ToString() + ", Z : " + series.Points[args.Index].YValues[1].ToString(); 

                args.Handled = true; 

            } 

        } 

 

In the above code, we are changing the tooltip format to show the x and y points with mapping color value on tooltip. 

And you can find the modified sample from the below location. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/132711/ze/Sample1340716864 

  

Please find the output of the sample below 

 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K.