Using Plotly.js Charts for Dashboards
Tags: javascript, ui, tutorial
Published: 2019-03-24 12:38:33

Today we're going to look at a really powerful charting library that is really easy to use and set up. [Plotly Open Source Graphing Library](https://plot.ly/javascript/) supports several programming languages, including Python, Matlab, R, and most importantly Javascript!

I've had to build a few dashboards for IoT companies, and charts are definitely one of the biggest elements in the view. Need I say more about the significance of charts to business related reporting such as sales, network monitoring, stocks etc.

Plotly offers many kinds of charts and maps, but the most common ones I use are:

*   Line charts
*   Bar charts
*   Step charts

Below I'll walk through the basics on how I use plotly.js in an actual project.

* * *

Installation
------------

Very similar to other charting libraries, you can get them via CDN or npm packages. More detailed guide is in their [github page](https://github.com/plotly/plotly.js).

### CDN

Insert the script in the head of `index.html`

```html
    <head>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
```

### NPM

To install with npm simply do

```bash
    $ npm install plotly.js-dist
```

Note that it is `plotly.js-dist` and not plotly.js

### Import

Now to import it into your project do

```javascript
    import Plotly from 'plotly.js-dist'
    
    ...
    
    Plotly.newPlot('div-id', data, layout, options);
```

In the html you'll need a div with the `id` you want to point to.

```
    <div id="div-id"></div>
```    

Really easy stuff!

* * *

Plotting a basic chart
----------------------

Now let do a basic line chart.

@[Codepen Basic Line Chart](https://codepen.io/jellene4eva/pen/JzrKYW)

The javascript for this small chart is simple, we want to break down some of the important flags you need.

```javascript
    var trace1 = {
      name: 'Energy consumption',
      x: ['1-3-2019', '2-3-2019', '3-3-2019', '4-3-2019', '5-3-2019', '6-3-2019', '7-3-2019'],
      y: [10, 15, 13, 17, 19, 10, 11, 13],
      type: 'line',
      line: {
        color: '#45B5C6'
      }
    };
    
    var trace2 = {
      name: 'Cold water consumption',
      x: ['1-3-2019', '2-3-2019', '3-3-2019', '4-3-2019', '5-3-2019', '6-3-2019', '7-3-2019'],
      y: [16, 5, 11, 9, 0, 4, 0],
      type: 'line'
    };
    
    var data = [trace1, trace2];
    
    layout = {
        showlegend: false
    }
    
    Plotly.newPlot('myDiv', data, layout, { 
      responsive: true,
      displaylogo: false
    });
```   

### trace

Each series in the chart is referred to as a trace. The _xaxis_ is usually the time range, and the _yaxis_ is the value. Here, I purposely use `string` for my _xaxis_ because I want to be able to parse it into different localized format, e.g. Feb 2, 2019 in US, vs 2.2.2019 in Finland. Or even into quarters e.g. Q1/2018.

```
     @note: Plotly has locale config, but I wanted more control.
```

If you treat each _xaxis_ item as a _category_, then everything will work fine. If _xaxis_ is an array of \`Date\` items, Plotly will automatically parse it into a _timeseries chart._

You can specify the line color of the each trace. If you leave it out, Plotly will provide a color based on the index. To change the color, add an entry

```
    line: { 
        color: '#fff' 
    }
```    

Notice that `data` requires an Array of object. This is a little bit different from other charting libraries like [Google Charts](https://developers.google.com/chart/) or [Highcharts](https://www.highcharts.com/).

### layout

Layout is the general settings for Plotly. Here we're hiding the legends by adding this in the object.

```
    showlegend: false
```    

Legends allow you to show / hide each trace, which is pretty handy, but I've decided to turn it off. In my app, I have other buttons outside the chart for me to control showing and hiding of each data, so I don't need the legends.

Other configurations that I usually use for layout are `font`, `autosize`, `margin`, to make the chart fit your container.

Full documentation here: [https://plot.ly/javascript/reference/#layout](https://plot.ly/javascript/reference/#layout)

### configuration

These configurations are extra options for other functions around the chart, such as:

*   Allowing Scroll and Zoom
*   Modebar show / hide

Useful ones for me are

```
    {
        responsive: true, 
        displaylogo: false
    }
```    

This should be pretty self explanatory - the configuration allows the chart to change width according to the window, and also remove Plotly's logo from the modebar.

Full documentation here: [https://plot.ly/javascript/configuration-options/](https://plot.ly/javascript/configuration-options/)

* * *

Multiple axes
-------------

We now explore how to use different chart types in the same plot.


@[Codepen Multiline Chart](https://codepen.io/jellene4eva/pen/aMLmMM)



```javascript
    var trace1 = {
      name: "Energy consumption",
      x: [
        "1.3.2019 00:00",
        "1.3.2019 03:00",
        "1.3.2019 06:00",
        "1.3.2019 09:00",
        "1.3.2019 12:00",
        "1.3.2019 15:00",
        "1.3.2019 18:00",
        "1.3.2019 21:00"
      ],
      y: [20, 50, 92, 82, 14, 20, 50, 62],
      text: ['20 kw/H', '50 kw/H', '92 kw/H', '82 kw/H', '14 kw/H', '20 kw/H', '50 kw/H', '62 kw/H'],
      hoverinfo: 'x+text+name',
      type: "bar",
      marker: {
        color: '#270657'
      }
    };
    
    var trace2 = {
      name: "Air pressure",
      x: [
        "1.3.2019 00:00",
        "1.3.2019 03:00",
        "1.3.2019 06:00",
        "1.3.2019 09:00",
        "1.3.2019 12:00",
        "1.3.2019 15:00",
        "1.3.2019 18:00",
        "1.3.2019 21:00"
      ],
      y: [81.32, 72.1, 121.41, 71.31, 40.98, 30.96, 51.2, 71.92],
      text: ['81.32 Pa', '72.1 Pa', '121.41 Pa', '71.31 Pa', '40.98 Pa', '30.96 Pa', '51.2 Pa', '71.92 Pa'],
      hoverinfo: 'x+text+name',
      type: "line",
    };
    
    var trace3 = {
      name: "Lights",
      x: [
        "1.3.2019 00:00",
        "1.3.2019 03:00",
        "1.3.2019 06:00",
        "1.3.2019 09:00",
        "1.3.2019 12:00",
        "1.3.2019 15:00",
        "1.3.2019 18:00",
        "1.3.2019 21:00"
      ],
      y: ["off", "on", "on", "on", "off", "off", "on", "on"],
      type: "line",
      line: {
        shape: "hv",
        color: '#45b5c6'
      },
      yaxis: "y2"
    };
    
    var data = [trace1, trace2, trace3];
    
    layout = {
      showlegend: false,
      yaxis2: {
        type: "category",
        side: "right",
        overlaying: "y"
      }
    };
    
    Plotly.newPlot("myDiv", data, layout, {
      responsive: true,
      displaylogo: false
    });
```    

### Chart types

Here we have 3 basic chart types - line, step, and bar charts. You can configure them for each trace

```    
    type: "line"
    
    ...
    
    type: "bar"
    
    ...
    
    // step chart
    type: "line",
    line: {
        shape: "hv",
    },
```    

also notice that by setting the second _yaxis2_, we're able set a second yaxis on the right side of the chart for text based categories.

```
    {
        ...
        text: ['81.32 Pa', '72.1 Pa', '121.41 Pa', '71.31 Pa', '40.98 Pa', '30.96 Pa', '51.2 Pa', '71.92 Pa'],
        hoverinfo: 'x+text+name',
        ...
    }
```    

Custom text can be used to insert unit to the values. `hoverinfo` allows you to customize what you want to show when the mouse is hovering over the value. If we use the `text` instead of `y` then we can have the unit shown.

* * *

Putting it together
-------------------

![Screenshot from 2019-03-13 22:51:28.png](https://cdn.filestackcontent.com/tP9CA4PTMnidOQtrS3wa)

Demo iot dashboard

Here is a real life example of an iot dashboard for showing value changes of live sensor data.

Hopefully with this you can use Plotly in your future projects with ease.

View more examples of plotly here in the feed: [https://plot.ly/feed/#/](https://plot.ly/feed/#/)

### Other charting libraries
*   [Highcharts](https://www.highcharts.com/)
*   [](D3.js)[D3.js](https://d3js.org/)
*   [Google Charts](https://developers.google.com/chart/)
*   [Chart.js](https://www.chartjs.org/)

_Also published in my blog [jellenekhoh.io](jellenekhoh.io)_