Highcharts Demo

author(s): Torstein Hønsi

by Mahfuz Ahmed

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/highcharts-3d.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

new Highcharts.Chart({
    			    chart: {
    			    	renderTo: 'container',
    			        type: 'column',options3d: {
    			            enabled: true,
    			            alpha: 11,
    			            beta: 0,
    			            depth: 50,
    			            viewDistance: 25
    			        }
    			    },
    			    credits: false,
    			    colors: ['#15A496', '#1a3e3a'],
    			    title: {
    			        text: 'Last and First Call'
    			    },
    			    subtitle: {
    			        text: ''
    			    },
    			    xAxis: {
    			        categories: [
    			            '2017-10-10',
    			            '2017-10-11',
    			            '2017-10-12',
    			            '2017-10-13',
    			            '2017-10-14',
    			            '2017-10-15',
    			            '2017-10-16'
    			        ],
    			        crosshair: true
    			    },
    			    yAxis: {
    			        min: 10,
    			        title: {
    			            text: 'Duration in Seconds'
    			        }
    			    },
    			    tooltip: {
    			        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    			        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    			            '<td style="padding:0"><b>{point.y} Sec ({point.callType})</b></td></tr>',
    			        footerFormat: '</table>',
    			        shared: true,
    			        useHTML: true
    			    },
    			    plotOptions: {
    			        column: {
    			            pointPadding: 0.2,
    			            borderWidth: 0
    			        }
    			    },
    			    series: [{
    			        name: 'First Call',      
    			        
    			        		 data: [
    			  {
    			    "y": 549,
    			    "callType": "Outgoing"
    			  },
    			  {
    			    "y": 431,
    			    "callType": "Incoming"
    			  },
    			  {
    			    "y": 876,
    			    "callType": "Outgoing"
    			  },
    			  {
    			    "y": 307,
    			    "callType": "Outgoing"
    			  },
   ...