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:



  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

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

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

Hi, I want to create a line chart, but my requirement is to display only DataPoints. not the connected line. how i can acheive this. i tried to use the scatter chart, but scatter chart required both Column value as numeric so i can not use that.

Early reply will be Appriceated,

Regards,
Darshak.

12/11/2009 6:10 AM | Darshak

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

Hi, Can you share the code how you display Labels of X-Axis in date formate i.e. '12/5/2009'?

Regards, 2/3/2010 5:41 AM | Saima Javaid

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

How to display dates? In my chart it is displaying 00:## ? How to format to dates ? 2/4/2010 8:19 AM | Rahul

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

This is a good example of creating a multi-line chart. However, what if you need to add data points that are not finite? Could you offer a short example of how to feed a data series in from a data table? So for each record within a range in a data table (for example date), that would be plotted along the x-axis. And then for each record within the time range, another field value would be displayed on the y-axis. Thanks for any advice. 11/4/2010 1:52 PM | jrubengb

Post a comment