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.

Get your free API keys

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.

Create your webpage

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/5.1/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!

Trigger events from your server

Your server should trigger events called new-priceon 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
// First, run 'npm install --save 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!

Where next?