Bar(chart) with % of different values in Canvas. How?

[GGorast (Gorast)]

I need to make a pie-like bar(chart) that will show different % of 100% of the values that I choose and color it differently. See the image for explanation.

Tnx

[Catherine_Liu]

We currently don't have any elements that can achieve this out the box. You can build your own custom function to render the chart you described. It would be similar to our pie element, but you'll want to create a render function that displays it as a bar instead of a pie chart. You can refer to our guides on making custom functions if you want to go down that route: http://canvas.elastic.co/stories/index.html.

It took a bit of hacking around with the plot element, but I created something similar using demodata as my datasource.

Essentially, you have to make a stacked horizontal bar chart with the labels turned off and a bunch of markdown elements for the labels. It'll take a lot of manual positioning, and it's not very dynamic this way, but it gets the job done. Below are the expressions I used for each element.

Bar Chart

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| pointseries x="value" y=0 color="state"
| plot 
  defaultStyle={seriesStyle lines=0 bars="0.75" points=0 horizontalBars=true stack=true} legend=false xaxis=false yaxis=false 
  seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="done" color="#f5cc5d"}
  seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="running" color="#e74b8b"}
  seriesStyle={seriesStyle bars="0.75" points=0 horizontalBars=true label="start" color="#4fbf48"}
| render

Series Labels

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=0} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=1} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "state" row=2} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}

Percentage Labels

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=0 | formatnumber "0.0%"} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=1 | formatnumber "0.0%"} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}

filters
| demodata
| staticColumn "total_docs" value={rowCount}
| ply by="state" fn={math {string {rowCount} " / " {getCell "total_docs"}}}
| markdown {getCell "value" row=2 | formatnumber "0.0%"} 
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=36 align="center" color="#000000" weight="normal" underline=false italic=false}