HighCharts not showing anything

StackOverflow https://stackoverflow.com/questions/21978370

Question

I followed the example given, but whenever I add a new data label it never shows as a slice. Now I added all values and data that I want to show but nothing shows up on the browser.

Can someone please recommend anything?

http://jsfiddle.net/LLExL/2466/

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
$(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Risk Mitigation'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Industry Distribution',
                data: [
                    ['Retail',   8.8],
                    ['Construction',       8.4],
                    {
                        name: 'Technology',
                        y: 9.7,
                        sliced: true,
                        selected: true
                    },
                    ['Finance',    8.4],
                    ['Automotive',  8.3],
                    ['Restaurant',   8.3]
                    ['Energy',   7.8]
                    ['Medical',   7.0]
                    ['Marketing',   7.0]
                    ['Manufacturing',   6.9]
                    ['Food Distribution',   6.5]
                    ['Gym / Salons',   4.6]
                    ['Home Services',   4.4]
                    ['Travel',   2.5]
                    ['Other Industries',   1.4]
                ]
            }]
        });
    });


        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

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

    </body>
</html>
Was it helpful?

Solution

At the beginning I advice to familiar with console errors (developers tools) then you wil notice that your syntax is incorrect. You miss about comma at the end of lines in series->data object. Correct form

series: [{
            type: 'pie',
            name: 'Industry Distribution',
            data: [
                ['Retail',   8.8],
                ['Construction',       8.4],
                {
                    name: 'Technology',
                    y: 9.7,
                    sliced: true,
                    selected: true
                },
                ['Finance',    8.4],
                ['Automotive',  8.3],
                ['Restaurant',   8.3],
                ['Energy',   7.8],
                ['Medical',   7.0],
                ['Marketing',   7.0],
                ['Manufacturing',   6.9],
                ['Food Distribution',   6.5],
                ['Gym / Salons',   4.6],
                ['Home Services',   4.4],
                ['Travel',   2.5],
                ['Other Industries',   1.4]
            ]
        }]

http://jsfiddle.net/LLExL/2468/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top