Geeks With Blogs
Devin Rader's Blog I write the code...

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:

Posted on Monday, June 19, 2006 2:13 PM | Back to top


Comments on this post: Creating a UltraChart Line Chart with multiple data point connector icons

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
thanks for artical it really helps
Left by chetan on Feb 19, 2008 10:40 PM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
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.


Left by vipul on Jul 22, 2008 7:10 PM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
This is a good way to create a datasource fot UltraChart
Left by Antonio Ferraioli on Nov 11, 2008 11:07 PM

# Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
This is very useful to me.this is the way to learn about chart.
Left by kumar on Apr 26, 2009 5:41 PM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
nice very helpfull Tutorial
Left by Muhammad Azeem Attari on May 17, 2009 3:40 PM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
good one... really helped me...
Left by renish on Jun 20, 2009 11:07 AM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
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.

Left by Darshak on Dec 11, 2009 6:10 AM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
Hi, Can you share the code how you display Labels of X-Axis in date formate i.e. '12/5/2009'?

Regards,
Left by Saima Javaid on Feb 03, 2010 5:41 AM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
How to display dates? In my chart it is displaying 00:## ? How to format to dates ?
Left by Rahul on Feb 04, 2010 8:19 AM

# re: Creating a UltraChart Line Chart with multiple data point connector icons
Requesting Gravatar...
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.
Left by jrubengb on Nov 04, 2010 1:52 PM

Your comment:
 (will show your gravatar)


Copyright © Devin Rader | Powered by: GeeksWithBlogs.net