Highcharts - SPLessons

Highcharts 3D Charts

Chapter 13

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts 3D Charts

Highcharts 3D Charts

shape Introduction

Highcharts 3D Charts module that provides 3D support to charts. Currently, Highcharts 3D charts allows the users to create 3D column charts, 3D pie charts and 3D scatter charts. 3D charts are used to create 3-Dimensional charts. This chapter explains about Highcharts 3D Charts types and how to create different 3D charts in Highcharts.

3D charts

shape Description

Highcharts 3D Charts allows the user to create limited 3 Dimensional charts. One should add additional 3 Dimensional plugin to the header section of html page to create 3D charts. Add the following plugin after highcharts.js.

<script src=”/http://code.highcharts.com/highcharts-3d.js”></script>

Configuration options

shape Description

Usually, the 3D chart configuration is done in the chart section of the options by loading the 3D module. The charts get altered only when they are specifically set up to 3D. Different chart types have specific settings and can be found in plotOptions. The below snippet code demonstrates the 3D options in Highcharts.

chart:{
          ……..
          options3d:{
                   enabled: ‘boolean value’,
                   alpha:  ‘numeric value’,
                   beta: ‘numeric value’,
                   depth: ‘numeric value’,
                   viewDistance: ‘numeric value’,
           }
};

The 3D options given in the above code are important for all the 3D charts. Highcharts allow the user to create 3 panes, known as frames, which can be configured separately in chart.options.3d.frame. The snippet code below demonstrates the 3D frame options:

frame: {                    
        bottom: {
              size: “numeric value’,
              color: ‘color value’
         },
         side: {
                 size: ‘numeric value’,
                 color: ‘color value’
          },
          back: {
                 size: ‘numeric value’,
                 color: ‘color value’
           }
},

Types of 3D charts

shape Description

Highcharts currently support 3 Dimensions for the following chart types:

3D column charts

shape Description

Highcharts allow the user to create column charts with 3 dimensions. By default, the depth for column charts is 25. One can change the depth by changing the plotOptions.

shape Example

Below example demonstrates how to create a column chart with 3 dimensions using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D column chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script>   
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<div id="sliders">
    <table>
        <tr>
        	<td>Alpha Angle</td>
        	<td><input id="alpha" type="range" min="0" max="50" value="15"/><span id="alpha-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Beta Angle</td>
        	<td><input id="beta" type="range" min="0" max="50" value="15"/><span id="beta-value" class="value"></span></td>
       </tr>
        <tr>
        	<td>Depth Angle</td>
        	<td><input id="depth" type="range" min="20" max="100" value="50"/><span id="depth-value" class="value"></span></td>
        </tr>
   </table>
</div>
<script language="JavaScript">
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: '3D column charts'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    function showValues() {
        $('#alpha-value').html(chart.options.chart.options3d.alpha);
        $('#beta-value').html(chart.options.chart.options3d.beta);
        $('#depth-value').html(chart.options.chart.options3d.depth);
    }
    $('#sliders input').on('input change', function () {
        chart.options.chart.options3d[this.id] = this.value;
        showValues();
        chart.redraw(false);
    });
    showValues();
});
</script>
</body>
</html>

3D column chart with grouping and stacking

shape Description

The normal column chart with grouping and stacking can be represented with 3 dimensions in Highcharts.

shape Example

Below example demonstrates how to represent a column chart in 3D with grouping and stacking using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D column grouping and stacking chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script>   
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            }
        },
        title: {
            text: 'Product sales by region'
        },

        xAxis: {
            categories: ['Hyderabad', 'Chennai', 'Bangalore', 'Delhi', 'Mumbai']
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Sales'
            }
        },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                depth: 40
            }
        },
        series: [{
            name: 'Cricket bats',
            data: [20, 15, 25, 35, 40],
            stack: 'Outdoor games'
        }, {
            name: 'Rackets',
            data: [15, 20, 15, 10, 30],
            stack: 'Outdoor games'
        }, {
            name: 'carroms',
            data: [45, 30, 20, 50, 40],
            stack: 'Indoor games'
        }, {
            name: 'chess',
            data: [25, 30, 15, 40, 35],
            stack: 'Indoor games'
        }]
    });
});
</script>
</body>
</html>

3D column chart with 0 and null values

shape Description

A normal column chart can be represented with 0 and null values in 3 dimension module in Highcharts by setting the plotOptions.

shape Example

Below example demonstrates how to create a column chart with 0 and null values and representing it in 3D module using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D column with zero and null values</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script>   
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: '3D column chart with 0 and null values'
        },
        subtitle: {
            text: 'Notice the difference between a 0 value and a null point'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: Highcharts.getOptions().lang.shortMonths
        },
        yAxis: {
            title: {
                text: null
            }
        },
        series: [{
            name: 'Sales',
            data: [49.9, 71.5, 106.4, null, 144.0, 176.0, 135.6, 0, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});
</script>
</body>
</html>

3D pie chart

shape Description

Pie charts can be represented in 3D module in Highcharts by setting the depth property in plotOptions. The depth property defines the chart thickness.

shape Example

Below example demonstrates how to create a pie chart and represents it in 3D module using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D pie chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Social Login Preference 2015'
        },
        tooltip: {
            pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Social Logins',
            data: [
                ['Facebook', 44],
                ['Twitter', 5],
                {
                    name: 'Linkedin',
                    y: 3,
                    sliced: true,
                    selected: true
                },
                ['Yahoo', 5],
                ['Google plus', 37],
                ['Others', 4]
            ]
        }]
    });
});
</script>
</body>
</html>

3D scatter chart

shape Description

The scatter charts can be represented in 3 dimensional module similar to normal scatter charts. The 3D plugin uses X, Y and Z parameters to place the data points in 3 dimensions.

shape Example

Below example demonstrates how to create a scatter chart and represents it in 3 dimensions module using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D scatter chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script>  
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            margin: 100,
            type: 'scatter',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 5,

                frame: {
                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                }
            }
        },
        title: {
            text: '3D scatter chart'
        },
        subtitle: {
            text: 'Click and drag the plot area to rotate in space'
        },
        plotOptions: {
            scatter: {
                width: 10,
                height: 10,
                depth: 10
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            title: null
        },
        xAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 1
        },
        zAxis: {
            min: 0,
            max: 10,
            showFirstLabel: false
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Reading',
            colorByPoint: true,
            data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
        }]
    });
    $(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
        eStart = chart.pointer.normalize(eStart);

        var posX = eStart.pageX,
            posY = eStart.pageY,
            alpha = chart.options.chart.options3d.alpha,
            beta = chart.options.chart.options3d.beta,
            newAlpha,
            newBeta,
            sensitivity = 5; // lower is more sensitive
        $(document).bind({
            'mousemove.hc touchdrag.hc': function (e) {
                // Run beta
                newBeta = beta + (posX - e.pageX) / sensitivity;
                chart.options.chart.options3d.beta = newBeta;

                // Run alpha
                newAlpha = alpha + (e.pageY - posY) / sensitivity;
                chart.options.chart.options3d.alpha = newAlpha;

                chart.redraw(false);
            },
            'mouseup touchend': function () {
                $(document).unbind('.hc');
            }
        });
    });
});
</script>
</body>
</html>

3D donut chart

shape Description

A normal donut chart can be represented in 3 dimensional module in Highcharts by setting the depth property in plotOptions.

shape Example

Below example demonstrates how to create a donut chart and represents it in 3 dimensions module using the CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>3D donut chart</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-3d.js"></script>   
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'Social Login Preference 2015'
        },
        subtitle: {
            text: '3D donut'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'Social Login',
            data: [
                ['Facebook', 44],
                ['Twitter', 5],
                ['Linkedin', 3],
                ['Yahoo', 5],
                ['Google plus', 37],
                ['Others', 4]
            ]
        }]
    });
});
</script>
</body>
</html>

Summary

shape Key Points

  • Highcharts 3D Charts – Currently, Highcharts provide limited 3 dimensional support to charts.
  • Usually, the configuration for 3D chart is done in the chart section.
  • Similar to normal column charts, the 3D plugin allows you to display a series of charts.

shape Programming
Tips

  • Add the additional 3D chart plugin module after the highchart.js
  • Give the preferred chart type in the chart.type property
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.