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.
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
This might help you: https://github.com/d3/d3-request/blob/master/README.md#request
Edit: updated link to API v4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With