Table of Contents
"<attributeName>": "<value>"
format. Here are a few sample records you can use to initialize the chart. dataset: [ { data: [ { value: "7358" }, { value: "7361" }, { value: "7362" } ] } ]
type
attribute. To render a real-time line chart, set realtimeline
.renderAt
attribute. You will see in this sample that the renderAt object is named “chart-container” and we define it in the HTML section of the sample below.width
and height
attributes.dataFormat
attribute.FusionCharts.ready(function() { var d = new Date(); var monthArr = [ "Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]; var outDate = monthArr[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear(); new FusionCharts({ type: "realtimeline", renderAt: "chart-container", width: "600", height: "400", dataFormat: "json", dataSource: { chart: { caption: "Bitcoin Price Ticker", subCaption: outDate, numberPrefix: "$", numdisplaysets: "10", labeldisplay: "rotate", showRealTimeValue: "0", theme: "fusion", plotToolText: "$label<br>Price: <b>$dataValue</b>", setAdaptiveYMin: "1" }, categories: [ { category: [ { label: d.getHours() + ":" + d.getMinutes() + ":" + (d.getSeconds() - 2) }, { label: d.getHours() + ":" + d.getMinutes() + ":" + (d.getSeconds() - 1) }, { label: d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() } ] } ], dataset: [ { data: [ { value: "7358" }, { value: "7361" }, { value: "7362" } ] } ] }, events: { initialized: function(evt, arg) { // Get reference to the chart var chartRef = evt.sender; function updateData() { var t = new Date(), date = t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(), val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200, strData = "&label=" + date + "&value=" + val; // Feed it to chart. chartRef.feedData(strData); } chartRef.intervalUpdateId = setInterval(updateData, 1000); }, disposed: function(evt, args) { clearInterval(evt.sender.intervalUpdateId); } } }).render(); });HTML:
<div id="chart-container"></div>
https://api.coinlayer.com/live?access_key=YOUR_ACCESS_KEYSample REST API response:
{ "success": true, "terms": "https://coinlayer.com/terms", "privacy": "https://coinlayer.com/privacy", "timestamp": 1529571067, "target": "USD", "rates": { "611": 0.389165, "ABC": 59.99, "ACP": 0.014931, "ACT": 0.15927, "ACT*": 0.14371, "ADA": 0.160502, "ADCN": 0.001406, "ADL": 121.5, "ADX": 0.427854, "ADZ": 0.02908, "AE": 2.551479, "AGI": 0.12555, "AIB": 0.005626, "AIDOC": 0.02605, [...] } }
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…