Flot chart does not work on my web server

145 views
Skip to first unread message

Ricardo Falcão

unread,
Apr 26, 2017, 10:07:40 AM4/26/17
to Flot graphs

Hello

I'm having a problem with my web server on raspberry pi. I have these two files( among others) : view_action.php and graph.html.


One of the function of the firs file is to to redirect the user to the file graph.html.


The graph.html is a copy of the realtime example of Flot chart. The files that i have to include on the code: jquery.js, jquery.flot.js and excanvas.min.js are on the same folder as the files above. So, the only thing changed on the graph.html is the path to these 3 files.



Here the graph.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: Real-time updates</title>
<link href="../examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">

$(function() {

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget

    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 2000) {
                updateInterval = 2000;
            }
            $(this).val("" + updateInterval);
        }
    });

    var plot = $.plot("#placeholder", [ getRandomData() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();

    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

</script>
</head>
<body>

<div id="header">
    <h2>Real-time updates</h2>
</div>

<div id="content">

    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>

    <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>

    <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>

</div>

<div id="footer">
    Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
</div>


When the view_action.php redirect to graph.html it only appear the title and the info of the body. No graph. I think my webserver it isnt running javascript codes. What is the problem?


Thanks, 

Ricardo

Pappas Xristos

unread,
Apr 30, 2017, 7:31:22 PM4/30/17
to flot-...@googlegroups.com
Christ is risen

That's the errors from the console.

GET file:///C:/Users/%CE%A7%CF%81%CE%AE%CF%83%CF%84%CE%BF%CF%82/examples.css net::ERR_FILE_NOT_FOUND

jquery-3.2.1.min.js:2 Uncaught Error: Invalid dimensions for plot, width = 1008, height = 0
    at Canvas.resize (jquery.flot.js:135)
    at new Canvas (jquery.flot.js:114)
    at setupCanvases (jquery.flot.js:1313)
    at new Plot (jquery.flot.js:707)
    at Function.$.plot (jquery.flot.js:3146)
    at HTMLDocument.<anonymous> (index.html:67)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

Hope that will help you!

--

---
You received this message because you are subscribed to the Google Groups "Flot graphs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flot-graphs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ced

unread,
May 3, 2017, 5:02:34 PM5/3/17
to Flot graphs
The CSS file is very important for those examples and it appears you have an incorrect path to that file.

In particular the following CSS rule defines the dimensions of the plot element.
.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

Flot will not work unless the dimensions are specified for the plot element and this is done with CSS.
Reply all
Reply to author
Forward
0 new messages