Infragistics(R) NetAdvantage(R) WPF
Creating a Basic Chart Using Visual Studio and XAML
E-mail your feedback on this topic.

Glossary Item Box

This control is WPF Specific, for more information refer to the WPF Specific topic

This topic shows you how you can quickly get up and running using the xamChart™ control in Microsoft® Visual Studio®.

To create a basic chart using Visual Studio:

  1. Open Visual Studio.
  2. On the File menu, point to New, and click Project.
    New Project dialog in visual studio
  3. In the Templates section of the New Project dialog box, select Windows Application (WPF).
  4. Now you need to add a reference to the xamChart control. In the Solution Explorer, add the InfragisticsWPF4.Chart.v11.2.dll and InfragisticsWPF4.v11.2.dll as a reference to the project
    solution for the project in visual studio
  5. Within the default XAML code created by Visual Studio, add the line below to the opening Page or Window tag in the XAML view.

    In XAML:

    ...
    	xmlns:igCA="http://infragistics.com/Chart"
    ...
    
  6. Add the xamChart control to the WPF application. To do this, add the line below to your XAML page's panel control. This will create a default chart, as shown in the screen shot in step 7.

    In XAML:

    ...
    	<igCA:XamChart />
    ...
    

  7. As soon as the chart control is deployed on the main project window, the default column chart appears with default data series and a legend. This chart has "fake" data. This data disappears as soon as actual data is added to the control using data binding or filling the DataPoint collection. The xamChart control has an automatic positioning algorithm. This means that all of the main elements of the chart (e.g., title, legend, axis, and chart) will be automatically positioned by default.
    default look of xamchart after placing on a form
  8. The following is a list of the important data-related properties of xamChart. Set the properties, as necessary.
    • Axes – Stores x-, y-, and z-axes. These axes are responsible for the chart range (minimum, maximum, unit, and linear/logarithmic scale) and the appearance of the axis lines, grid lines, tick marks, and axis labels.
    • Caption – Specifies the chart title text, as well as the appearance and position of the title text.
    • Scene – Specifies information about the appearance of the area where chart types are drawn. In 3D charts, this property is also used to specify the thickness of the chart scene wall and perspective value.
    • Legend – Specifies the appearance and positioning of the legend box.
    • Lights – Specifies the light source that is used in the scene of 3D charts (i.e., Ambient light, Directional light, Point light, and Spot light).
    • Series – Specifies the values of the chart. Each series has a collection of data points, and each data point contains the Value property. Using a collection of data series, you can create any chart type. It also specifies information about the appearance of data points, as well as animation, Tooltips, data point labels, etc.
    • Transform3D – Allows you to specify all 3D transformations, including translation, rotation, and scale transformations.
    • View3D – Let you change the view of the chart to 3D.
  9. Now we will create the data for the chart. In the Series collection, we will add a series. Within this series, we will add five data points. For each data point, we need to set a Value property. Also, the Fill property of the series will be set to the color red, which will change the color of all data points that belongs to this series.
     Note: If you need to change the color of only one data point, you must use the Fill property of that specific data point.

    In XAML:

    ...
    <igCA:XamChart>
    	<igCA:XamChart.Series>
    		<igCA:Series Fill="#FFD21717">
    			<igCA:Series.DataPoints>
    				<igCA:DataPoint Value="5" />
    				<igCA:DataPoint Value="7" />
    				<igCA:DataPoint Value="4" />
    				<igCA:DataPoint Value="3" />
    				<igCA:DataPoint Value="7" />
    			</igCA:Series.DataPoints>
    		</igCA:Series>
    	</igCA:XamChart.Series>
    </igCA:XamChart>
    ...
    

  10. When data point values are set, we can change view to 3D. Inside the chart control we will set View3D property to True. After the view is changed we will use Transform 3D property to change 3D transformation matrix and to rotate 3D scene. By default all rotation angles are equal to 0. 

    In XAML:

    ...
    <igCA:XamChart View3D="True">
    	<igCA:XamChart.Series>
    		<igCA:Series ChartType="Cylinder" Fill="#FFD21717" Stroke="#FF000000">
    			<igCA:Series.DataPoints>
    				<igCA:DataPoint Value="5" />
    				<igCA:DataPoint Value="7" />
    				<igCA:DataPoint Value="4" />
    				<igCA:DataPoint Value="3" />
    				<igCA:DataPoint Value="7" />
    			</igCA:Series.DataPoints>
    		</igCA:Series>
    	</igCA:XamChart.Series>
    	<igCA:XamChart.Transform3D>
    		<RotateTransform3D>
    			<RotateTransform3D.Rotation>
    				<AxisAngleRotation3D Angle="40.109" 
    				  Axis="0.916,-0.362,-0.173" />
    			</RotateTransform3D.Rotation>
    		</RotateTransform3D>
    	</igCA:XamChart.Transform3D>
    </igCA:XamChart>
    ...
    

  11. Now let's change the chart type. Each series has the ChartType property, which is used to specify different presentations of data point values. Change the ChartType property from Column chart to Cylinder chart. If the series from the Series collection has different chart types, we will get a composition of chart types. In this way, we can create a combination of different chart types. 
    xamchart as a cylinder chart
  12. Now let's change the axis labels and legend text. Using Series.Label property, we will change the default text for the legend item to “First Series”. By changing data point's Series.DataPoint.Label property, the new axis labels will appear. The text style for axis labels could be changed using the Axis.Labels property, and changing the font-related properties.

    In XAML:

    ...
    <igCA:XamChart View3D="True">
    	<igCA:XamChart.Series>
    		<igCA:Series ChartType="Cylinder" Fill="#FFD21717" Stroke="#FF000000" 
    		  Label="First Series">
    			<igCA:Series.DataPoints>
    				<igCA:DataPoint Value="5" Label="2002"/>
    				<igCA:DataPoint Value="7" Label="2003"/>
    				<igCA:DataPoint Value="4" Label="2004"/>
    				<igCA:DataPoint Value="3" Label="2005"/>
    				<igCA:DataPoint Value="7" Label="2006"/>
    			</igCA:Series.DataPoints>
    		</igCA:Series>
    	</igCA:XamChart.Series>
    	<igCA:XamChart.Transform3D>
    		<RotateTransform3D>
    			<RotateTransform3D.Rotation>
    				<AxisAngleRotation3D Angle="40.109" 
    				  Axis="0.916,-0.362,-0.173" />
    			</RotateTransform3D.Rotation>
    		</RotateTransform3D>
    	</igCA:XamChart.Transform3D>
    </igCA:XamChart>
    ...
    

  13. Add data point labels. These labels will display the values of the data points. In the series, we will add the Marker object, which will enable data point labels. From the marker, we will change the Foreground property to "white", which changes the color of the label text.
  14. Add a caption to the chart. To do this, we will add the Caption object, and set the Text property to "WPF Chart". We will also change the FontSize, FontFamily, and FontWeight properties of the caption.

    In XAML:

    ...
    <igCA:XamChart View3D="True">
    	<igCA:XamChart.Series>
    		<igCA:Series ChartType="Cylinder" Fill="#FFD21717" Stroke="#FF000000" 
    		  Label="First Series">
    			<igCA:Series.DataPoints>
    				<igCA:DataPoint Value="5" Label="2002"/>
    				<igCA:DataPoint Value="7" Label="2003"/>
    				<igCA:DataPoint Value="4" Label="2004"/>
    				<igCA:DataPoint Value="3" Label="2005"/>
    				<igCA:DataPoint Value="7" Label="2006"/>
    			</igCA:Series.DataPoints>
    			<igCA:Series.Marker>
    				<igCA:Marker Foreground="#FFFBFBFB" />
    			</igCA:Series.Marker>
    		</igCA:Series>
    	</igCA:XamChart.Series>
    	<igCA:XamChart.Caption>
    		<igCA:Caption FontFamily="Arial" FontSize="40" FontStretch="Expanded" 
    		  FontWeight="Bold" Text="WPF Chart" />
    	</igCA:XamChart.Caption>
    	<igCA:XamChart.Transform3D>
    		<RotateTransform3D>
    			<RotateTransform3D.Rotation>
    				<AxisAngleRotation3D Angle="40.109" 
    				  Axis="0.916,-0.362,-0.173" />
    			</RotateTransform3D.Rotation>
    		</RotateTransform3D>
    	</igCA:XamChart.Transform3D>
    </igCA:XamChart>
    ...
    

    xamchart 3D cylinder chart type, with a title across the top of the chart