46479

Dynamic timeseries C3js chart

Question:

I am new to C3.js and trying to create a dynamic timeseries chart, please run the code in fiddle <a href="http://jsfiddle.net/roytirthadeep/54v7r0ab/" rel="nofollow">http://jsfiddle.net/roytirthadeep/54v7r0ab/</a>

var chart = c3.generate({ data: { x: 'x', xFormat: '%Y-%m-%dT%H:%M:%S', columns: [] }, axis: { x: { type: 'timeseries', tick: { format: '%H:%M:%S', } } }, legend: { position: 'right' } }); //"2013-01-01T00:00:01" var timeInc = 1; var value = 1; var interval = setInterval(function () { value = value + 1; timeInc++; var str; if (timeInc > 59) { clearInterval(interval); return; } if (timeInc >= 10) { str = ''+timeInc; } else { str = '0'+timeInc; } xValue = "2013-01-01T00:00:"+str; if (value) if (value < 7) { console.log("xValue",xValue); console.log("value",value); chart.flow({ columns: [ ['x', xValue], ['data3', value] ], length:0 }); } else { chart.flow({ columns: [ ['x', xValue], ['data3', value], ['data4', value*2], ['data5', value/2], ['data6', value-1] ], length:0 }); } }, 1000);

Q1. Is this the right way to achieve the desired behaivor in C3.js ?

Q2. How to achieve this <a href="http://www.highcharts.com/stock/demo/dynamic-update" rel="nofollow">http://www.highcharts.com/stock/demo/dynamic-update</a> behaivor of highcharts (starting from a blank chart)

I got a solution and added it as an answer.

Answer1:

I got a solution to achieve the desired behavior like Highcharts, by resetting the x axis ranges and checking for threshold value. This might be helpful to others <a href="http://jsfiddle.net/54v7r0ab/5/" rel="nofollow">http://jsfiddle.net/54v7r0ab/5/</a>

var chart = c3.generate({ data: { x: 'x', columns: [] }, axis: { x: { type: 'timeseries', tick: { format: '%H:%M:%S', } } }, legend: { position: 'right' } }); var chartObj = { "chart": chart, "redrawArgs": {}, "truncThreshold": undefined } //"2013-01-01T00:00:01" var date = 1463017666000; var timeInc = 1000; var value = 1; var interval = setInterval(function () { var dataCols = []; date = date + timeInc; var minX = date - 10000; var maxX = date; var redrawArgs = chartObj.redrawArgs; if (!chartObj.truncThreshold) { chartObj.truncThreshold = maxX; } else if (minX > chartObj.truncThreshold) { redrawArgs.length = 1; } else { redrawArgs.length = 0; } chartObj.chart.axis.range({max: {x: maxX}, min: {x: minX}}); value++; redrawArgs.duration = 0; if (value < 7) { dataCols.push(['x', date]); dataCols.push(['data 1', value]); redrawArgs.columns = dataCols; } else { dataCols.push(['x', date]); dataCols.push(['data 1', value]); dataCols.push(['data 2', value*Math.random()]) dataCols.push(['data 3', value/Math.random()]); dataCols.push(['data 4', value+Math.random()]); redrawArgs.columns = dataCols; } chartObj.chart.flow(redrawArgs); }, 1000);

Answer2:

There is C3's flow api which does what you ask with less code, but annoyingly (especially after I wrote most of this answer) it has a bug where it doesn't remove points if the tab is hidden - <a href="https://github.com/c3js/c3/issues/1097" rel="nofollow">https://github.com/c3js/c3/issues/1097</a>

var chart = c3.generate({ data: { x: 'x', columns: [ ['x', '2012-12-28', '2012-12-29', '2012-12-30', '2012-12-31'], ['data1', 100, 230, 300, 330], ['data2', 250, 190, 230, 200], ['data3', 120, 90, 130, 180], ] }, axis: { x: { type: 'timeseries', tick: { format: '%m/%d', } } } }); var date = new Date ("2013-01-01"); setInterval(function () { chart.flow({ columns: [ ['x', new Date (date)], ['data1', 200 + (Math.random() * 300)], ['data2', 200 + (Math.random() * 300)], ['data3', 200 + (Math.random() * 300)], ], duration: 750, }); date.setDate(date.getDate() + 1); }, 2000);

<a href="http://jsfiddle.net/54v7r0ab/7/" rel="nofollow">http://jsfiddle.net/54v7r0ab/7/</a>

Until that bug's fixed, I'd go with your answer as it doesn't exhibit the same problem.

<hr />

EDIT: Possible fix. When using the flow api's <em>done</em> function, new data stops getting added to hidden tabs which avoids the 'pile-up' issue. However this is only useful if you don't want data constantly added when you're not looking :-), it wouldn't be a solution for a real-time graph.

<a href="http://jsfiddle.net/54v7r0ab/10/" rel="nofollow">http://jsfiddle.net/54v7r0ab/10/</a>

var date = new Date ("2013-01-01"); var pushNew = function () { chart.flow({ columns: [ ['x', new Date (date)], ['data1', 200 + (Math.random() * 300)], ['data2', 200 + (Math.random() * 300)], ['data3', 200 + (Math.random() * 300)], ], duration: 750, done: function () { date.setDate(date.getDate() + 1); window.setTimeout (pushNew, 1); } }); } pushNew();

Recommend

  • How can MPAndroidChart begin at the last x-value with a large dataset?
  • iOS - Custom keyboard, updating text field in parent view
  • Use reorder in ggplot2 wrapped in a function
  • Dealing with Split() function: how to adjust for either return/tab input
  • Using window.open, document.open, and document.write to display XML (XML rendering gone)
  • Google chart horizontal scrollbar
  • Map which allows duplicate key as well as maintain insertion order
  • Python Multiple file writing question
  • function cannot execute on segment because it accesses relation
  • Wait for angular to finish updating the DOM
  • How can I get new CSRF token in LARAVEL by using ajax
  • Getting the width from an scaled image
  • MySql - get days remaining
  • data.table replicate rows after join?
  • JSON data through JS/AJAX into PHP
  • how to read a file in prolog?
  • Streaming screenshots over WebRTC as a video stream from iOS
  • Runtime.exec() gives Error: Could not find or load main class
  • extjs4 catching the scroll event on panel
  • quiver not drawing arrows just lots of blue, matlab
  • Is there a amazon webstore API for customers?
  • How to get a value (ex: baseURL) in every Karate feature?
  • Perl system calls when running as another user using sudo
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • How to pass list parameters for each object using Spring MVC?
  • retrieve vertices with no linked edge in arangodb
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?