Devin Rader's Blog
I write the code...

Creating a UltraChart Line Chart with multiple data point connector icons

Monday, June 19, 2006 2:13 PM

One common question the Chart team gets asked is how each line in a line chart can have its own line connector icons.  While the answer is not totally obvious, it can be done.  Step 1 is to change the chart type :)

The line chart in the UltraChart control currently does not support assigning different connector icons to each line in the chart, but we can get around that by changing our chart type to a scatter chart.  The scatter chart does support assigning a different connecting point icon to each bound data series, and combining that with the scatters charts ConnectWithLines property, you can generate a line chart where each line uses a different connector icon.

The sample below demonstrates creating a scatter chart with three series and connecting the data points of each series with a line (thus creating  line chart with three lines).  By default the scatter chart will assign each series a different connecting point icon and line color.  As you look throught the code, you will see that the vast majority of the code is either setting up the data series, or adding formatting to the chart.

   1:  //Create several data series
   2:  NumericTimeSeries dowjones = new NumericTimeSeries();
   3:  dowjones.Label="Dow Jones";
   4:  dowjones.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("24-May-06"),11117.32,"A",false));
   5:  dowjones.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("25-May-06"),11211.05,"A",false));
   6:  dowjones.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("26-May-06"),11278.61,"A",false));
   7:  dowjones.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("30-May-06"),11094.43,"A",false));
   8:  dowjones.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("31-May-06"),11168.31,"A",false));
   9:    
  10:  NumericTimeSeries nasdaq = new NumericTimeSeries();
  11:  nasdaq.Label="NASDAQ";
  12:  nasdaq.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("24-May-06"),2169.17,"B",false));
  13:  nasdaq.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("25-May-06"),2198.24,"B",false));
  14:  nasdaq.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("26-May-06"),2210.37,"B",false));
  15:  nasdaq.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("30-May-06"),2164.74,"B",false));
  16:  nasdaq.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("31-May-06"),2178.88,"B",false));
  17:    
  18:  NumericTimeSeries sp500 = new NumericTimeSeries(); 
  19:  sp500.Label="S&P 500";
  20:  sp500.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("24-May-06"),1258.57,"C",false));
  21:  sp500.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("25-May-06"),1272.88,"C",false));
  22:  sp500.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("26-May-06"),1280.16,"C",false));
  23:  sp500.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("30-May-06"),1259.87,"C",false));
  24:  sp500.Points.Add(new NumericTimeDataPoint(System.DateTime.Parse("31-May-06"),1270.09,"C",false));
  25:    
  26:  //Add the data series to the chart as the data source
  27:  this.ultraChart1.Series.Add(dowjones);
  28:  this.ultraChart1.Series.Add(nasdaq);
  29:  this.ultraChart1.Series.Add(sp500);
  30:    
  31:  //Set the chart titles
  32:  this.ultraChart1.TitleTop.Text="Market Data Summary for 5/26/2006 - 5/31/2006";
  33:  this.ultraChart1.TitleLeft.Text="Closing Price";
  34:  this.ultraChart1.TitChartleLeft.Visible=true;
  35:  this.ultraChart1.TitleLeft.HorizontalAlign=StringAlignment.Center;
  36:     
  37:  //Set the legend and X axis formatting
  38:  this.ultraChart1.Legend.SpanPercentage=11;
  39:  this.ultraChart1.Axis.X.Labels.ItemFormatString="";
  40:     
  41:  //Tell the chart to be  scatter chart and to
  42:  //connect each point in the series with a line
  43:  this.ultraChart1.ChartType = ChartType.ScatterChart;
  44:  this.ultraChart1.ScatterChart.ConnectWithLines=true;

As you can see, this is a pretty simple sample and results on a chart which looks like this:


Feedback

# re: Creating a UltraChart Line Chart with multiple data point connector icons

thanks for artical it really helps 2/19/2008 10:40 PM | chetan

# re: Creating a UltraChart Line Chart with multiple data point connector icons

How can we display the markers (like the small vertical lines before the x or y axis labels displayed) on x and y axis.

Please see the below link for example

http://www.godsmonsters.com/library/graphics/d20linechart.png

Please help..if you have any idea about this.


7/22/2008 7:10 PM | vipul

# re: Creating a UltraChart Line Chart with multiple data point connector icons

This is a good way to create a datasource fot UltraChart 11/11/2008 11:07 PM | Antonio Ferraioli

# Creating a UltraChart Line Chart with multiple data point connector icons

This is very useful to me.this is the way to learn about chart. 4/26/2009 5:41 PM | kumar

# re: Creating a UltraChart Line Chart with multiple data point connector icons

nice very helpfull Tutorial 5/17/2009 3:40 PM | Muhammad Azeem Attari

# re: Creating a UltraChart Line Chart with multiple data point connector icons

good one... really helped me... 6/20/2009 11:07 AM | renish

Post a comment