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
Post a Comment