analytics.phtml

<script>
    //<![CDATA[
    var options = {
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke : true,

        //String - The colour of each segment stroke
        segmentStrokeColor : "#fff",

        //Number - The width of each segment stroke
        segmentStrokeWidth : 1,

        //Number - The percentage of the chart that we cut out of the middle
        percentageInnerCutout : 50, // This is 0 for Pie charts

        //Number - Amount of animation steps
        animationSteps : 100,

        //String - Animation easing effect
        animationEasing : "easeOutQuart",

        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate : true,

        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale : false,

        tooltipTemplate: "<%= value %>", // override in loop

        //String - A legend template OVERRIDE IN LOOP
        legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\" class=\"picto-<%=name.toLowerCase()%>-legend\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    };

    function randomColor(brightness){
        function randomChannel(brightness){
            var r = 255-brightness;
            var n = 0|((Math.random() * r) + brightness);
            var s = n.toString(16);
            return (s.length==1) ? '0'+s : s;
        }
        return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
    }
    function generateObjectDatas(dataBrut){
        var datas = [];

        for(var key in dataBrut){
            var data = {};
            data.color = randomColor(50);
            data.highlight = '#9e9e9e';
            data.value = dataBrut[key];
            data.label = key;
            datas.push(data);
        }
        return datas;
    }
    //]]>
</script>
<?php foreach ($this->getList() as $type => $info) : ?>
    <?php $sumCurrentType = array_sum($this->getResume($type)); ?>
    <div id="container-myChart-<?php echo $type; ?>" class="debug-container-analytics">
        <h4><?php echo $info['label']; ?></h4>
        <div class="container-myChart-total"><?php echo $sumCurrentType; ?><?php echo $info['unit']; ?></div>
        <canvas id="myChart-<?php echo $type; ?>" width="250" height="250"></canvas>
    </div>
    <script>
        //<![CDATA[
        var ctx_<?php echo $type; ?> = document.getElementById("myChart-<?php echo $type; ?>").getContext("2d");
        var sumCurrentType = <?php echo $sumCurrentType ?>;

        options.tooltipTemplate = "<%= value %> <?php echo $info['unit']; ?>";
        options.legendTemplate = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\" class=\"picto-<%=name.toLowerCase()%>-legend\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%> - <%= Math.round(segments[i].value*1000/sumCurrentType)/10 %>%</li><%}%> </ul>";

        var myChart_<?php echo $type; ?> = new Chart(ctx_<?php echo $type; ?>).Doughnut(generateObjectDatas(<?php echo json_encode($this->getResume($type)); ?>),options);

        var legend_<?php echo $type; ?> = myChart_<?php echo $type; ?>.generateLegend();

        $('container-myChart-<?php echo $type; ?>').insert(legend_<?php echo $type; ?>);
        //]]>
    </script>
<?php endforeach; ?>