# Plot stacked series in Canvas from filebeat

**URL:** <https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [October 15, 2019, 10:01am UTC](https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612 "2019-10-15T10:01:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dimitris\_S](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dimitris_s/32/50172_2.png) [@Dimitris\_S](https://discuss.elastic.co/u/Dimitris_S)\
**Post date:** [October 15, 2019, 10:01am UTC](https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612/1 "2019-10-15T10:01:13Z")

</div>

Hi there,

I'm pushing data from a Raspberry Pi to Kibana via filebeat. Data are sent as UDP messages in a JSON format. One of the fields in JSON is called phys\_stats and contains three sub-fields which I would like  
to group in my canvas plots (one is raw data and the other two are some averaging filters of the raw data).

In Canvas I try the following code (partly adopted from this [topic](https://discuss.elastic.co/t/canvas-how-to-make-stacked-area-chart/180399))

```
essql 
  query="SELECT \"payload.phys_stats.current\" AS current, \"payload.phys_stats.sma\" AS sma, \"payload.phys_stats.double_sma\" AS double_sma, \"@timestamp\" AS timestamp FROM \"filebeat-*\" ORDER BY timestamp DESC"
| ply 
  by="timestamp" 
  expression={
              string "data_type, value
                     " "current," {getCell "current"} "
                     " "sma," {getCell "sma"} "
                     " "double_sma," {getCell "double_sma"}
              }
| alterColumn "value" type="number"
| alterColumn column="timestamp" type="date"
| pointseries x="timestamp" y="value" color="data_type"
| plot defaultStyle={seriesStyle lines=2 stack=1 fill=0} 
  palette={palette "#01A4A4" "#CC6666" "#D0D102" "#616161" "#00A1CB" "#32742C" "#F18D05" "#113F8C" "#61AE24" "#D70060" gradient=false} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=11 align="left" color="#000000" weight="normal" underline=false italic=false} legend="nw"
| render containerStyle={containerStyle opacity="1" border=" none "}

```

I perform an SQL query to fetch my data (current, sma, double\_sma) and I use `ply` to kinda convert my data to a new format and assign a new type for the data types. I was hoping that this could be used in the color assignment to generate my stacked plot. It doesn't work. Any ideas?

---

<div class="post-metadata">

**Author:** ![lukas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukas/32/6812_2.png) [@lukas](https://discuss.elastic.co/u/lukas)\
**Post date:** [October 17, 2019, 8:23pm UTC](https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612/2 "2019-10-17T20:23:45Z")

</div>

Could you provide an example of one of your documents as well as the result you get in Canvas from the current expression? Could you also provide the result of the expression up until right before the `pointseries` function?

---

<div class="post-metadata">

**Author:** ![Dimitris\_S](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dimitris_s/32/50172_2.png) [@Dimitris\_S](https://discuss.elastic.co/u/Dimitris_S)\
**Post date:** [October 22, 2019, 2:12pm UTC](https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612/3 "2019-10-22T14:12:09Z")

</div>

Hi Lukas,

Sorry for not getting back promptly, in the meantime I solved the issue in a different way:

> timelion  
> query=".es(index=filebeat-_, timefield='@timestamp', metric='avg:payload.phys\_stats.current').label('Current (mA)'), .es(index=filebeat-_, timefield='@timestamp', metric='avg:payload.phys\_stats.sma').label('Mov. Avg'), .es(index=filebeat-\*, timefield='@timestamp', metric='avg:payload.phys\_stats.double\_sma').label('Mov. Avg (2nd deg.)')" from="now-15m" to="now"  
> | pointseries x="@timestamp" y="mean(value)" color="label"  
> | plot defaultStyle={seriesStyle lines="1" fill=0}  
> font={font family="Arial, sans-serif" size=16 align="left" color="#FFFFFF" weight="normal" underline=false italic=false} legend="ne"  
> seriesStyle={seriesStyle stack=1 label="Current (mA)" color="#FF9910" lines="1" fill="1"}  
> seriesStyle={seriesStyle stack=2 label="Mov. Avg" color="#FFFB00" lines="3"}  
> seriesStyle={seriesStyle stack=3 label="Mov. Avg (2nd deg.)" color="#00C9FF" lines="5" points="0"}  
> | render containerStyle={containerStyle}

Fortunately, timelion offers a bit more flexibility I think, since it allows me to create 3 sub-queries in one query - which I think the sql format does not currently support.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 19, 2019, 2:12pm UTC](https://discuss.elastic.co/t/plot-stacked-series-in-canvas-from-filebeat/203612/4 "2019-11-19T14:12:12Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.