How to make dynamic graph with rickshaw without refreshing the browser?

Question

How to make dynamic graph with rickshaw without refreshing the browser?

822 Views Asked by geeks At 04 April 2025 at 10:30

I want to make dynamic graph, which always gives fresh data without refreshing the whole page. In the following example they build the graph on random data. But in this problem data is not fresh only refreshing of browser will get fresh data. Please see this link for ajax request I am using reference from here please see it

I copied the whole code below. I want to make graph which is movable, like real time update some like flot, But don't want to use flot, but rickshaw.

    <!doctype>
<head>
        <title>rickShaw greaph examples</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="../src/css/graph.css">
        <link type="text/css" rel="stylesheet" href="../src/css/legend.css">
        <link type="text/css" rel="stylesheet" href="../src/css/detail.css">
    <link type="text/css" rel="stylesheet" href="css/lines.css">

    <script src="../vendor/d3.v3.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    <script src="../rickshaw.js"></script>
</head>
<body>

<div id="chart_container" style="margin:0px auto;width:660px;">
    <div id="chart"></div>
        <div id="legend_container">
            <div id="smoother" title="Smoothing"></div>
            <div id="legend"></div>
        </div>
        <div id="slider"></div>
</div>

<script>
       // set up our data series with 50 random data points
        var seriesData = [ [], [], [] ];
        var random = new Rickshaw.Fixtures.RandomData(150);

        for (var i = 0; i < 150; i++) {
            random.addData(seriesData);
        }

var ajaxGraph = new Rickshaw.Graph.Ajax( {

    element: document.getElementById("chart"),
    width: 400,
    height: 200,
    renderer: 'line',
    series: [
        {
            name: 'New York',
                        data: seriesData[0],
            color: '#c05020',
        }, {
            name: 'London',
                        data: seriesData[0],
            color: '#30c020',
        }, {
            name: 'Tokyo',
                        data: seriesData[0],
            color: '#6060c0'
        }
    ]
} );
ajaxGraph.render();

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
            graph: graph
        } );

        var legend = new Rickshaw.Graph.Legend( {
            graph: graph,
            element: document.getElementById('legend')

        } );

        var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
            graph: graph,
            legend: legend
        } );


        var axes = new Rickshaw.Graph.Axis.Time( {
            graph: graph
        } );
        axes.render();
</script>

</body>

Original Q&A

There are 1 best solutions below

**Alex_B** · Answer 1

Instead of using

var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
    random.addData(seriesData);
}

Do an ajax call within some interval of time and update the chart's data series. Sort of like this (taken form their other example using ajax) here is the example I used http://www.flotcharts.org/flot/examples/ajax/index.html

data = [];

$.plot("#placeholder", data, options);

function fetchData() {

  function onDataReceived(series) {

    // Load all the data in one pass; if we only got partial
    // data we could merge it with what we already have.

    data = [ series ];
    $.plot("#placeholder", data, options);
  }

  $.ajax({
    url: "data-eu-gdp-growth-" + iteration + ".json",
    type: "GET",
    dataType: "json",
    success: onDataReceived
  });

  setTimeout(fetchData, 1000);
}

setTimeout(fetchData, 1000);

Hope this helps!

How to make dynamic graph with rickshaw without refreshing the browser?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in D3.JS

Related Questions in RICKSHAW

Trending Questions

Popular # Hahtags

Popular Questions