using flot with ajax and mysql

[bouton]

I have flot working fine with mysql and ajax. Withthe following code I
can create a nice line graph.
<script id="source" language="javascript" type="text/
javascript">
$(document).ready(function() {
get_data();
});

function get_data() {
var options = {
lines: {show: true},
points: {show: true},
legend: {show: true, backgroundColor: "#fff", noColumns: 4,
position: "nw"},
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 },
grid: {color:"#CCCCCC", backgroundColor: "#fffaff"}
};

$.ajax({ url: "getData.php",
dataType: "json",
success: function(result)
{
plot = $.plot($("#placeholder"), result, options);
}
});
}
</script>
where returned data from getData.php looks like
[
{label: "Data1", data:[[32,5.3],[64,9.5],[128,15.8],[256,26.0]]},
{label: "Data2", data:[[32,18.0],[64,32.0],[128,53.0],[256,67.]]}
]

Now I want to be able to do what the "real data" example does.
I changed the getData.php to output as the example does
{
"Data 1": {
label: "Data 1",
data:[[32,5.3],[64,9.5],[128,15.8],[256,26.0]]
},
"Data 2":{
label: "Data 2",
data:data:[[32,18.0],[64,32.0],[128,53.0],[256,67.]]
}
}

But I am not sure how to now get that into the real-data example. I
think it has something to do with 'push' but not sure how.
Any ideas. What I have -

function get_data() {
var data = [];
$.ajax({ url: "get2.php",
dataType: "json",
success: function(result)
{
$.each(result, function(key, val) {
-- somehow things get done here?
});
}
});
}

Thanks - love the plots. Now wish I knew more about getting i tto work

[Ole Laursen]

> But I am not sure how to now get that into the real-data example. I
> think it has something to do with 'push' but not sure how.
> Any ideas. What I have -
>
> function get_data() {
> var data = [];
> $.ajax({ url: "get2.php",
> dataType: "json",
> success: function(result)
> {
> $.each(result, function(key, val) {
> -- somehow things get done here?
> });
> }
> });
> }

OK, this sounds like you're confused by the whole Javascript thing - I
think you need to step back and maybe draw a little diagram of how you
intend this to work.

The smallest possible change to the real data example is that you in
your success function simply put all the stuff (more or less) that the
real data example is doing in $(function () { ... }).

However, if what you want is the real data example but where the data
itself is stored server-side and only retrieved when needed, then you
should send a GET parameter to your getData.php script with the names
of the data you need, then modify it to return a dataset with exactly
that data in it and nothing more. I suggest you return an array like
you already have:

[

{label: "Data1", data:[[32,5.3],[64,9.5],[128,15.8],[256,26.0]]},
{label: "Data2", data:[[32,18.0],[64,32.0],[128,53.0],[256,67.]]}
]

The line "data.push(datasets[key]);" is for converting from an object
form { 'label1': data1, 'label2': data2 } to an array form [ data1,
data2 ] (push means append to array) since Flot needs the data in the
array form.

--
Ole Laursen
http://www.iola.dk/

[bouton]

What I had intended on doing is having all the data pulled initially,
upon the opening of the page, into the var datasets like in your
example. This var datasets is created by a mysql call which outputs a
string in the format indicated. I'll try again. Maybe I was getting
too complicated.
thx

[bouton]

Duh - you were right - I was way!! overcomplicating it ;)
I did exactly what you said - just put your code inside my success
function - and it works. How cool is that.
Thanks!

Code

<script id="source" language="javascript" type="text/javascript">

$(function () {

get_data();
});

function get_data() {
var options = {
lines: {show: true},
points: {show: true},
legend: {show: true, backgroundColor: "#fff", noColumns: 4,
position: "nw"},
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 },
grid: {color:"#CCCCCC", backgroundColor: "#fffaff"}
};

$.ajax({ url: "getData.php", // does the mysql call to return
data string
dataType: "json",
success: function(datasets)
{
// hard-code color indices to prevent them from shifting
as
// countries are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});

// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' +
key +
'" checked="checked" >' + val.label +
'</input>');
});
choiceContainer.find("input").click(plotAccordingToChoices);


function plotAccordingToChoices() {
var data = [];

choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});

if (data.length > 0)
$.plot($("#placeholder"), data, options);
}

plotAccordingToChoices();
}
});
}

</script>

[Otakar]

Congratulation to FLOT, fantastic job done!
Derived from time.html example, I use following snipped code for
plotting of 2 time series:

$(document).ready(function() {
var d1 = [[11885976, 300.74], [11911896, 381.15], [11938716,
362.38], [11964636, 383.94], [11991420, 325.44]]; // to be deleted
later
var d2 = [[11885976, 280.74], [11911896, 281.15], [11938716,
282.38], [11964636, 283.94], [11991420, 285.44]]; // to be deleted
later

$.ajax({ url: "get_data.php",
dataType: "json",
success: function(DATASETS) // DATASETS are not used at this
moment
{
$.plot($("#placeholder"),
[{data: d1, lines: { show: true, fill: false }, points:
{ show: true }},
{data: d2, lines: { show: true, fill: true }}],
{xaxis: { mode: "time" }} );
}
});
});

I would like to use ajax technology and to display DATASETS sent by
get_data.php instead of local vars d1,d2 and to set properties
individually to each time series in the same way as I can do it, when
vars d1,d2 are declared locally. The problem seems to be very similar
to previously reported one. Could anybody help me with exact lines of
code? Sorry, I am beginner.

Thanks to previous posting, my get_data.php looks like:
<?php
echo '
[
{label: "d1", data:[[1188597600000, 300.74], [1191189600000, 381.15],
[1193871600000, 362.38], [1196463600000, 383.94], [1199142000000,
325.44]]},
{label: "d2", data:[[1188597600000, 280.74], [1191189600000, 281.15],
[1193871600000, 282.38], [1196463600000, 283.94], [1199142000000,
285.44]]}
]
';
?>

Thank you very much Otakar

[Ole Laursen]

> <?php
> echo '
> [
> {label: "d1", data:[[1188597600000, 300.74], [1191189600000, 381.15],
> [1193871600000, 362.38], [1196463600000, 383.94], [1199142000000,
> 325.44]]},
> {label: "d2", data:[[1188597600000, 280.74], [1191189600000, 281.15],
> [1193871600000, 282.38], [1196463600000, 283.94], [1199142000000,
> 285.44]]}
> ]
> ';
> ?>

Here's an example (warning, untested):

var myDataSets;

$.getJSON("get_data.php", function (data) {
myDataSets = data;

// this might be sometime later
myDataSets[0].lines = { show: true};
$.plot("#placeholder", myDataSets);
});

Think of it this way: you're designing a protocol where you control
both ends. It's a question of transfering the state from the server to
the client in the way that makes it as easy as possible for you to
manipulate it afterwards. JSON and the fact that Javascript has easy
dictionaries and arrays simplifies this a lot.