By yangke on

I'm trying to display a flot graph based on json data (so i can refresh the graph without refreshing the entire page)
flot module: http://drupal.org/project/flot

Here's my js file:

var Flot={};
var data;

if(Drupal.jsEnabled) {
	
	$(document).ready(
		function(){ // do all this once the document is ready
				data = Flot.fetch();
				$.plot($("#placeholder"), [data]); // no graph displayed, replacing data with
                                                                              // [[0, 3], [4, 8], [8, 5]] works
		}		
	);
// ------------------------------------------------------------------------
// THE FUNCTIONS
	Flot.prepare_data = function(fetched) {
		// do some additional things
		$("#flot-data").text('The data: ' + fetched + ' has been fetched'); // this works, so fetched is a string object!		
		return fetched;
	}
////////////////
	Flot.fetch = function() {  
	//The $.get() function takes two arguments: the URL that it should contact and a function to call when it is done communicating with the server.	
		$.get(Drupal.settings.flot.json_url, function(data) {  //data is the data received from the server  
		myData = data;       
			if(!myData.status || myData.status == 0) {
				Flot.prepare_data(myData);
			}       
		}
		); // End inline function	
	}		
}

How can i turn the string object (fetched/data) back into an array object like [[0, 3], [4, 8], [8, 5]] ?

⋅ Categories: Drupal 6.x

Comments

yangke’s picture

yangke commented

I get a string like this: '[[0, 3], [4, 8], [8, 5]]' , how can i parse this to an array like this: [[0, 3], [4, 8], [8, 5]] ?

json is created on the server with this php:

<?php
        // php data
	$data = array(
		array(0,3),
		array(4,8),
		array(8,5),
		array(9,13),
		array(12,45),
	);
	// package the data for transmission
	$package = json_encode($data);
?>

This gives a json output like this:
[[0,3],[4,8],[8,5],[9,13],[12,45]]

In my .js file i have

	Flot.fetch = function() {  
	//The $.get() function takes two arguments: the URL that it should contact and a function to call when it is done communicating with the server.	
		$.get(Drupal.settings.flot.json_url, function(data) {  //data is the data received from the server  
			myData = Drupal.parseJson(data);       
			if(!myData.status || myData.status == 0) {
				Flot.prepare_data(myData); // send the data to a function that does some further manipulation
			}		
		}); // End inline function	
	}

myData is a string: 0,3,4,8,8,5,9,13,12,45, not a javascript array.

How can i solve this? How to get a php array to a javascript array using JSON in drupal?

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Why don't you just use jQuery's getJSON method? http://docs.jquery.com/Ajax/jQuery.getJSON

yangke’s picture

yangke commented

i tried with jquery 's method:

	// make the ajax request
		$.getJSON(Drupal.settings.flot.json_url,
			function(data){
			// append the form to the container
			Flot.prepare_data(data);           
		});	// end linline function

But this gives the same result. It parses to a string:
0,3,4,8,8,5,9,13,12,45, not a javascript array.
not a javascript array.

Maybe i need to change the JSON format?

any suggestions?

yangke’s picture

yangke commented

The problem wasn't in the format. I simplified some things (putting code inside functions, ...) and now it's working.


var Flot={}; 

if(Drupal.jsEnabled) {
	
	$(document).ready(
		function(){ // do all this once the document is ready
				Flot.fetch();
		}			
	);
// ------------------------------------------------------------------------
// THE FUNCTIONS
////////////////
	Flot.fetch = function() {  
		$.getJSON(Drupal.settings.flot.json_url,
			function(data){
			// append the form to the container
			$('#flot-data').text('The data: ' + data + ' is fetched');
			$.plot($("#placeholder"), [data]);
			$('#flot-data').text('The data: ' + data + ' is flotted');			
		});	// end linline function 
  }		
}

Next, polling data from the database.
I'll post an article once i've got it all working.

yangke’s picture

yangke commented

refreshing every 10 seconds

var Flot={}; 

// some variables to refresh every x miliseconds	
var Flot_t; 
var Flot_timer_is_on=0; 
var Flot_timeout=10000; // 10 000 miliseconds gives a refresh rate of 1refresh / 10 seconds

if(Drupal.jsEnabled) {
	
	$(document).ready(
		function(){ // do all this once the document is ready
				Flot.doTimer();
		}			
	);
// ------------------------------------------------------------------------
// THE FUNCTIONS
////////////////
	Flot.fetchlive = function() {  
		$.getJSON(Drupal.settings.flot.json_url,
			function(data){
			// append the form to the container
			$('#flot-data').text('The data: ' + data + ' is fetched');
			$.plot($("#placeholder"), [data]);
			$('#flot-data').text('The data: ' + data + ' is flotted');
			// writing dots to show the refresh rate
			$("#placeholder").after('.');	
		});	// end linline function 
  }		


// some functions to refresh every x miliseconds	
	Flot.timedCount = function() {
		Flot.fetchlive();
		t = setTimeout("Flot.timedCount()",Flot_timeout);
	}
	Flot.doTimer = function() {
		if (!Flot_timer_is_on) {
			Flot_timer_is_on=1;
			Flot.timedCount();
		}
	}
	Flot.stopCount = function() {
		clearTimeout(t);
		Flot_timer_is_on=0;
	}
	Pace.changeFreq = function() {
		Flot_timeout = 2000;
	}
}
marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Nice, thanks for the feedback and code examples.

yangke’s picture

yangke commented

The graph isn't showing in internet explorer. Anybody knows how to solve this?

You need to include the /flot/excanvas.min.js to get graphs working in IE7 (i only tested FF3.5 and IE7)
I do this in the theme function of my module like this:

<? php
/**
 * Theme function for theming graph page
 */
function theme_flot_draw($title) {
//get the path of the drupal flot module, so you can add some necessary .js files	
	$flot_path = drupal_get_path('module', 'flot');	
//add a .js library to get the flot graphs working in IE7
	drupal_add_js($flot_path .'/flot/excanvas.min.js'); // This line fixes the IE7 problem
// get the basepath to add references to css and js files
	$module_path = drupal_get_path('module', 'live_flot');
// add the module's javascripts js file	
	drupal_add_js($module_path .'/flot.js');
//build a URL reference to the JSON page, and then store it in the JavaScript-side settings
	$opts = array('absolute' => TRUE); // absolute path
	$json_url = url('pace_data.json', $opts);
// this becomes: Drupal.settings.pace_data.json_url = http://localhost/drupal?q=pace.json.	
//create a setting, Drupal.settings.flot.json_url, that  our JavaScript can access later 
// to fnd out what URL to connect to in order to get the JSON data
	drupal_add_js( 
		array('flot' => 
			array("json_url" => $json_url)), 'setting');		
// call theme_flot_graph function	
	theme_flot_graph('placeholder');
	$output = '<div id="flot-name">'. t($title) .'</div><div id="flot-data">'. t("fetching data...") .'</div><div id="placeholder" style="width:550px;height:300px;">'.t("Flot is waiting for data").'</div>';
	return $output;
}
?>

and then it works again.
------------------------------------------
next issue: I can't seem to get zooming to work on either IE or FF (the graphs shows, but i can select a region)

yangke’s picture

yangke commented

For zooming you need to add

<?php
//add a .js library to get the flot graphs working in IE7
	drupal_add_js($flot_path .'/flot/excanvas.min.js'); // This line fixes the IE7 problem
	drupal_add_js($flot_path .'/flot/jquery.flot.js');				// This one is needed to enable the zooming	
	drupal_add_js($flot_path .'/flot/jquery.flot.selection.js'); 	//This one is needed to enable the zooming
?>
dome’s picture

dome commented

in your example
module_path = drupal_get_path('module', 'live_flot');
Please let's me know where to get this module. i need to make live chart from flot.

sasconsul’s picture

sasconsul commented

I believe that live_flot is the module he created to hold the themin function he io presented.

It looks specific to his website.