Trouble showing results with pie highchart

Question

I'm totally new to Highcharts and I made two types of them: spline and pie. They now look like this:

And this:

The problem I have can be seen immediately. Since I have two buttons on which user can determine how he wants his chart to appear:

I succeed to update chart type like so:

$('#pie').click(function(){
            if($('#pie').hasClass('active')!=true){
                $('#spline').removeClass('active');
                $('#pie').addClass('active');
                $('#curve_chart').highcharts().series[0].update({
                    type: "pie"
                });
            }
        });

But I don't want this pie chart to appear like this. I want, like in spline type that values represent each day, not Notiflow:35 etc. This is code responsible for charts:

var type='';
        $('#spline').click(function(){
            if($('#spline').hasClass('active')!=true){
                $('#pie').removeClass('active');
                $('#spline').addClass('active');
                $('#curve_chart').highcharts().series[0].update({
                    type: "spline"
                });
            }
        });

        $('#pie').click(function(){
            if($('#pie').hasClass('active')!=true){
                $('#spline').removeClass('active');
                $('#pie').addClass('active');
                $('#curve_chart').highcharts().series[0].update({
                    type: "pie"
                });
            }
        });

        $(function () {
            if($('#spline').hasClass('active')){
             type='spline';
            }else{
            type='pie';
        }
        $('#curve_chart').highcharts({
            chart: {
                type: type
                    },
            title: {
                text: 'Click through rate:'
                },
            xAxis: {
            categories: [<?php foreach ($percentagePerDay as $key => $value) {
            if ($value != $last) {
            echo substr($key, -2);
            echo ',';
            } else {
            echo substr($key, -2);
            }
            }?>]//key
            },
        yAxis: {
            title: {
            text: 'Percentage'
            }
            },
        series: [{
        name: '<?= $name ?>',
        data: [<?php foreach ($percentagePerDay as $key => $value) {
        if ($value != $last) {
        echo $value;
        echo ',';
        } else {
        echo $value;
        }
        }?>]//value
        }]
        });

        });

I tried to make pie chart to represent hard coded values like so:

$('#pie').click(function(){
        if($('#pie').hasClass('active')!=true){
            $('#spline').removeClass('active');
            $('#pie').addClass('active');
            $('#curve_chart').highcharts().series[0].update({
                type: "pie"
                series:[{
                data:[['11',35],['12',15],['13',30],['14',20]]
                }]
            });
        }
    });
            }
        });

But pie highchart didn't changed. What more do I need to add to this line(except of type):

 $('#curve_chart').highcharts().series[0].update({});

in order for my pie to represent values for each day within range like spline does and to remove those 'slice' moments?

UPDATE: So, this is how I want my pie to look:

You will probably going to need to use keys or set data points as object with named properties. I still do not get how should the pie chart look like - maybe you could post an image of required chart? — Kacper Madej
@Kacper Madej I updated my question, so now you can see how my pie should look — Ognj3n

Kacper Madej Kacper Madej · Accepted Answer · 2016-04-21T09:11:08

When updating series o not pass series in object - only series properties, like name, type, data, etc. To have dataLabels like in the image you only will need to set names for points, Highcharts will make it work.

Example: http://jsfiddle.net/tvd6faf9/

Trouble showing results with pie highchart

1 Answers