We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

XYZ scatter chart

Thread ID:

Created:

Updated:

Platform:

Replies:

132711 Sep 17,2017 04:41 AM UTC Sep 19,2017 11:17 AM UTC WinForms 3
loading
Tags: Chart
Sigfredo
Asked On September 17, 2017 04:41 AM UTC

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 [Syncfusion]
Replied On September 18, 2017 02:57 PM UTC

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. 
 
Please find the output of the sample below 
 
 
 
Please let us know , if you have any concern on this. 
 
Regards, 
Saravana Kumar K  


Sigfredo
Replied On September 18, 2017 04:07 PM UTC

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 [Syncfusion]
Replied On September 19, 2017 11:17 AM UTC

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. 
 
  
Please find the output of the sample below 
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;