<?php //$this->load->view('template/head_front.php');?>

<div id="chartTorta"></div>


<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 

<script>
var nomInstancia = '<?php echo $nombre_instancia_activa ?>';
var totalParticipantes = '<?php echo $total_participantes ?>';
var totalPeso = '<?php echo $total_peso ?>';
</script>


<script>
/**
* Gráficos Torta. 
* 
* @argument data {json} Los datos.
* @argument target {string} el ID del elemento.
* @argument title {string} título del gráfico.
* @argument theme {string} Tema del gráfico. DEFAULT null.
* @type CanvasJS.Chart
*/
function gChartTorta(data, target, title, theme = null) {
    if (!theme) {
        theme = "theme4";
    }
    
    CanvasJS.addColorSet("greenShades",
    [//colorSet Array
        "#4F81BD",
        "#C0504D",                
        ]);
        
        var gChart =  new CanvasJS.Chart(target, {
            height: 450,
            title:{
                text: "Contador de votos"
            },
            subtitles: [{
                text: nomInstancia
            },
            {
                text: "Total Participantes: "+totalParticipantes+" / Total peso voto: "+totalPeso,
                verticalAlign: 'bottom',
                margin:20
                 
            }
            
            ],
            colorSet: "greenShades",
            theme: "light2",
            legendText: "Oranges",
            data: [
                {
                    indexLabelFontSize: 18,
                    showInLegend: true, 
                    legendText: "{legendText}",
                    indexLabelFontColor: "#000",
                    type: 'pie',
                    toolTipContent: "{label}: <strong>#percent%</strong>",
                    dataPoints: data
                }
                ]
            });
            console.log(gChart);
            gChart.render();
        }
        
        var datosGraficosCuorum = <?= $datos ?>;  
        gChartTorta(datosGraficosCuorum, 'chartTorta', ' Gráfico Torta');
        
        </script>
        
        
        