2

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).

msanford
  • 11,803
  • 11
  • 66
  • 93

0 Answers0