Pie chart options in ZingChart

Question

Right now I'm creating charts with jQuery.

First I used HighCharts to make the charts, but its licence don't allow to use it in non personal projects.

So, looking alternatives I decided use ZingChart but I have some issues with it.

First I want the slices of my chart "closes" automatically when I click on another slice.

With HighCharts this is the behavior . Seems to be an out-of-the-box functionality.

With ZingChart it looks like this: . I searched in its documentation but haven't found how to make it works.

With HighCharts I can click on every slice and it fires a event I used to display a table with data from the slice where I clicked on. With ZingChart I found a way but I think it's not clever and clean.

Here is my ZingChart code.

var dataSeries = [
    {
        text: 'Cantidad de habitaciones sucias',
        values:[Object.keys(${listaDeHabitacionesSucias}).length]
    },

    {
        text: 'Cantidad de habitaciones para repasar',
        values:[Object.keys(${listaDeHabitacionesParaRepasar}).length]
    },

    {
        text: 'Cantidad de habitaciones disponibles',
        values:[Object.keys(${listaDeHabitacionesDisponibles}).length]
    }
];

var configuracion = {
    type:"pie3d",
    title:{
        text:"Estado de las habitaciones"
    },
    plot: {
        tooltip: {
            "text":"%t: %v (%npv%)"
        }
      },
    series: dataSeries
};

zingchart.render({ 
    id : 'chart-container', 
    data : configuracion, 
    height: 400, 
    width: "100%" 
}); 

This is how I "resolved" the onClick event, but I'm not sure if it's the best way (actually, I don't like it).

zingchart.plot_click = function(e) {
    var estadoHabitacion = null;
    switch(e.plotindex) {
        case 0:
            estadoHabitacion = "Sucia";
            break;
        case 1:
            estadoHabitacion = "Para repasar";
            break;
        case 2:
            estadoHabitacion = "Disponible";
            break;
        default:
            break;
     }

    $(".table").show();

    crearTabla(estadoHabitacion);
}

Here I put the HighCharts code. In plotOptions I can manage the onClick event in a way I consider clean. Note I add a field ("estado") in data array wich I used later to draw the table.

Highcharts.chart('chart-container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: 'Estado de las habitaciones'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        $(".table").show();
                        crearTabla(this.options.estado);
                    }
                }
            },           
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Porcentaje',
        data: [
            { name: 'Cantidad de habitaciones sucias', y: ${cantidadDeHabitacionesSucias}, estado: 'Sucia'},
            { name: 'Cantidad de habitaciones para repasar', y: ${cantidadDeHabitacionesParaRepasar}, estado: 'Para repasar'},
            {
                name: 'Cantidad de habitaciones disponibles',
                y: ${cantidadDeHabitacionesDisponibles},
                estado: 'Disponible',
                sliced: true,
                selected: true
            }
        ]
    }]
});

Can you help me please? Thanks in advance.

Greetings!

Answer 1

Finally I found how to animate the slices. The code is the following:

zingchart.plot_click = function(e) {
    var dataSlice = dataSeries[p.plotindex];

    isOpen = (dataSlice.hasOwnProperty('offset-r')) ? (dataSlice['offset-r'] !== 0) : false;

    if(dataSlice) {
        dataSlice['offset-r'] = 0;
    }

    else {
        for(var i = 0 ; i< dataSeries.length; i++) {
            dataSeries[i]['offset-r'] = 0;
        }
        dataSlice['offset-r'] = 20;
    }

    zingchart.exec('chart-container', 'setdata', {
        data : configuration
    });

};

For the slice onClick event II didn't find a better approach. I consider this question closed.