How can I hide data gaps in plotly?

Question

I have datasets that may include large gaps in data, and I want to chart the data without plotly automatically filling in the gaps with blank space.

Example Chart from my app:

Data:

+------------+-----------+------------+
|    date    | responses | percentage |
+------------+-----------+------------+
| 2017-02-13 |         4 |     0.6296 |
| 2017-02-14 |         1 |     0.7963 |
| 2017-02-15 |         4 |     0.7315 |
| 2017-02-16 |         2 |     0.4213 |
| 2017-03-02 |         1 |     0.8611 |
| 2017-03-03 |         1 |     0.8148 |
| 2017-03-04 |         2 |     0.4444 |
+------------+-----------+------------+

Alternate Example JSFiddle: https://jsfiddle.net/4h922ca9/

Plotly Graph Maker Example: https://plot.ly/create/?fid=douglas.gaskell:3

How can I achieve this?

Edit: To clarify, I am not trying to fill in the gap with a line or bar. I don't want the gap to exist at all.

Mr. Polywhirl · Answer 1 · 2017-03-08T23:39:39.257

Use this in your config.

connectgaps: true

I actually tried this out by viewing the python version of this library.

Plotly :: Python Docs :: Line Charts :: Connect Data Gaps

var rawData = [
  {date: new Date(2017, 01, 10), value: 5},
  {date: new Date(2017, 01, 11), value: 6},
  {date: new Date(2017, 01, 12), value: 8},
  {date: new Date(2017, 01, 13), value: 13},
  {date: new Date(2017, 01, 14), value: null}, //Null to avoid plotting the line over the gap
  {date: new Date(2017, 01, 20), value: 12},
  {date: new Date(2017, 01, 21), value: 14},
  {date: new Date(2017, 01, 22), value: 8},
  {date: new Date(2017, 01, 23), value: 9},
  {date: new Date(2017, 01, 24), value: 11},
  {date: new Date(2017, 01, 25), value: 8},
  {date: new Date(2017, 01, 26), value: 6},
  {date: new Date(2017, 01, 27), value: 7}
];

let trace1 = {
  name: 'values',
  type: 'scatter',
  mode: 'lines+markers',
  x: getData(rawData, 'date'),
  y: getData(rawData, 'value'),
  connectgaps: true             // <-- HERE
}

Plotly.newPlot('myChart', [trace1]);

function getData(input, propName) {
  let output = [];

  for (let i = 0; i < input.length; i++) {
    output.push(input[i][propName]);
  }
  return output;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myChart"></div>

Edit

I guess the best way to approach this it to treat the x-axis like a category axis.

var rawData = [
  { date: '2017-02-10', value:  5 },
  { date: '2017-02-11', value:  6 },
  { date: '2017-02-12', value:  8 },
  { date: '2017-02-13', value: 13 },
  { date: '2017-02-20', value: 12 },
  { date: '2017-02-21', value: 14 },
  { date: '2017-02-22', value:  8 },
  { date: '2017-02-23', value:  9 },
  { date: '2017-02-24', value: 11 },
  { date: '2017-02-25', value:  8 },
  { date: '2017-02-26', value:  6 },
  { date: '2017-02-27', value:  7 }
];

let trace1 = {
  name: 'values',
  type: 'scatter',
  mode: 'lines+markers',
  x: getData(rawData, 'date').map((d, i) => i),
  y: getData(rawData, 'value'),
}

let layout = {
  xaxis: {
    title: 'Date',
    tickvals: getData(rawData, 'date').map((d, i) => i).filter(filterEven),
    ticktext: getData(rawData, 'date').map(d => moment(d).format('MMM DD')).filter(filterEven)
  }
}

Plotly.newPlot('myChart', [trace1], layout);

function filterEven(v, i) { return i % 2 === 0; }
function getData(input, prop) { return input.map(v => v[prop]); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myChart"></div>

That connects the gap, it does not hide the gap. I am purposely not using this to avoid a line crossing the gap. I do not want the gap to exist at all. This is definitely mentioned in the comment on my null value in the code snippet you have. — Douglas Gaskell, Mar 08 '17 at 18:04
@DouglasGaskell you should be careful of that.. You will be modifying the series in that case.. And from my exp with Plotly, that doesn't play nice.. — Pogrindis, Mar 08 '17 at 18:09
@Pogrindis Can you expand on that? I'm trying to replicate the type of plotting behavior I can get with excel or google sheets in a web app, which is to not automatically fill in a gap in data with blank space. If there is a way to stop if from filling it in, I'm all ears. — Douglas Gaskell, Mar 08 '17 at 18:11
Well you're going to want to modify your `getData()` to not add the x-axis values where the `y-axis` correlated value is empty.. So your `trace1` values will only contain those with values - working on an example for you — Pogrindis, Mar 08 '17 at 18:14
@Pogrindis That does not work. The only reason it is adding the `null` item is to avoid a line bridging the gap. Not adding that still creates a visible gap in the data. The gap is created because the data jumps from `2017-02-13` to `2017-02-20`. This is something plotly does by default, even in their chart creator tool. : https://plot.ly/create/?fid=douglas.gaskell:3 — Douglas Gaskell, Mar 08 '17 at 18:20
@DouglasGaskell you're right, :( let me take a look at another possibility — Pogrindis, Mar 08 '17 at 18:27
@mr-polywhirl that's a good idea but the whole beauty of time scales get lost, e.g. only showing the year once and then only months and days. — Maximilian Peters, Mar 08 '17 at 20:28

score 1 · Answer 2 · answered Jan 20 '23 at 11:16

Just in case anyone is using python, it's connectgaps=True.

import plotly.graph_objects as go

# instantiate figure
fig = go.Figure()

# plot to figure
fig.add_trace(go.Scatter(
    x=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    y=[10, 20, None, 15, 10, 5, 15, None, 20, 10, 10, 15, 25, 20, 10],
    name = '<b>No</b> Gaps', # Style name/legend entry with html tags
    connectgaps=True # override default to connect the gaps
))

fig.show()

Source: https://plot.ly/python/line-charts/#connect-data-gaps

How can I hide data gaps in plotly?

2 Answers2

Edit

Linked