widgets/visualization/html/GettingStarted.html - gerrit/www.eclipse.org/nebula - Git at Google

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
 <link rel="stylesheet" href="default.css" type="text/css" />
 <title>Getting Started</title>
 </head>
 <body>
   <br>
 <p>
  <a href="http://www.eclipse.org/nebula/widgets/visualization/visualization.php">
  <img src="https://www.eclipse.org/nebula/images/nebula_logo_main_300.png" alt="Logo" align=left>
  </a>
  <a href="http://www.eclipse.org/nebula/widgets/visualization/visualization.php"><b><font size=4>SWT XYGraph</font></b></a><br>
  <font color="gray">
  A scientific and engineering widgets library such as graph, meter, gauge and knob for SWT and GEF applications.
 </font>
  </p>
  <hr>
 <h3>Documentation</h3>
 <h4>Table of Contents</h4>
 <ul>
 	 <li class="toc_lvl1">
         <a href="#Installation">1. Installations</a>
     </li>
      <li class="toc_lvl1">
         <a href="#Concepts">2. Concepts</a>
     </li>
      <li class="toc_lvl1">
         <a href="#firstXYGraph">3. Create your first XY Graph</a>
     </li>
      <li class="toc_lvl1">
         <a href="#Examples">4. Learn from examples</a>
     </li>
      <li class="toc_lvl2">
         <a href="#XYGraph">4.1 XYGraph</a>
     </li>
       <li class="toc_lvl2">
         <a href="#IntensityGraph">4.2 Intensity Graph</a>
     </li>
       <li class="toc_lvl2">
         <a href="#Gauge">4.3 Gauge</a>
     </li>
       <li class="toc_lvl2">
         <a href="#Meter">4.4 Meter</a>
     </li>
       <li class="toc_lvl2">
         <a href="#ProgressBar">4.5 Progress Bar</a>
     </li>
     <li class="toc_lvl2">
         <a href="#Knob">4.6 Knob</a>
     </li>
         <li class="toc_lvl2">
         <a href="#ScaledSlider">4.7 Scaled Slider</a>
     </li>
         <li class="toc_lvl2">
         <a href="#Thermometer">4.8 Thermometer</a>
     </li>
         <li class="toc_lvl2">
         <a href="#Tank">4.9 Tank</a>
     </li>
         <li class="toc_lvl2">
         <a href="#MultipleWidgets">4.10 Multiple Widgets Example</a>
     </li>
      <li class="toc_lvl1">
         <a href="http://swt-xy-graph.googlecode.com/git/Javadoc/index.html">5. Javadoc</a>
     </li>


 </ul>
 	<a name="Installation"></a>
 	<h3>
    		1. Installation
 	</h3>

 	<h4>1.1 Download</h4>

 	<p>SWT XYGraph can be installed with <a href='http://www.eclipse.org/nebula/downloads.php'>Nebula P2 repository</a>.
 	<!-- There are two versions of SWT XYGraph: Pure Java version and RCP_RAP version. Pure Java version can be used in all java
 	applications including RCP applications. RCP_RAP version can be used for RCP applications and RAP applications. So if you are
 	not creating a RAP application, you should use the Pure Java version.
 	-->
 	</p>
 	<h4>1.2 Install Pure Java Version</h4>
 	<p>
 	For pure java applications, add org.csstudio.swt.xygraph.jar to your project build path.
 	It also requires following jar files:
 	<ul>
 	<li>org.eclipse.draw2d.jar</li>
 	<li>org.eclipse.swt.jar</li>
 <li>org.eclipse.swt.win32.win32.x86.jar or other equivalent platform swt library</li>
 <li>org.eclipse.jface.jar</li>
 <li>org.eclipse.core.commands.jar</li>
 <li>org.eclipse.equinox.common.jar</li>
 <li>org.eclipse.osgi.jar</li>
 </ul>
 <p>
 These jar files are generally available with your eclipse installation under eclipse/plugins folder.
 These jars are also included in project org.csstudio.swt.xygraph.pureJavaTest in git repository.
 Add these jars to your project build path. Now you are ready to start! </p>
 <p>
 If you don't have org.eclipse.draw2d in your eclipse/plugins folder, you should also install draw2d plugin.
 	    Draw2D is part of Eclipse GEF project, If you don't have GEF installed in your eclipse,
 	    please install it following instruction here:
 	    <a href="http://www.eclipse.org/gef/downloads.php">http://www.eclipse.org/gef/downloads.php</a>

 </p>

 	<p>
 	    For Eclipse plugin development, add org.csstudio.swt.xygraph.jar to your target platform or project build path.
 	    You also need to make sure you have org.eclipse.draw2d in your target platform.
 	    Add org.csstudio.swt.xygraph and required jars listed above as plugin dependencies
 	    (If you already have
 	    org.eclipse.ui and org.eclipse.core.runtime in dependencies, those plugins are implicitly included,
 	    so you don't need to add them again.).

 	</p>

 	<h4>1.3 Install RCP_RAP Version</h4>
 	<p>Please skip this section if you are not using RCP_RAP version of SWT_XYGraph.
 	</p>
 	<p>RCP_RAP version of SWT XYGraph aims to use SWT XYGraph in both RCP and RAP application with single sourcing.
 	<code>org.csstudio.swt.xygraph</code> is the base plugin for both RCP an RAP applications.
 	<code>org.csstudio.swt.xygraph.rcp</code> is the fragment for RCP applications. It should not be included in your RAP application.
 	<code>org.csstudio.swt.xygraph.rap</code> is the fragment for RAP applications. It should not be included in your RCP application.
 	So you should add <code>org.csstudio.swt.xygraph</code> and <code>org.csstudio.swt.xygraph.rcp</code> to your RCP target platform.
 	Add <code>org.csstudio.swt.xygraph</code> and <code>org.csstudio.swt.xygraph.rap</code> to your RAP target platform.
 	</p>
 	<a name="Concepts"></a>
 		<h3>
    		2. Concepts
 	</h3>
 	<h4>
     	2.1. Overview
 	</h4>
 	<p>
 	   As described in the class diagram below, a complete XY Graph is composed of Legend,
 	   Title, Axes, PlotArea. The PlotArea will include Traces, Grids and Annotations.
 	   An XYGraph can also be wrapped into a ToolbarArmedXYGraph, which provides a toolbar
 	   for the interactive operations functionality.
 	 </p>
 	<p>
 		<img src = "img/XYGraphUML.png" alt = "XYGraph Class Diagram" border="1"/>
 	</p>
 	<p>
 		There are two interfaces <code>IDataProvider</code> and <code>ISample</code> in the class diagram,
 		which means the user can also implemented there own data provider or sample.
 		This gives the possibilities to implement a different data provider
 		with different data source or data storage structure for special applications,
 	    For example, the data source in the data provider could be from user input, database or files etc,.
 	    The storage structure could be array, queue, circular buffer or bucket buffer etc,.
 	    A default data provider <code>CircularBufferDataProvider</code> and sample <code>Sample</code>
 	    have been provided with the XYGraph plugin.
 	</p>
 	<a name="firstXYGraph"></a>
 	<h3>
     	3. Create your first XY Graph
 	</h3>
 	<p>
 		Just few simple steps, you can create your first XYGraph with a trace added.<br>
 		See <a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/SimpleExample.java">SimpleExample.java</a>
 	</p>
 	<p><strong>Step 1</strong>. Establish the bridge between Draw2D and SWT.
 	</p>
 	<p>
 		The XY Graph is a Draw2D figure, so if you want to display an XY Graph as an SWT widget,
 		you have to create the bridge between Draw2D and SWT:
 	</p>
 	<pre class="example_code"><strong>final</strong> LightweightSystem lws = <strong>new</strong> LightweightSystem(shell);	</pre>
 	<p>
 	The shell can also be replaced with an SWT Canvas.
 	</p>

 	<p><strong>Step 2</strong>. Create a new XYGraph.</p>
 	<pre class="example_code">XYGraph xyGraph = <strong>new</strong> XYGraph();
 xyGraph.setTitle(<span class = "string">"Simple Example"</span>);	</pre>

 	<p><strong>Step 3</strong>. Set it as the content of LightwightSystem.</p>
 	<pre class="example_code">lws.setContents(xyGraph);</pre>

 	<p><strong>Step 4</strong>. Create a trace data provider,
 		which will provide the data to the trace. Here we use CircularBufferDataProvider which
 		is a default provided data provider in XY Graph package. You can also create your own data provider by implementing
 		the interface <code>IDataProvider </code>.
 	</p>
 	<pre class="example_code">
 CircularBufferDataProvider traceDataProvider = <strong>new</strong> CircularBufferDataProvider(<strong>false</strong>);
 traceDataProvider.setBufferSize(100);
 traceDataProvider.setCurrentXDataArray(<strong>new double</strong>[]{10, 23, 34, 45, 56, 78, 88, 99});
 traceDataProvider.setCurrentYDataArray(<strong>new double</strong>[]{11, 44, 55, 45, 88, 98, 52, 23});
 </pre>
 	<p><strong>Step 5</strong>. Create a trace and set its properties.</p>
 	<pre class="example_code">
 Trace trace = new Trace(<span class="string">"Trace1-XY Plot"</span>,
 	xyGraph.primaryXAxis, xyGraph.primaryYAxis, traceDataProvider);
 trace.setPointStyle(PointStyle.<i>XCROSS</i>);</pre>
 	<p><strong>Step 6</strong>. Add the trace to xyGraph.</p>
 	<pre class="example_code">xyGraph.addTrace(trace);</pre>
 	<p>
 		Congratulations! You just created your first XYGraph which has the basic elements: title, axes, trace and legend.
 	</p><p>
 		<img src = "./img/SimpleExample.PNG" alt = "Simple Example"/>
 	</p>
 	<a name="Examples"></a>
 	<h3>4. Learn from examples</h3>
 	<p>Once you have finished the first simple example, you have already mastered 90% of usage of SWT XYGraph!
 	So now you can just learn from examples!</p>
 	<a name="XYGraph"></a>
 	<h4>4.1 XYGraph</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/BarChartExample.java">Bar and Area Chart </a>
 	<p>
 	<img src="./img/BarAreaChart.gif" alt=""></p> </li>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/SimpleToolbarArmedXYGraphExample.java">XYGraph with Toolbar </a>
 	<p><img src="./img/SimpleToolbarArmedXYGraph.gif" alt=""></p> </li>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ComprehensiveExample.java">Comprehensive Example </a>
 	<p>In this example, the XY graph is dynamically updated by a timer. It also shows how to add key listeners
 	 to perform interactive operations programmatically.</p>
 	<p><img src="./img/ComprehensiveExample.gif" alt=""></p> </li>

 	</ul>
 	<a name="IntensityGraph"></a>
 	<h4>4.2 Intensity Graph</h4>
 	<p>Intensity Graph draw a 2D array data based on a color map.</p>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/IntensityGraphExample.java">IntensityGraphExample.java</a>
 	<p>
 	<img src="./img/IntensityGraph.png" alt=""></p> </li>
 	</ul>
 	<a name="Gauge"></a>
 	<h4>4.3 Gauge</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/GaugeExample.java">GaugeExample.java</a>
 	<p>
 	<img src="./img/Gauge.png" alt=""></p> </li>
 	</ul>
 	<a name="Meter"></a>
 	<h4>4.4 Meter</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/MeterExample.java">MeterExample.java</a>
 	<p>
 	<img src="./img/Meter.png" alt=""></p> </li>
 	</ul>
 	<a name="ProgressBar"></a>
 	<h4>4.5 Progress Bar</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ProgressBarExample.java">ProgressBarExample.java</a>
 	<p>
 	<img src="./img/progressbar.png" alt=""></p> </li>
 	</ul>
 	<a name="Knob"></a>
 	<h4>4.6 Knob</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/KnobExample.java">KnobExample.java</a>
 	<p>
 	<img src="./img/KnobExample.gif" alt=""></p> </li>
 	</ul>
 	<a name="ScaledSlider"></a>
 	<h4>4.7 Scaled Slider</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ScaledSliderExample.java">ScaledSliderExample.java</a>
 	<p>
 	<img src="./img/ScaledSliderExample.gif" alt=""></p> </li>
 	</ul>
 	<a name="Thermometer"></a>
 	<h4>4.8 Thermometer</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ThermometerExample.java">ThermometerExample.java</a>
 	<p>
 	<img src="./img/ThermoExample.gif" alt=""></p> </li>
 	</ul>
 	<a name="Tank"></a>
 	<h4>4.9 Tank</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/TankExample.java">TankExample.java</a>
 	<p>
 	<img src="./img/TankExample.gif" alt=""></p> </li>
 	</ul>
 	<a name="#MultipleWidgets"></a>
 	<h4>4.10 Multiple Wigets Example</h4>
 	<ul>
 	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/MultipleWidgetsExample.java">MultipleWidgetsExample.java</a>
 	<p>
 	<img src="./img/MultipleWidgetsExample.gif" alt=""></p> </li>
 	</ul>
 <h3><a href=https://www.eclipse.org/nebula/releases/latest/javadoc/overview-summary.html>5. Javadoc</a></h3>
 </body>
 </html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
	<link rel="stylesheet" href="default.css" type="text/css" />
	<title>Getting Started</title>
	</head>
	<body>
	<br>
	<p>
	<a href="http://www.eclipse.org/nebula/widgets/visualization/visualization.php">
	<img src="https://www.eclipse.org/nebula/images/nebula_logo_main_300.png" alt="Logo" align=left>
	</a>
	<a href="http://www.eclipse.org/nebula/widgets/visualization/visualization.php"><b><font size=4>SWT XYGraph</font></b></a><br>
	<font color="gray">
	A scientific and engineering widgets library such as graph, meter, gauge and knob for SWT and GEF applications.
	</font>
	</p>
	<hr>
	<h3>Documentation</h3>
	<h4>Table of Contents</h4>
	<ul>
	<li class="toc_lvl1">
	<a href="#Installation">1. Installations</a>
	</li>
	<li class="toc_lvl1">
	<a href="#Concepts">2. Concepts</a>
	</li>
	<li class="toc_lvl1">
	<a href="#firstXYGraph">3. Create your first XY Graph</a>
	</li>
	<li class="toc_lvl1">
	<a href="#Examples">4. Learn from examples</a>
	</li>
	<li class="toc_lvl2">
	<a href="#XYGraph">4.1 XYGraph</a>
	</li>
	<li class="toc_lvl2">
	<a href="#IntensityGraph">4.2 Intensity Graph</a>
	</li>
	<li class="toc_lvl2">
	<a href="#Gauge">4.3 Gauge</a>
	</li>
	<li class="toc_lvl2">
	<a href="#Meter">4.4 Meter</a>
	</li>
	<li class="toc_lvl2">
	<a href="#ProgressBar">4.5 Progress Bar</a>
	</li>
	<li class="toc_lvl2">
	<a href="#Knob">4.6 Knob</a>
	</li>
	<li class="toc_lvl2">
	<a href="#ScaledSlider">4.7 Scaled Slider</a>
	</li>
	<li class="toc_lvl2">
	<a href="#Thermometer">4.8 Thermometer</a>
	</li>
	<li class="toc_lvl2">
	<a href="#Tank">4.9 Tank</a>
	</li>
	<li class="toc_lvl2">
	<a href="#MultipleWidgets">4.10 Multiple Widgets Example</a>
	</li>
	<li class="toc_lvl1">
	<a href="http://swt-xy-graph.googlecode.com/git/Javadoc/index.html">5. Javadoc</a>
	</li>



	</ul>
	<a name="Installation"></a>
	<h3>
	1. Installation
	</h3>

	<h4>1.1 Download</h4>

	<p>SWT XYGraph can be installed with <a href='http://www.eclipse.org/nebula/downloads.php'>Nebula P2 repository</a>.
	<!-- There are two versions of SWT XYGraph: Pure Java version and RCP_RAP version. Pure Java version can be used in all java
	applications including RCP applications. RCP_RAP version can be used for RCP applications and RAP applications. So if you are
	not creating a RAP application, you should use the Pure Java version.
	-->
	</p>
	<h4>1.2 Install Pure Java Version</h4>
	<p>
	For pure java applications, add org.csstudio.swt.xygraph.jar to your project build path.
	It also requires following jar files:
	<ul>
	<li>org.eclipse.draw2d.jar</li>
	<li>org.eclipse.swt.jar</li>
	<li>org.eclipse.swt.win32.win32.x86.jar or other equivalent platform swt library</li>
	<li>org.eclipse.jface.jar</li>
	<li>org.eclipse.core.commands.jar</li>
	<li>org.eclipse.equinox.common.jar</li>
	<li>org.eclipse.osgi.jar</li>
	</ul>
	<p>
	These jar files are generally available with your eclipse installation under eclipse/plugins folder.
	These jars are also included in project org.csstudio.swt.xygraph.pureJavaTest in git repository.
	Add these jars to your project build path. Now you are ready to start! </p>
	<p>
	If you don't have org.eclipse.draw2d in your eclipse/plugins folder, you should also install draw2d plugin.
	Draw2D is part of Eclipse GEF project, If you don't have GEF installed in your eclipse,
	please install it following instruction here:
	<a href="http://www.eclipse.org/gef/downloads.php">http://www.eclipse.org/gef/downloads.php</a>

	</p>

	<p>
	For Eclipse plugin development, add org.csstudio.swt.xygraph.jar to your target platform or project build path.
	You also need to make sure you have org.eclipse.draw2d in your target platform.
	Add org.csstudio.swt.xygraph and required jars listed above as plugin dependencies
	(If you already have
	org.eclipse.ui and org.eclipse.core.runtime in dependencies, those plugins are implicitly included,
	so you don't need to add them again.).

	</p>

	<h4>1.3 Install RCP_RAP Version</h4>
	<p>Please skip this section if you are not using RCP_RAP version of SWT_XYGraph.
	</p>
	<p>RCP_RAP version of SWT XYGraph aims to use SWT XYGraph in both RCP and RAP application with single sourcing.
	<code>org.csstudio.swt.xygraph</code> is the base plugin for both RCP an RAP applications.
	<code>org.csstudio.swt.xygraph.rcp</code> is the fragment for RCP applications. It should not be included in your RAP application.
	<code>org.csstudio.swt.xygraph.rap</code> is the fragment for RAP applications. It should not be included in your RCP application.
	So you should add <code>org.csstudio.swt.xygraph</code> and <code>org.csstudio.swt.xygraph.rcp</code> to your RCP target platform.
	Add <code>org.csstudio.swt.xygraph</code> and <code>org.csstudio.swt.xygraph.rap</code> to your RAP target platform.
	</p>
	<a name="Concepts"></a>
	<h3>
	2. Concepts
	</h3>
	<h4>
	2.1. Overview
	</h4>
	<p>
	As described in the class diagram below, a complete XY Graph is composed of Legend,
	Title, Axes, PlotArea. The PlotArea will include Traces, Grids and Annotations.
	An XYGraph can also be wrapped into a ToolbarArmedXYGraph, which provides a toolbar
	for the interactive operations functionality.
	</p>
	<p>
	<img src = "img/XYGraphUML.png" alt = "XYGraph Class Diagram" border="1"/>
	</p>
	<p>
	There are two interfaces <code>IDataProvider</code> and <code>ISample</code> in the class diagram,
	which means the user can also implemented there own data provider or sample.
	This gives the possibilities to implement a different data provider
	with different data source or data storage structure for special applications,
	For example, the data source in the data provider could be from user input, database or files etc,.
	The storage structure could be array, queue, circular buffer or bucket buffer etc,.
	A default data provider <code>CircularBufferDataProvider</code> and sample <code>Sample</code>
	have been provided with the XYGraph plugin.
	</p>
	<a name="firstXYGraph"></a>
	<h3>
	3. Create your first XY Graph
	</h3>
	<p>
	Just few simple steps, you can create your first XYGraph with a trace added.<br>
	See <a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/SimpleExample.java">SimpleExample.java</a>
	</p>
	<p><strong>Step 1</strong>. Establish the bridge between Draw2D and SWT.
	</p>
	<p>
	The XY Graph is a Draw2D figure, so if you want to display an XY Graph as an SWT widget,
	you have to create the bridge between Draw2D and SWT:
	</p>
	<pre class="example_code"><strong>final</strong> LightweightSystem lws = <strong>new</strong> LightweightSystem(shell); </pre>
	<p>
	The shell can also be replaced with an SWT Canvas.
	</p>

	<p><strong>Step 2</strong>. Create a new XYGraph.</p>
	<pre class="example_code">XYGraph xyGraph = <strong>new</strong> XYGraph();
	xyGraph.setTitle(<span class = "string">"Simple Example"</span>); </pre>

	<p><strong>Step 3</strong>. Set it as the content of LightwightSystem.</p>
	<pre class="example_code">lws.setContents(xyGraph);</pre>

	<p><strong>Step 4</strong>. Create a trace data provider,
	which will provide the data to the trace. Here we use CircularBufferDataProvider which
	is a default provided data provider in XY Graph package. You can also create your own data provider by implementing
	the interface <code>IDataProvider </code>.
	</p>
	<pre class="example_code">
	CircularBufferDataProvider traceDataProvider = <strong>new</strong> CircularBufferDataProvider(<strong>false</strong>);
	traceDataProvider.setBufferSize(100);
	traceDataProvider.setCurrentXDataArray(<strong>new double</strong>[]{10, 23, 34, 45, 56, 78, 88, 99});
	traceDataProvider.setCurrentYDataArray(<strong>new double</strong>[]{11, 44, 55, 45, 88, 98, 52, 23});
	</pre>
	<p><strong>Step 5</strong>. Create a trace and set its properties.</p>
	<pre class="example_code">
	Trace trace = new Trace(<span class="string">"Trace1-XY Plot"</span>,
	xyGraph.primaryXAxis, xyGraph.primaryYAxis, traceDataProvider);
	trace.setPointStyle(PointStyle.<i>XCROSS</i>);</pre>
	<p><strong>Step 6</strong>. Add the trace to xyGraph.</p>
	<pre class="example_code">xyGraph.addTrace(trace);</pre>
	<p>
	Congratulations! You just created your first XYGraph which has the basic elements: title, axes, trace and legend.
	</p><p>
	<img src = "./img/SimpleExample.PNG" alt = "Simple Example"/>
	</p>
	<a name="Examples"></a>
	<h3>4. Learn from examples</h3>
	<p>Once you have finished the first simple example, you have already mastered 90% of usage of SWT XYGraph!
	So now you can just learn from examples!</p>
	<a name="XYGraph"></a>
	<h4>4.1 XYGraph</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/BarChartExample.java">Bar and Area Chart </a>
	<p>
	<img src="./img/BarAreaChart.gif" alt=""></p> </li>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/SimpleToolbarArmedXYGraphExample.java">XYGraph with Toolbar </a>
	<p><img src="./img/SimpleToolbarArmedXYGraph.gif" alt=""></p> </li>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ComprehensiveExample.java">Comprehensive Example </a>
	<p>In this example, the XY graph is dynamically updated by a timer. It also shows how to add key listeners
	to perform interactive operations programmatically.</p>
	<p><img src="./img/ComprehensiveExample.gif" alt=""></p> </li>

	</ul>
	<a name="IntensityGraph"></a>
	<h4>4.2 Intensity Graph</h4>
	<p>Intensity Graph draw a 2D array data based on a color map.</p>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/IntensityGraphExample.java">IntensityGraphExample.java</a>
	<p>
	<img src="./img/IntensityGraph.png" alt=""></p> </li>
	</ul>
	<a name="Gauge"></a>
	<h4>4.3 Gauge</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/GaugeExample.java">GaugeExample.java</a>
	<p>
	<img src="./img/Gauge.png" alt=""></p> </li>
	</ul>
	<a name="Meter"></a>
	<h4>4.4 Meter</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/MeterExample.java">MeterExample.java</a>
	<p>
	<img src="./img/Meter.png" alt=""></p> </li>
	</ul>
	<a name="ProgressBar"></a>
	<h4>4.5 Progress Bar</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ProgressBarExample.java">ProgressBarExample.java</a>
	<p>
	<img src="./img/progressbar.png" alt=""></p> </li>
	</ul>
	<a name="Knob"></a>
	<h4>4.6 Knob</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/KnobExample.java">KnobExample.java</a>
	<p>
	<img src="./img/KnobExample.gif" alt=""></p> </li>
	</ul>
	<a name="ScaledSlider"></a>
	<h4>4.7 Scaled Slider</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ScaledSliderExample.java">ScaledSliderExample.java</a>
	<p>
	<img src="./img/ScaledSliderExample.gif" alt=""></p> </li>
	</ul>
	<a name="Thermometer"></a>
	<h4>4.8 Thermometer</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/ThermometerExample.java">ThermometerExample.java</a>
	<p>
	<img src="./img/ThermoExample.gif" alt=""></p> </li>
	</ul>
	<a name="Tank"></a>
	<h4>4.9 Tank</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/TankExample.java">TankExample.java</a>
	<p>
	<img src="./img/TankExample.gif" alt=""></p> </li>
	</ul>
	<a name="#MultipleWidgets"></a>
	<h4>4.10 Multiple Wigets Example</h4>
	<ul>
	<li><a href = "https://github.com/eclipse/nebula/tree/master/examples/org.eclipse.nebula.snippets/src/org/eclipse/nebula/snippets/visualization/MultipleWidgetsExample.java">MultipleWidgetsExample.java</a>
	<p>
	<img src="./img/MultipleWidgetsExample.gif" alt=""></p> </li>
	</ul>
	<h3><a href=https://www.eclipse.org/nebula/releases/latest/javadoc/overview-summary.html>5. Javadoc</a></h3>
	</body>
	</html>