# Using FlexPivotChart with FlexGrid and FlexChart

This topic covers a tutorial or walkthrough showing how you can use flexpivotchart withflexchart and flexgrid.

## Content

The new **FlexPivotChart** control lets you use the **FlexChart** control within **C1FlexPivot** for impeccable data analysis. In this walkthrough, we utilize a scenario where a user wants to analyze the sales and expense data of products across different countries. The [FlexPivotPage](/componentone/api/win/online-flexpivot/dotnet-api/C1.Win.FlexPivot.10/C1.Win.FlexPivot.FlexPivotPage.html) and [FlexPivotChart](/componentone/api/win/online-flexpivot/dotnet-api/C1.Win.FlexPivot.10/C1.Win.FlexPivot.FlexPivotChart.html) classes are used in this application along with **FlexChart** and **FlexGrid** controls to produce the desired visual data analysis.

With the help of this walkthrough, you will learn how to:

1. Show multiple Series and secondary axis in FlexPivotChart element .
2. Modify tooltips for FlexPivotChart element.
3. Show details for selected data point in the FlexPivotChart using FlexGrid control.

![flexpivot_with_flexgrid](https://cdn.mescius.io/document-site-files/images/78f24d1c-0e57-452f-87a1-d318e186587a/images/walkthrough-flexpivotchart-flexgrid.gif)

### Show multiple Series and secondary axis in FlexPivotChart element

Initialize the **FlexPivotPage** and **FlexGrid** controls.

```csharp
// Initialize Form
flexPivotPage = new FlexPivotPage();
flexPivotPage.Height = 440;
flexPivotPage.Dock = DockStyle.Top;
this.Controls.Add(flexPivotPage);
lbl = new Label() {
    Text = "Selected Country details", TextAlign = ContentAlignment.MiddleCenter,
    Dock = DockStyle.Bottom, Visible =false };
this.Controls.Add(lbl);
detailGrid = new C1FlexGrid();
detailGrid.Dock = DockStyle.Bottom;
detailGrid.Height = 60;
detailGrid.Visible = false;
this.Controls.Add(detailGrid);
selectedCountryData = new ObservableCollection<Country>();
detailGrid.DataSource = selectedCountryData;
```

Add Data Source, RowFields and ValueFields to the **FlexPivotPage** control. Set the Chart type for **FlexPivotChart** control and get the series collection for **FlexChart** control.

```csharp
// sets FlexPivot DataSource and other fields
flexPivotPage.DataSource = GetCountrySales();
flexPivotPage.FlexPivotEngine.ValueFields.Add("Sales");
flexPivotPage.FlexPivotEngine.ValueFields.Add("Expenses");
flexPivotPage.FlexPivotEngine.RowFields.Add("Name");
// Define FlexPivotChart settings for handling chart's series, tooltips and data points' details

// sets FlexPivotChart type
flexPivotPage.FlexPivotChart.ChartType = ChartType.Line;
// sets whether to place series above/side-by-side
flexPivotPage.FlexPivotChart.Stacked = false;
// gets FlexChart component from FlexPivot's new API FlexPivotChart
var flexChart = flexPivotPage.FlexPivotChart.Chart as FlexChart;
if(flexChart!=null)
{
    // gets FlexChart's Series collection
    var seriesColl = flexChart.Series as ObservableCollection<Series>;
    seriesColl.CollectionChanged += SeriesColl_CollectionChanged;
}
// enables data point selection in FlexChart (to get associated details for its data point)
flexChart.SelectionMode = C1.Chart.ChartSelectionMode.Point;
flexChart.SelectionChanged += FlexChart_SelectionChanged;
// handles FlexChart's mouse move event (to modify its ToolTip)
flexChart.MouseMove += Chart_MouseMove;
```

In this walkthrough, we have added two series of charts, 'Sales' and 'Expenses'. The Sales series is a Column chart type and the Expenses series is Line chart type. There are two axes in this series collection, one plotted across the left and the other towards the right. A secondary chart axis is useful when the user wants to show the values for more than one data series. The secondary axis is apt in this scenario as we have used a combination of column and line charts.

```csharp
// Modify individual FlexChart Series
private void SeriesColl_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{ 
    // handle only if a Series is added to FlexChart
    if (e.Action== System.Collections.Specialized.NotifyCollectionChangedAction.Add)
    {
        var series = e.NewItems[e.NewItems.Count - 1] as Series;
        if (series == null)
            return;
        switch(series.Name)
        {
            case "Sales":
                series.ChartType = C1.Chart.ChartType.Column;
                series.AxisY = new Axis()
                {
                    AxisLine = false,
                    Position = C1.Chart.Position.Left,
                    Title = "Sales"
                };
                break;
            case "Expenses":
                series.ChartType = C1.Chart.ChartType.LineSymbols;
                series.AxisY = new Axis()
                {
                    AxisLine = false,
                    Position = C1.Chart.Position.Right,
                    Title = "Expenses"
                };
                break;
        }
    }
    else
    {
        // hides all controls except FlexPivotPage
        detailGrid.Visible = false;
        lbl.Visible = false;
    }
}   
```

### Modify tooltips for FlexPivotChart element

If a user wants to show information about country-specific sales or expenses, it can be set using the **ToolTip** property of the **FlexChartBase** class, which provides information about the 'Country' (AxisX label) and data specific to the series 'Sales' or 'Expenses'. The information about a specific data point on a Series chart is provided using the **HitTest** method of **FlexChart** class.

```csharp
// Modify FlexChart ToolTips
private void Chart_MouseMove(object sender, MouseEventArgs e)
{
   var chart = sender as FlexChart;
   // gets element under mouse pointer
    var hitTestInfo = chart.HitTest(e.Location);
   if (hitTestInfo == null || hitTestInfo.Item == null)
       return;
   if (hitTestInfo.Item != null && hitTestInfo.Distance <= 3)
   {
       // gets country name (AxisX label) specific to the mouse pointer
        var country = ((List<string>)chart.AxisX.DataSource)[hitTestInfo.PointIndex];
       // modify FlexChart tooltip value/content
        chart.ToolTip.Content = String.Format("Country: {0}\n{1}: {2}", country, hitTestInfo.Series.Name, hitTestInfo.Y);
   }
}
```

### Show details for selected data point in the FlexPivotChart using FlexGrid control

In the application, the user can select a chart element, and get the details for the selected element in the FlexGrid. The **ChartSelectionMode** enumeration enables data point selection in FlexChart to get the associated details for each data point.

```csharp
// Get Details For Selected FlexChart Element
private void FlexChart_SelectionChanged(object sender, EventArgs e)
{
    var chart = sender as FlexChart;
    if (chart != null && chart.SelectedIndex > -1)
    {
        // enables controls for showing selected element details
        detailGrid.Visible = true;
        lbl.Visible = true;
        // get details for selected element
        Country selectedCountry = (((chart.Parent as FlexPivotChart).DataSource as C1FlexPivotPanel).DataSource as List<Country>).OrderBy(c => c.Name).ToList()[chart.SelectedIndex] as Country;
        if(selectedCountry!=null)
        {
            selectedCountryData.Clear();
            selectedCountryData.Add(selectedCountry);
            detailGrid.DataSource = selectedCountryData.ToList();
        }
    }
    else
    {
        // hides all controls except FlexPivotPage
        detailGrid.Visible = false;
        lbl.Visible = false;
    }
}
```