JavaScript realtime chart quick start
After following this guide you will have a chart in a webpage that you can publish new data-points to from your server. If you have any questions get in touch.
Create an account, then create a Channels app. Go to the "Keys" page for that app, and make a note of your app_id
, key
, secret
and cluster
.
We’ll make the chart UI using Google Charts(but you can use any common charting library). Copy-paste the following code into index.html
. Replace 'APP_KEY'
and 'APP_CLUSTER'
with the values from your dashboard. Then open index.html
in your browser:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<html> <body> <div id="chart_div" style="width: 100%; height: 500px;"></div> <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://js.pusher.com/7.0/pusher.min.js"></script> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(() => { // Instead of hard-coding the initial table data, // you could fetch it from your server. const dataTable = google.visualization.arrayToDataTable([ ['Year', 'Price'], [2013, 400], [2014, 460], ]); const chart = new google.visualization.AreaChart( document.getElementById('chart_div')); const options = { title: '1 BTC in USD', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0}, animation:{ duration: 100, easing: 'out' } }; chart.draw(dataTable, options); let year = 2015; Pusher.logToConsole = true; const pusher = new Pusher('APP_KEY', { // Replace with 'key' from dashboard cluster: 'APP_CLUSTER', // Replace with 'cluster' from dashboard forceTLS: true }); const channel = pusher.subscribe('price-btcusd'); channel.bind('new-price', data => { const row = [year++, data.value]; dataTable.addRow(row); chart.draw(dataTable, options); }); }); </script> </body> </html>
This page is now waiting for new-price
events on the price-btcusd
channel. When an event comes in, it will extract the value
field and add this as a new data point on the right of the chart!
Your server should trigger events called new-price
on a channel called price-btcusd
. Each example below uses one of the official Pusher Channels server SDKs to trigger the events.
- Node.js
- PHP
- Python
- Missing your SDK?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
// First, run 'npm install pusher' const Pusher = require("pusher"); const pusher = new Pusher({ appId: "APP_ID", // Replace with 'app_id' from dashboard key: "APP_KEY", // Replace with 'key' from dashboard secret: "APP_SECRET", // Replace with 'secret' from dashboard cluster: "APP_CLUSTER", // Replace with 'cluster' from dashboard useTLS: true }); // Trigger a new random event every second. In your application, // you should trigger the event based on real-world changes! setInterval(() => { pusher.trigger("price-btcusd", "new-price", { value: Math.random() * 5000 }); }, 1000);
Finally, go back to your browser to see the realtime data appearing in the chart!
- If you had any trouble, get in touch.
- For the core concepts, read Understanding Pusher Channels.
- For the features this quick start uses, see connections, publish/subscribe over channels, and the JavaScript client library.