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


i want make dynamic graph, gives fresh data without refreshing whole page. in following example build graph on random data. in problem data not fresh refreshing of browser fresh data. please see link ajax request using reference here please see it

i copied whole code below. want make graph movable, real time update flot, don't want use flot, 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 our data series 50 random data points         var seriesdata = [ [], [], [] ];         var random = new rickshaw.fixtures.randomdata(150);          (var = 0; < 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> 

instead of using

var seriesdata = [ [], [], [] ]; var random = new rickshaw.fixtures.randomdata(150);  (var = 0; < 150; i++) {     random.adddata(seriesdata); } 

do ajax call within interval of time , update chart's data series. sort of (taken form other example using ajax) here example used http://www.flotcharts.org/flot/examples/ajax/index.html

data = [];  $.plot("#placeholder", data, options);  function fetchdata() {    function ondatareceived(series) {      // load data in 1 pass; if got partial     // data merge 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 helps!


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -