3D Visualization in JQuery PivotChart widget

The pivot chart control allows you to view the data in a 3D view. The following are the chart types that are supported:

  • Bar
  • Column
  • Stacking bar
  • Stacking column
  • Pie

3D column chart

The 3D column chart is rendered by specifying the chart type as “Column” in the “type” enumeration property of commonSeriesOptions and setting the enable3D property to “true”.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            commonSeriesOptions:
            {
                //Setting chart type to column
                type: ej.PivotChart.ChartTypes.Column
            }
        });

    JavaScript column chart control rendered in 3D

    3D bar chart

    The 3D bar chart is rendered by specifying the chart type as “Bar” in the “type” enumeration property of commonSeriesOptions and setting the enable3D property to “true”.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            commonSeriesOptions:
            {
                //Setting chart type to bar
                type: ej.PivotChart.ChartTypes.Bar
            }
        });

    JavaScript bar chart control rendered in 3D

    3D stacking bar chart

    The 3D stacking bar chart is rendered by specifying the chart type as “Stacking Bar” in the “type” enumeration property of commonSeriesOptions and setting the enable3D property to “true”.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            commonSeriesOptions:
            {
                //Setting chart type to stacking bar
                type: ej.PivotChart.ChartTypes.StackingBar
            }
        });

    JavaScript stacking bar chart control rendered in 3D

    3D stacking column chart

    The 3D stacking column chart is rendered by specifying the chart type as “Stacking Column” in the “type” enumeration property of commonSeriesOptions and setting the enable3D property to “true”.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            commonSeriesOptions:
            {
                //Setting chart type to stacking column
                type: ej.PivotChart.ChartTypes.StackingColumn
            }
        });

    JavaScript stacking column chart control rendered in 3D

    3D pie chart

    Th 3D pie chart is rendered by specifying the chart type as “Pie” in the “type” enumeration property of commonSeriesOptions and setting the enable3D property to “true”.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            commonSeriesOptions:
            {
                //Setting chart type to pie
                type: ej.PivotChart.ChartTypes.Pie
            }
        });

    JavaScript pie chart control rendered in 3D

    Rotating 3D chart

    You can rotate the 3D chart towards left or right by setting an appropriate angle value to the rotation property. The direction of the chart display depends on the positive or negative angle value.

  • javascript
  • $("#PivotChart1").ejPivotChart(
        {
            .....
            .....
            //Enable 3D Chart
            enable3D: true,
            //Rotates the 3D Chart
            rotation: 40
        });

    JavaScript pivot chart control with 3D rotation