jQuery Flot Pie Chart Doesn't Show

Question

I'm trying to make a pie chart with Flot but my pie chart won't show up.

Here's my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  <link rel="stylesheet" type="text/css" href="style.css">
<head>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.flot.js"></script>
    <script type="text/javascript">
    $( function() {

     var data = [
    {label: "Pause", data:150},
    {label: "No Pause", data:100},
    {label: "Sleeping", data:250}
];
var options = {
    series: {
        pie: {show: true}
    },
    legend: {
        show: false
    }
};

$.plot($("#pie-placeholder"), data, options);


    });
    </script>
</head>
<body>
<div id="pie-placeholder" class="flot"></div>
</body>
</html>

And my css file:

.flot {
    width: 500px;
    height: 500px;
}

Nothing really hard but the pie chart won't appear.

Here is what my chart looks like now:

I don't have any error so I don't understand what's wrong.

Can you help me please?

Thanks!

hungerstar hungerstar · Accepted Answer · 2016-05-24T14:18:26

You need to include the pie plugin.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.pie.js"></script>

Demo JSFiddle.

I see you're wrapping your code in

$( function () {
    // your code
} );

though I'm not sure why you're passing jQuery an anonymous function. Though the code will still run I'd remove it or if you were trying to do an IIFE (immediately invoked function expression) I'd do the following:

( function () {
    // your code
} )();

jQuery Flot Pie Chart Doesn't Show

2 Answers