CODEWITHSUNDEEP
javascriptjqueryflot
Phil
Phil

Reputation: 583

Why isn't my JQuery Flot working?

I am trying to use JQuery to plot a trend using Flot but nothing is happening.

<head runat="server">
    <title>Phenomena Tactical Detail</title>
    <link href="../Styles/MainStyle.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.flot.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var data = [[0, 3], [4, 8], [10, 2]];
            var area = $("#plotArea");
            $.plot(area, data);
        });
    </script>
</head>

My div is placed directly into the form:

<div class="inCenter">
    <div id="plotArea" style="width:600px; height:400%"></div>
    <br />
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label>
</div>

I have checked multiple tutorials and the Flot site online for guidance but my div is empty, not even of the size specified.

Edit: I have now made my array values strings but still nothing.

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

Upvotes: 0

Views: 219

Answers (2)

James P
James P

Reputation: 2256

There is nothing wrong with your data array.

Try changing your script to:

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    var data = [[0, 3], [4, 8], [10, 2]];
    var area = "#plotArea";
    $.plot(area, [data]);
});
</script>

I was also getting error in Chome Console (F12 dev tools) about height width of chart:

fixed by changing html to:

<div class="inCenter">
    <div class="demo-container">
        <div id="plotArea" class="demo-placeholder"></div>
    </div>
    <br />
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label>
</div>

Copy over styles from the examples.css in flot download, here for your reference:

.demo-container {
    box-sizing: border-box;
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

Hopefully that should get it working.

Upvotes: 2

Shiffty
Shiffty

Reputation: 2156

New: Seems like I was wrong in another part of the documentation they write:

Note that to simplify the internal logic in Flot both the x and y values must be numbers (even if specifying time series, see below for how to do this). This is a common problem because you might retrieve data from the database and serialize them directly to JSON without noticing the wrong type. If you're getting mysterious errors, double check that you're inputting numbers and not strings.

The real mistake you did seems to be that the data parameter needs to be an array (series) of array of points. So remove the quotes from your data array again and then use the plot function like this:

var data = [[0, 3], [4, 8], [10, 2]];
$.plot(area, [ data ]);

Old: According to the FAQ of flot you have to use strings instead of numbers.

Actually, Flot loves JSON data, you just got the format wrong. Double check that you're not inputting strings instead of numbers, like [["0", "-2.13"], ["5", "4.3"]]. This is most common mistake, and the error might not show up immediately because Javascript can do some conversion automatically.

So you should change your array to this:

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

Upvotes: 0

Related Questions