CODEWITHSUNDEEP
jquerycssflot
Folker
Folker

Reputation: 41

jQuery Flot Pie Chart Doesn't Show

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:

enter image description here

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

Can you help me please?

Thanks!

Upvotes: 0

Views: 1086

Answers (2)

hungerstar
hungerstar

Reputation: 21725

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
} )();

Upvotes: 2

mechenbier
mechenbier

Reputation: 3067

I don't see that you're including jquery.flot.pie.js. If you inspect the source of Flot's pie chart example, you'll see that you need to include the pie chart flot plugin. Make sure you have the jquery.flot.pie.js file located with your other flot javascript files and add the line below after the jquery.flot.js script tag in your HTML header.

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

Upvotes: 0

Related Questions