Search results

Chart Integration

You can enable the chart and visualize it against pivot data as a graphical format in pivot view itself. The chart control can be displayed individually for pivot values, and you can change the report dynamically using the field list and grouping bar. More than 15 types of charts are available. This document explains available features and settings of the chart control.

To display the chart control, set the displayOption.view property to chart.

The following sample displays the chart component based on the pivot report bound on it.

tagHelper
DisplayView.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Data binding

You can bind both the local and remote data binding options in the control to feed data. The data property can be assigned either with the instance of DataManager or JavaScript object array collection. For more information refer the topic Data Binding.

Chart settings

You can customize the chart visualization by using the chartSettings property.

By default, the chart can be drawn with the pivot data populated by the first value from value axis. But, you can draw the chart by the desired value field by setting the value property to value field name in the data source.

Multiple axis

You can draw the chart with multiple value fields available in the data source by setting the enableMultiAxis property to true.

In the following sample, the chart will be drawn with both the Sold and Amount value fields available in the data source.

tagHelper
ChartMultiValue.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            enableMultiAxis: true, chartSeries: { type: "Column" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Series customization

You can customize the series of chart using the chartSeries property. The changes in the property can be reflected commonly in all the chart series.

In the following sample, the chart type and border has been changed for all the series.

tagHelper
ChartSeries.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column", enableTooltip: false, border: { color: "#000", width: 2 } }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

You can also customize the chart series individually using the chartSeriesCreated event, which occurs after the chart series has been created. You can customize each series individually by iterating them.

In the following sample, the even series are hidden in the chart.

tagHelper
ChartSeriesEvent.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad" chartSeriesCreated="chartSeriesCreated">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column" }
        };
    }
    function chartSeriesCreated(args) {
        for (let pos:number = 0; pos < args.series.length; pos++) {
            if (pos % 2 == 0) {
                args.series[pos].visible = false;
            }
        }
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Axis customization

You can customize the axis of the chart by using the primaryXAxis and primaryYAxis properties.

In the following sample, title of y-axis and label rotation of x-axis are customized.

tagHelper
ChartAxis.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column" },
            primaryXAxis: { labelRotation: 310 },
            primaryYAxis: { title: "Y axis title" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Chart types

It supports 19 different types of charts as follows:

  • Line
  • Column
  • Area
  • Bar
  • StepArea
  • StackingColumn
  • StackingArea
  • StackingBar
  • StepLine
  • Pareto
  • Bubble
  • Scatter
  • Spline
  • SplineArea
  • StackingColumn100
  • StackingBar100
  • StackingArea100
  • Polar
  • Radar

Line is the default chart type. You can change the chart type by using the type property.

In the following sample, the chart type is set to bar.

tagHelper
ChartType.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Bar" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Legend customization

You can customize the legend by using the legendSettings property. By default, the legend can be visible. You can hide it by using the legendSettings.visible property.

It supports 6 different types of legend shapes as follows:

  • Circle
  • Rectangle
  • VerticalLine
  • Pentagon
  • InvertedTriangle
  • SeriesType
  • Triangle
  • Diamond
  • Cross
  • HorizontalLine

The default legend is SeriesType. It draws the shape based on chart type. You can change the legend shape by using the chartSeries.legendShape property.

You can set the position of legend in the chart using the legendSettings.position property.

The following are the available options to set the legend position:

  • Auto: Places the legend based on area type. This is the default.
  • Top: Displays the legend at the top of the chart.
  • Left: Displays the legend at the left of the chart.
  • Bottom: Displays the legend at the bottom of the chart.
  • Right: Displays the legend at the right of the chart.
  • Custom: Displays the legend based on the given x and y values.

In the following sample, the legend shape and its position can be customized.

tagHelper
Legend.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            legendSettings: { position: "Right" },
            chartSeries: { type: "Column", legendShape: "Pentagon" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

User interaction

Marker and crossHair

You can enable and customize the marker and crosshair using the marker and crosshair properties, respectively.

You can enable and customize the crosshair tooltip for axes using the crosshairTooltip property.

In the following sample, the marker and crosshair can be enabled and customized.

tagHelper
Marker.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            crosshair: { enable: true },
            chartSeries: {
                type: "Line",
                marker: { fill: "#EEE", height: 10, width: 10, shape: "Pentagon", visible: true }
            },
            primaryXAxis: { crosshairTooltip: { enable: true, fill: "#ff0000" } },
            primaryYAxis: { crosshairTooltip: { enable: true, fill: "#0000FF" } }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Zooming and Panning

You can customize the zooming and panning options using the zoomSettings property.

It supports four types of zooming, which can be set as follows:

  • enablePinchZooming
  • enableSelectionZooming
  • enableDeferredZooming
  • enableMouseWheelZooming

The following are the three types of modes for zooming the chart:

  • x: Chart can be zoomed horizontally.
  • y: Chart can be zoomed vertically.
  • x,y: Chart can be zoomed both vertically and horizontally.

The zooming mode can be set using the mode property.

By default, if the chart is zoomed, a toolbar displays options such as Zoom, ZoomIn, ZoomOut, Pan, and Reset. You can set the desired option by using the toolbarItems property.

In the following sample, all the four types of zooming are enabled with toolbar options.

tagHelper
Zooming.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false)
.FormatSettings(formatsettings =>
{
    formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
}).Rows(rows =>
{
    rows.Name("Country").Add(); rows.Name("Products").Add();
}).Columns(columns =>
{
    columns.Name("Year").Caption("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
    values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).Load("onLoad").DisplayOption( new PivotViewDisplayOption { View="Chart" }).Render()

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: {
                type: 'Column'
            },
            zoomSettings: {
                enableDeferredZooming: true,
                enableMouseWheelZooming: true,
                enablePinchZooming: true,
                enableSelectionZooming: true
            }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Tooltip

By default, the tooltip is enabled. You can customize it by using the tooltip property.

In the following sample, the default appearance of tooltip can be modified.

tagHelper
ChartTooltip.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: {
                type: "Column"
            },
            tooltip: {
                enableMarker: true,
                textStyle: { color: "#000" },
                fill: "#FFF",
                opacity: 1,
                border: { color: "#000" }
            }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Grouping bar

You can enable the grouping bar by setting the showGroupingBar property to true. In the grouping bar of chart integration, the drop-down list is placed in value axis instead of buttons. The drop-down list holds the list of value fields bound in data source and it can be switched to draw the chart with the selected value field.

For the multiple axis support, the buttons will be placed in value axis instead of drop-down list.

For more information, refer to the topic Grouping Bar.

In the following sample, the grouping bar is enabled in the chart integration.

tagHelper
<ejs-pivotview id="PivotGrid" height="300" load="onLoad" showGroupingBar="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column" }
        };
    }
</script>

Field list

You can enable both Fixed and Popup modes of field list options in the chart integration. So, you can customize the report dynamically and view the result in chart. For more information, refer to the topic Field List.

In the following sample, the Popup mode of field list is enabled in the chart integration.

tagHelper
ChartFieldList.cs
<ejs-pivotview id="PivotGrid" height="300" load="onLoad" showFieldList="true">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: { type: "Column" }
        };
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Export and Print

The chart can be exported using the chartExport method which holds the parameters export type, file name, PDF orientation, width, and height.

There are four types of exporting options as follows:

  • PNG
  • JPEG
  • SVG and
  • PDF

You can print the chart using the printChart method.

In the following sample, exporting and printing can be triggered by the Export and Print external buttons, respectively.

tagHelper
Export.cs
<ejs-button id="chartexport" content="Export" isPrimary="true"></ejs-button>
<ejs-button id="chartprint" content="Print" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" load="onLoad">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
    <e-displayOption view="Chart"></e-displayOption>    
</ejs-pivotview>

<script>
    var pivotGridObj;
    function onLoad(args) {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartSettings = {
            chartSeries: {
                type: "Column"
            }
        };
    }
    document.getElementById("chartexport").onclick = function () {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.chartExport("PNG", "result");
    }
    document.getElementById("chartprint").onclick = function () {
        pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
        pivotGridObj.printChart();
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}