Showing Summary in a Bar Chart

This post is about how to show the details in a bar chart in WPF.

STEP 1

Install WPF Charting ToolKit

We have to install charting toolkit for our project
     Install WPF Toolkit from this site:

• http://wpf.codeplex.com/releases/view/40535

Add new WPF application in Visual Studio.

If you are not able to view chart controls in Toolbox, right click Toolbox and select Choose Items. Then click on WPF components and select chart controls (the ones mentioned in the title). This will add the controls to your toolbox and you should be able to drag and drop them on the XAML form.

STEP 2

 XAML Coding for Charting tool

  XAML (Extensible Application Markup Language) is a markup language for declarative application programming. If you are interested in knowing more about XAML, please refer to the MSDN documentation athttp://msdn.microsoft.com/en-us/library/ms747122.aspx.

<Grid Height="921">

<chartingToolkit:Chart Height="442" HorizontalAlignment="Left"

                 Margin="39,0,0,130" Name="columnChart" Title=""  

                 VerticalAlignment="Bottom" Width="620">

                <chartingToolkit:ColumnSeries DependentValuePath="Value"

                 IndependentValuePath="Key" ItemsSource="{Binding}" />             

            </chartingToolkit:Chart>

</ Grid>

(in here I am showing Bar Chart as this you can try any type of chart.)
I’m using three attributes. DependentValuePath and IndependentValuePath are related to the Axis of the Chart (i.e. X-axis, Y-axis). “Value” and “Key” as assigned to them respectively - this is because I’m using KeyValuePair<> data type in my data model (which has Key and Value)

STEP 3

Assign data to the model 

  

   in the MainWindow.xaml.cs file, it is pretty straightforward with the way we are assigning data model.

   /// <summary>

        /// Load data to the graph Sample Code

        /// </summary>

        public void Show_Inventory_Chart(string itemCategory)

        {

//Initializing the new key value pair

            List<KeyValuePair<string, double>> InventoryValue = new List<KeyValuePair<string, double>>();

            double itemQuantity = 0;

            try

            {

// In here I assign all values in db to a list (Code base model)

                var itemList = itemService.GetChartItemList(companyId, itemCategory).GroupBy(s => s.ItemId).Select(s =>s.First()).ToList();

                foreach (var item in itemList)

                {

                    itemQuantity = FillChartStockQuantity(item, itemCategory);

                    string itemName = "";

                    string itemId = "";

                    FormatChartItemNames(item, out itemName, out itemId);

// Inserting a value for chart

                    InventoryValue.Add(new KeyValuePair<string, double>((itemId + Environment.NewLine + itemName), itemQuantity));

                    itemQuantity = 0;

                }

            }

            catch (NullReferenceException)

            {

                MessageBox.Show("No Item in Database, Please add item in Administration Section", "No Items", MessageBoxButton.OK, MessageBoxImage.Warning);

            }

            columnChart.Title = itemCategory + " Inventory Summary";

            columnChart.DataContext = InventoryValue;

        }

STEP 4 

Compile and Run

Here you can see the final out put 

Tips And Trics : http://wpf.codeplex.com/wikipage?title=Tips%20%26%20Tricks
Documentation : http://wpf.codeplex.com/wikipage?title=Links%20to%20Documentation