Cannot create legend with ChartJs

1
votes

I'm using ChartJs and all works fine.

I now need to add a legend and ran into an issue! The legend never shows.

I have seen How can labels/legends be added for all chart types in chart.js (chartjs.org)? and can confirm that I have the current latest version (version 1.0.2)

I ran Chrome dev tools and realised that the reason the legend doesn't show is because an exception is being thrown (pie chart still shows). The error message is

Uncaught ReferenceError: datasets is not defined

This is the code I'm using for my PieChart

//data copied direct from the ChartJs docs
data = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
}
    ];

    
    ctx = $("#adwordsPieChart").get(0).getContext("2d");
    var myPieChart = new Chart(ctx).Pie(data, chartOptions);
    var legendAdwordsVsOrganic = myPieChart.generateLegend();
    
    document.getElementById("adwordVsOrganicLegend").innerHTML = legendAdwordsVsOrganic;

I checked the same issue occurs in IE and Chrome, and it does.

I don't know how to fix this. I have followed the instructions (I think). Any ideas?

JSFiddle

4
javascript
@MaxZoom, really??? You have voted to close this question as a duplicate... I cited the link you feel is a duplicate in my question? Do you really think, that after I read that question, and then added a link to it myself that I'd still post it knowing it's a duplicate? - MyDaftQuestions
can you add a jsfiddle? - Seth T
Try to empty cache and hard reload on your page. I tried your code and it works fine. Only thing I changed was that I removed chartOptions - ThePavolC
@ThePavolC, I also tried removing ChartOptions, the same issue persists.... Hmmmm, I wonder if this problem is a conflict of code somewhere.... - MyDaftQuestions
@ThePavolC, no it doesn't work - you can see the graph, but not the legend - MyDaftQuestions

4 Answers

5
votes

Problem is in legendTemplate. Replace all datasets with segments.

Like this:

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

Jsfiddle

1
votes

Maybe you can work with this. I've also forked your jsfiddle here: http://jsfiddle.net/3o2okssv/

<!DOCTYPE html>
    <html>
    <head>
    <script type='text/javascript' src="jquery-1.11.3.min.js"></script>
    <script type='text/javascript' src="Chart.min.js"></script>
    <script>
        $(function() {
            data = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            }
            ];

            chartOptions = [{
                //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 : 2,

                //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 : "easeOutBounce",

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

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

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

            }];

            ctx = $("#adwordsPieChart").get(0).getContext("2d");
            var myPieChart = new Chart(ctx).Pie(data, chartOptions);
            var legend = myPieChart.generateLegend();
            $('#legend').append(legend);
        });    
    </script>
    </head>

    <body>
        <canvas id="adwordsPieChart" width="640" height="480"></canvas>
        <br />
        <div id="legend"></canvas>
    </body>
    </html>
1
votes

And the answer is a combination of SethT and ThePavolC replies

The query has to be in onload ($(function(){javascript code});), and I needed to update from the variable dataset with segments.

1
votes

This may be overly simplistic, because it doesn't deal with customizing the legend at all, but if you just delete the template from your custom options you'll get the global template.

Now I'll go figure out how to customize it, but that's what got it showing for me.