Highcharts Pie Chart

A pie chart drawn with Highcharts with different data formats

by wergeld

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>JS Visualization Tester with Highcharts</title>
</head>

<body>
<button style="position:absolute; z-index:99" type="button" onclick="call_renderCore()">Call renderCore</button>

    <div id="js_chart"></div>
    
    <script type="text/javascript">
      function call_renderCore()
        {

            var sfdata =
                {
                
                  //"columns": ["Sales (Total)", "Marketing (Total)", "Development (Total)", "Customer Support (Total)", "IT (Total)", "Administration (Total)"], 
                  /* comment out the 'columns' above and uncomment 'columns' below */
                
                      "columns": [
                         "count([lastcontact])",
                         "First([lastcontact])"
                     ], 
                     
                     /* uncomment above and comment below */



//"data": [{"items": [93000, 58000, 102000, 66000, 43000, 24000], "hints": {"index": 0}}]

/* comment out the 'data' above and uncomment 'data' below */

                     "data": [
                        {
                            "items": [
                                131,
                                "3 – 6 months"
                            ],
                            "hints": {
                                "index": 0
                            }
                        },
                        {
                            "items": [
                                78,
                                "6 months – 1 year"
                            ],
                            "hints": {
                                "index": 1
                            }
                        },
     ...

JavaScript

var chart;      // Global chart object used to determine whether Highcharts has been intialized
        var color = null;
        var pie = null;
        var svg = null;
        var path = null;

        Highcharts.getOptions().plotOptions.pie.colors = (function () {
            var colors = [],
                //   base = Highcharts.getOptions().colors[0],
                base = '#d704ea',
                i;

            for (i = 0; i < 10; i += 1) {
                // Start out with a darkened base color (negative brighten), and end
                // up with a much brighter color
                colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
            }
            return colors;
        }());

        //
        // Main Drawing Method
        //

        function renderCore(sfdata)
        {
            if (resizing) {
                return;
            }

            // Extract the columns
            var columns = sfdata.columns;
            columns.shift();

            // Extract the data array section
            var chartdata = sfdata.data;

            // count the marked rows in the data set, needed later for marking rendering logic
            var markedRows = 0;
            for (var i = 0; i < chartdata.length; i++)
            {
                if (chartdata[i].hints.marked)
                {
                    markedRows = markedRows + 1;
                }
            }

            var width = window.innerWidth;
            var height = window.innerHeight;
            var radius = Math.min(width, height) / 2;

            if ( !chart )
            {
                $('#js_chart').highcharts({

                    chart: {
                        plotBackgroundColor: '#f1f2f2',
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },

                    title: {
                        text: 'Pie',
                    },

            ...