Infragistics Forums

Hello everyone,

I'm trying to use UltraWebChart to create the so called 'ScatterLineChart'. Here is the prototype of graph I have to create:

http://img167.imageshack.us/img167/5292/graphlq2.gif

I'm using the latest version of Infragistics WebChart, I've selected the ScatterLineChart as chart type. I was able to display the Lines, however I'm having troubles plotting the dots. I've got the correct coordinates for X and Y for each line and I'm keeping it in the DataTable along with the Line data.

 I've set the correct: UltraChart1.ScatterLineChart.Scatter.ColumnX and UltraChart1.ScatterLineChart.Scatter.ColumnY properties and it works fine, However UltraChart is using those columns as data to plot the Lines as well which is not correct and I want it to use them just to plot the dots.

 I tried to use

UltraChart1.ScatterLineChart.ScatterData.IncludeColumn( "ColumnX", false ); and UltraChart1.ScatterLineChart.ScatterData.IncludeColumn( "ColumnY", false );

However its throwing me an exception - "Object not set...". If specify the index of the these columns it doesn't work either. I can remove those columns using UltraChart1.Data... but then the chart is complaining that Scatter data is not there...

I also tried to bind

UltraChart1.ScatterLineChart.ScatterData to different datasource containing just the ScatterData but with no luck

What code are you using to bind the chart?  You'll need to set 2 datasources, one for the LineData and one for the ScatterData. 

Here's a help topic that covers data requirements for this chart type.

http://help.infragistics.com/Help/NetAdvantage/NET/2007.3/CLR2.0/html/Chart_Working_with_Scatter_Line_Chart_Data.html

Hope this helps,

-Tony

Tony,

Thanks for your reply. now I'm able to bind the data, however I'm having another problem with the coordinate system. I cannot plot my dots correctly on the screen. The Line coordinate system is determinated on what data is in LineData and the Scatter coordinate system is determinated on what is in ScatterData. So I have two of them and I need it to be only one, the one in the LineData and after that I need to provide where to plot the dots - X and Y. Right now UltraChart is not plotting my dots correctly because the difference in the coordinate systems.

 I know it may sound confusing, but what I really need is to achieve the graph I provided in the screen shot.

 Philip.

There are a few ways to display this type of chart.
When using ScatterLineChart, scatter points are plotted against X axis, and lines are plotted against X2. It doesn't look like your lines use date time values, meaning that the each of the line's points are equally spaced and the axis range is from 0 to number of points in the line (which seems to be 19). If you set a custom range on the X axis to 0 - 19, you should be able to plot the scatter points as if both axes used the same mapping. Of course, it's hard to say if this will work for you or what adjustments you will have to make, because I don't know what your data looks like.

You can also use a regular line chart to plot the lines, and then use a custom layer to plot the scatter points. This would be more involved, because you have to go through the scatter data and plot each scatter point manually.

You can also try a composite chart. You can have one layer for the lines (which can be a line layer or a scatter layer) and another layer for the scatter points (a scatter layer).

Hello, that helped. I've setup the coordinate system like that:

UltraChart1.Axis.X.RangeType and UltraChart1.Axis.Y.RangeType and it worked.

 I have one additional question, is there is possibility to setup the colors of the scatter points? So each will have different color? Like the lines.

Yes, you can use one of our color models to set this up. But first, you would have to set up a 'group by' column for your scatter datapoints.

this.ultraChart1.Axis.X.RangeMin = 0;
this.ultraChart1.Axis.X.RangeMax = 4;
this.ultraChart1.Axis.X.RangeType = AxisRangeType.Custom;
this.ultraChart1.Axis.Y.RangeMin = 0;
this.ultraChart1.Axis.Y.RangeMax = 7;
this.ultraChart1.Axis.Y.RangeType = AxisRangeType.Custom;
this.ultraChart1.Axis.X2.RangeMin = 0;
this.ultraChart1.Axis.X2.RangeMax = 4;
this.ultraChart1.Axis.X2.RangeType = AxisRangeType.Custom;
this.ultraChart1.Axis.Y2.RangeMin = 0;
this.ultraChart1.Axis.Y2.RangeMax = 7;
this.ultraChart1.Axis.Y2.RangeType = AxisRangeType.Custom;

this.ultraChart1.ScatterLineChart.LineData.DataSource = new int[,] { { 1, 2, 3, 2, 1 }, { 4, 1, 6, 5, 3 } };
this.ultraChart1.ScatterLineChart.LineData.DataBind();
this.ultraChart1.ScatterLineChart.ScatterData.DataSource = new int[,] { { 1, 1, 1 }, { 2, 2, 2 }, { 3, 3, 3 } };
this.ultraChart1.ScatterLineChart.ScatterData.DataBind();

this.ultraChart1.ScatterLineChart.Scatter.ColumnX = 0;
this.ultraChart1.ScatterLineChart.Scatter.ColumnY = 1;
this.ultraChart1.ScatterLineChart.Scatter.GroupByColumn = 2;
this.ultraChart1.ScatterLineChart.Scatter.UseGroupByColumn = true;
this.ultraChart1.ColorModel.ModelStyle = ColorModels.CustomSkin;
this.ultraChart1.ColorModel.Skin.PEs.Add(new PaintElement(Color.Red));
this.ultraChart1.ColorModel.Skin.PEs.Add(new PaintElement(Color.Blue));
this.ultraChart1.ColorModel.Skin.PEs.Add(new PaintElement(Color.Green));
this.ultraChart1.ColorModel.Skin.ApplyRowWise = true;

I think in any other scenario, you would have to use ChartDrawItem or FillSceneGraph event, where you trap each PointSet primitive and change the PE.Fill property.

That worked! Thank you all for the help!