I'm trying to create a Real time Graphic with rickshaw but I didn't find how to update the graph without fixed duration as in the example (extensions.html).
I already know how to build my graph with a JSON file, but I don't know how to update the data (only data on the graph, I'd like to keep my slider as-is) without refreshing the whole page.
Here is my code :
<script>
jQuery.ajax({
'url': "Mesure.json",
'success': renderGraph // callback for ajax success
});
// wrap graph creation logic in a function to be used as a callback
function renderGraph(json) {
<!--========================================================================-->
<!-- COLOR PALETTE FOR DATA IN GRAPHIC -->
<!--========================================================================-->
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
<!--========================================================================-->
<!-- GRAPHIC OF DATA FROM DATABASE -->
<!--========================================================================-->
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'scatterplot',
stroke: true,
preserve: true,
series: [
{
color: palette.color(1),
data: json[0].data,
name: 'Photorésistance 1',
opacity: 0.9
}, {
color: palette.color(4),
data: json[1].data,
name: 'Photorésistance 2',
opacity: 0.9
}, {
color: palette.color(8),
data: json[2].data,
name: 'Photorésistance 3',
opacity: 0.9
}, {
color: palette.color(12),
data: json[3].data,
name: 'Photorésistance 4',
opacity: 0.9
}
]
} );
graph.renderer.dotSize=4;
graph.render();
setInterval( function() { graph.update();}, 5000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have to precise that I'm a beginner in php, javascript, Jquery, Ajax and I have no time to follow some class on the internet (this for an internship which ends in 2 weeks).