CODEWITHSUNDEEP
javascriptphpcharts
Nithya.K
Nithya.K

Reputation: 501

How to set legend and title for multiple pie charts using chart.js

My php page has multiple dynamic pie charts in which I wish to display legend and title for each using chart.js

Here is my JS code:

    printf( '<script type="text/javascript" src="django/static/js/Chart.min.js"></script>' );
    printf( '<script type="text/javascript" src="extlib/jquery-min.js"></script>' );
    printf( '<script type="text/javascript">' );
    ?>
    function drawPie(canvasId,data){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    $.each(data,function(i,val){
    piedata.push({value:val.count,color:val.color,label:val.status});
    });

    new Chart(ctx).Pie(piedata);}
    <?php
    printf('</script>');

PHP code:

foreach ( $poolArray as $pool ) {//for multiple charts
     $data = statusPool($pool);
     echo '<td style="text-align: center;"><canvas id="pie-canvas-'
          . $canvasId
          . '" width="200" height="200"></canvas>';

     $data3 = json_encode($data, JSON_NUMERIC_CHECK);
     echo '<script type="text/javascript">drawPie('
          . $canvasId
          . ', '
          . $data3
          . ');</script>';
   }

Please suggest me for setting each pie chart a title and legend.

Upvotes: 1

Views: 1739

Answers (1)

David Conneely
David Conneely

Reputation: 936

See http://www.chartjs.org/docs/#advanced-usage-prototype-methods - the generateLegend() method on the new Chart(ctx).Pie(piedata) object will return the HTML for the legend. You can then assign the return value to the innerHTML of some DOM element.

For example, add a <div id="legend"> element next to the <canvas> element to hold the legend's HTML and then do something like:

var pc = new Chart(ctx).Pie(piedata);
document.getElementById("legend").innerHTML = pc.generateLegend();

To add a title to your chart, just put an HTML heading (e.g. an <h3> element) in your HTML. I think Chart.js doesn't provide a title feature of its own.

Upvotes: 1

Related Questions