As you can see, adding a chart is very easy.
<html> <body> <input type="button" value="Add Item" id="addItem"/> <div id="demo-chart"></div> <script src="/js/vendor/jquery.js"></script> <!-- Include the whole forerunner system, bells, whistles and kitchen sink, plus highcharts library --> <script type="application/javascript" src="/js/forerunnerdb/dist/fdb-all.min.js"></script> <script src="/js/vendor/highcharts-all.js"></script> <!-- Create a DB instance and store it globally --> <script type="application/javascript"> window.fdb = new ForerunnerDB(); db = fdb.db('test'); // Ask forerunner to load any persistent data previously // saved for this collection db.collection('item').load(); </script> <!-- Use jQuery to hook the onsubmit of our form --> <script type="application/javascript"> window.counter = 0; $('#addItem').on('click', function (e) { e.preventDefault(); // Add the new item to ForerunnerDB's item collection db.collection('data').insert({ name: 'Fish', type: 'Sale', val: Math.round(Math.random() * 100), day: window.counter++ }); // Now we've added the item to the collection, tell // forerunner to persist the data db.collection('data').save(); }); $('body').on('click', '#itemList li', function () { // Get the item id for the item clicked on db.collection('data').remove({_id: $(this).attr('id')}); db.collection('data').save(); }); </script> <!-- Finally we tell forerunner to data-bind the collection to the item list --> <script type="application/javascript"> db.collection('data').lineChart('#demo-chart', 'type', 'day', 'val', { chartOptions: { title: { text: 'Pet Purchases This Month' } } }); </script> </body> </html>
Finished Product: A Data-Bound Line Chart
Click the add item button to add some data to the collection that the chart is data-bound to.
