Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically loading external data from database into d3.js

I am trying to get dynamic reloading to work in d3 and I'm having trouble trying to figure out how to refresh the data from the database.

I have an array that contains values should change every second:

var data = [1,2,3,4];

In my initial script, I had PHP pull the data from the database to set up the array, and reloading the page works fine for that, but I'd like to use d3's reload functionality to fetch new data and redraw the diagram.

I'm completely new to js and d3, so any suggestions would be very helpful.

I tried using jQuery's get command to call an external PHP script that outputs the values but that doesn't seem to work.

I'm basically trying to replicate the bar chart from Google Analytics real time display.

like image 465
Jeremy Wilson Avatar asked Sep 20 '12 19:09

Jeremy Wilson


2 Answers

firstly, you need a page on the server that will output the data in JSON format*. Once you have that page, call it from the browser, and you should get the encoded data appearing on screen (this will prove that the page is hosted properly and returning data)

Next, follow the simple example on the D3 docs link that Yeco posted. You'll need to replace the dummy URL with the address to your new data page, and stick your own function call in there to redraw the chart with the new data.

*Note: I am not familiar with PHP, but it should have either a native JSON encoder, or a library will be available on the net. You'll also need to make sure you set the response mime type appropriately - a quick google should give you the correct mime type - it's something like 'application/json' I think, but can't remember of the top of my head

like image 101
logical Chimp Avatar answered Sep 21 '22 03:09

logical Chimp


This might help you: https://github.com/d3/d3-request/blob/master/README.md#request

Edit: updated link to API v4

like image 40
Yëco Avatar answered Sep 22 '22 03:09

Yëco