CODEWITHSUNDEEP
phpmysqlhtmlflot
Eugene
Eugene

Reputation: 263

php/html with flot and mysql

I have issues with my javascript. Currently, I'm working on this javascript using flot to generate a graph, first by extracting data from mysql via php and then using json_encode to output the array data which will be used in the javascript. I'm not able to spot my mistake as to why my graph isn't plotting. Thanks!

<?php
 include ('config2.php');
 $tbl_name4 = EITMBS;
 $data = array();
  $sql="SELECT * FROM $tbl_name4";
  $result=mysqli_query($link, $sql);
  $row_cnt = mysqli_num_rows($result);
  for ($nrow = 1; $nrow <= $row_cnt; $nrow=$nrow+1)
 {

  $sql="SELECT * FROM $tbl_name4 WHERE id = '$nrow'";   
  $result=mysqli_query($link, $sql);
  $row = mysqli_fetch_array($result);
  $data[$nrow] = $row[Power];
  echo $data[1];
  echo $data[2];
 }

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Power Consumption</title>
    <link href="layout.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>
 </head>
    <body>
    <h1>Power Consumption</h1>

    <div id="placeholder" style="width:600px;height:300px"></div>


    <p id="hoverdata">Mouse hovers at
    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>

    <p>A tooltip is easy to build with a bit of jQuery code and the
    data returned from the plot.</p>

    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>




<script type="text/javascript"> 


$(function () {
    var graph = [];
    var power = <?php echo json_encode($data);?>;


    for (var i = 1; i < 9; i += 1) {

        //alert(power[i]);
        graph([i,[power(i)]);

    }

    var plot = $.plot($("#placeholder"),
           [ { data: graph, label: "cos(x)" } ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: 0, max: 25 }
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltip:checked").length > 0) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        }
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script> 

 </body>
</html>

Upvotes: 0

Views: 772

Answers (1)

George Reith
George Reith

Reputation: 13476

Your variable var power contains an object of integers for keys and floating point numbers in string format. You may have the wrong datatype enforced in your database (for mysql looks like you should be using FLOAT).

If you have PHP 5.3.3+ you can use the following to ensure numbers are stored in number format in a json encoded string:

json_encode($data, JSON_NUMERIC_CHECK);

If not you can cycle through the array before you json encode it:

for ($i in $data) {
  $data[$i] = (float) $data[$i];
}

Secondly you are incorrectly converting the json encoded object to an array. Change:

graph([i,[power(i)]);

to:

graph.push([i, power[i]]);

Upvotes: 2

Related Questions