format data to please flot graph:)

[adishardis]

I'm trying to get a flot graph to show my jsonencoded array seen below:

[["aa",71],["ab",69],["ac",66],["ad",61],["ae",79],["af",78]]

In the array the first is what i want on the xaxis and the second is the corresponding value.

Right now my flot graph outputs an empty chart and I'm thinking that the array need to be all numbers. Previously I have predefined the xaxis names like this ticks:[[0,'Räckvidd'] But now I dont know what the expected name will be since the database is growing.

Now i don't really know how to proceed so if anybody here have experience of flot graphs and know of a solution to my problem I would be eternally grateful!

This is what I've done so far:

<div class="graph small tab-content" id="plotarea"></div>


<?PHP 
 $sql = mysql_query("SELECT Name,Value,Id FROM DB ORDER BY Id");
  while($result = mysql_fetch_array($sql))
  {
     $data[] = array($result['Name'],$result['Value']);
  }


  $TEST = json_encode(($data), JSON_NUMERIC_CHECK);
                                        ?>

And the flot script:

  <script type="text/javascript">
    $(window).load(function () {
            var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { min:0,max:5 },
                    yaxis: { min:1  ,max:60},
               };

     var TEST = <?php echo $TEST; ?>;

     $.plot($("#plotarea"),TEST,options)});

   </script> 

Over and out
Adam

[adishardis]

How would I change this

<?PHP 
 $sql = mysql_query("SELECT Name,Value,Id FROM DB ORDER BY Id");
  while($result = mysql_fetch_array($sql))
  {
     $data[] = array($result['Name'],$result['Value']);
  }
  $TEST = json_encode(($data), JSON_NUMERIC_CHECK);
                                        ?>

that outputs : [["aa",71],["ab",69],["ac",66],["ad",61],["ae",79],["af",78]]
to instead get the output: [[0,71],[1,69],[2,66],[3,61],[4,79],[5,78]]

I recon I would replace $result['Name'] with something like: $j = count($data[]);for($i = 0; $i < $j ; $i++)

But I have no clue as to how to get it right to get the right output.

Thanks
Adam

[pritaeas]

$data[] = array($result['Name'],$result['Value']);

$data[] = array(count($data), $result['Value']);

[adishardis]

Thanks, so simple :)

Now I just have to format the ticks to show the the right names...

[adishardis]

Ok, I got it working now :)

Don't know if it's the most efficient coding but here's what it looks like:

<?PHP 
 $sql = mysql_query("SELECT Name,Value,Id FROM DB ORDER BY Id");
  while($result = mysql_fetch_array($sql))
  {
     $data[] = array(count($data),$result['Value']);
  }
  $TEST = json_encode(($data), JSON_NUMERIC_CHECK);
?>


     <?PHP 
     $sql2 = mysql_query("SELECT Name,Value,Id FROM DB ORDER BY Id");
      while($result2 = mysql_fetch_array($sql2))
      {
         $data2[] = array(count($data2), $result2['Value']);
      }
      $TEST2 = json_encode(($data2), JSON_NUMERIC_CHECK);
      ?>

and changed my flot script to this:

  <script type="text/javascript">
    $(window).load(function () {
            var data1 = [{
                    "label": "test",
                    "data": <?php echo $TEST; ?>,
                    bars: {
                        barWidth: 0.2, 
                        order: 1,
                        lineWidth : 2,
                    }
                }];
$.plot($('#plotarea'), data1, {
                    grid : {hoverable : true, tickColor: '#DDDDDD',labelMargin: 10, verticalLines: false, horizontalLines: false, outlineWidth: 0},
                    xaxis: { ticks: <?php echo $TEST1; ?>},
                    yaxis: {  position: "left"}, // or "right" 
                    colors: ["#00eb0b", "#eea0a0"],
                    series : { lines: { fill: false, fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.01 } ] } }}
                });
                });
   </script> 

Thanks for your help!