# Pyramid Chart

**URL:** <https://community.glideapps.com/t/pyramid-chart/68850>\
**Category:** Ask for Help\
**Created:** [December 19, 2023, 4:40pm UTC](https://community.glideapps.com/t/pyramid-chart/68850 "2023-12-19T16:40:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 19, 2023, 4:40pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/1 "2023-12-19T16:40:19Z")

</div>

Pyramid chart on Glide

please, a need create a pyramid chart, with defined status, and i need declare some color for each status, i looked for the quick chart, but i doesn’t finded this model for chart, please someone can help me to implement this chart?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 19, 2023, 4:53pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/2 "2023-12-19T16:53:53Z")

</div>

Do you have a mockup of what it should look like?

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 19, 2023, 6:56pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/3 "2023-12-19T18:56:54Z")

</div>

something like that looks good for me, if inverted is better

 ![Captura de Tela 2023-12-19 às 15.55.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/832eb6718723d82cea029dc401ee6864bd45e3ba.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 19, 2023, 7:14pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/4 "2023-12-19T19:14:08Z")

</div>

I suspect that might be possible using Quickchart.  
Did you try asking in the [Quickchart Community](https://community.quickchart.io/)? Ian (the creator of quickchart) is active in the Community, and is usually very responsive and helpful.

If it turns out that it can’t be done with quickchart, I’d look around for other JS based charting services. There is probably one out there that can do it.

If all else fails, Cloudinary might be an option. Although that would be quite a challenge.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 19, 2023, 7:55pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/5 "2023-12-19T19:55:10Z")

</div>

I looked at the chart options in quickchart and there is no pyramid type, nor in chatgpt would I like a simple option for this, maybe if I need specific support, it deviates from the simplicity I need now ☹

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [December 19, 2023, 8:31pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/6 "2023-12-19T20:31:57Z")

</div>

I gave it a go

![Screenshot 2023-12-19 at 3.28.16 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/d/1dad4ba8cc3408c3c2dec09527d5531de159a76c.png)

> **Summary**
>
> ```auto
> <!DOCTYPE html>
> <html>
> <head>
> <title>Inverted Pyramid</title>
> </head>
> <body>
> <div style="width: 100%; text-align: center;">
> <div style="display: inline-block; background-color: #ccccff; width: 90%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">987</span>
> </div><br>
> <div style="display: inline-block; background-color: #6495ed; width: 80%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">834</span>
> </div><br>
> <div style="display: inline-block; background-color: #9fe2bf; width: 70%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">789</span>
> </div><br>
> <div style="display: inline-block; background-color: #40e0d0; width: 60%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">456</span>
> </div><br>
> <div style="display: inline-block; background-color: #D85722; width: 50%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">390</span>
> </div><br>
> <div style="display: inline-block; background-color: #ffcc00; width: 40%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">267</span>
> </div><br>
> <div style="display: inline-block; background-color: #ff6700; width: 30%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">123</span>
> </div><br>
> <div style="display: inline-block; background-color: #b5651d; width: 20%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">96</span>
> </div><br>
> <div style="display: inline-block; background-color: #4cbb17; width: 10%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">69</span>
> </div><br>
> <div style="display: inline-block; background-color: #40e0d0; width: 5%; height: 20px; margin: 0;">
> <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">21</span>
> </div><br>
> </div>
> </body>
> </html>
> 
> ```

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 19, 2023, 8:43pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/7 "2023-12-19T20:43:35Z")

</div>

thats looks good, do you have link to live editor to me can study yout example? Maybe i can use your suggest

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [December 19, 2023, 8:45pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/8 "2023-12-19T20:45:41Z")

</div>

thanks! I put the code in the summary below the picture. just create a template for the background-colors and numbers

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 19, 2023, 8:56pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/9 "2023-12-19T20:56:27Z")

</div>

do you created a html code with css inline, but in my case, i want use quickchart because my other chart is made in the quickchart, i can replicate this html on quickchart? I think if i can use a pyramid like a background image and put on that image dynamic data from sheets, maybe works for me, i guess, maybe ☹

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 19, 2023, 11:58pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/10 "2023-12-19T23:58:36Z")

</div>

Do you need to control the colors or it can follow a theme?

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [December 20, 2023, 7:57am UTC](https://community.glideapps.com/t/pyramid-chart/68850/11 "2023-12-20T07:57:37Z")

</div>

Here is another option:

Use a template column to generate a snippet that can be used in Rich text component. In this example we have 5 steps. Replace `{Value1000}` , `{Width1000}` , `{Value800}` , `{Width800}` , etc., with the actual values or column names that hold the values for each step of the chart. The widths should be percentages representing the relative size of each step compared to the base.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/3697aa587575df045bdc9ec55b68ce72999215f6.png)

\<div style=“width: 100%; text-align: center; position: relative;”\>  
\<div style=“background-color: #8e44ad; height: 30px; width: {Width1000}; margin: 0 auto; line-height: 30px;”\>{Value1000}\</div\>  
\<div style=“background-color: #3498db; height: 30px; width: {Width800}; margin: 0 auto; line-height: 30px;”\>{Value800}\</div\>  
\<div style=“background-color: #2ecc71; height: 30px; width: {Width500}; margin: 0 auto; line-height: 30px;”\>{Value500}\</div\>  
\<div style=“background-color: #f1c40f; height: 30px; width: {Width250}; margin: 0 auto; line-height: 30px;”\>{Value250}\</div\>  
\<div style=“position: relative; width: {Width100}; margin: 0 auto; height: 30px;”\>  
\<div style=“width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #e67e22; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;”\>\</div\>  
\<div style=“position: absolute; width: 100%; left: 50%; transform: translateX(-50%); bottom: 30px; color: black; font-size: 12px;”\>{Value100}\</div\>  
\</div\>  
\</div\>

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 20, 2023, 10:33am UTC](https://community.glideapps.com/t/pyramid-chart/68850/12 "2023-12-20T10:33:58Z")

</div>

Right, based on your answer I can create an HTML code with css-inline and apply it to the glide richt text component, this gives me new questions like. Can I create the code outside of glide, in this case in vscode and once created, replicate it in glide and still have dynamic data being shown? I started studying glide 3 weeks ago at the same time that I developed a CRM for my work, and as Brazil doesn’t have good and updated glide courses I reached a point where this forum has been my best glide school

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 20, 2023, 1:55pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/13 "2023-12-20T13:55:39Z")

</div>

With a template column, you can replace any values you want, whether that’s width, value, or even color. It might require some minor modification of the HTML that you are bringing in, but the replacement values will be the part that’s dynamic.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 20, 2023, 11:43pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/14 "2023-12-20T23:43:38Z")

</div>

> **[JavaScript Pyramid Charts & Graphs | CanvasJS](https://canvasjs.com/javascript-charts/pyramid-chart/)**
>
> JavaScript Pyramid Charts & Graphs based on HTML5 Canvas. Charts are Interactive, Easily Customizable, support Animation, Events & Exporting as Image.

CanvasJS does support this, I’m pretty sure it would work with Github + Experimental Code column + web embed (paid component).

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 21, 2023, 7:34pm UTC](https://community.glideapps.com/t/pyramid-chart/68850/15 "2023-12-21T19:34:22Z")

</div>

I finally managed to create a funnel with html and css, now I need to transform this into a template to inject dynamic data, now I have another huge problem for me, counting the number of times a “word” is repeated, each repetition, is once this word that represents an action was executed, create a column for each action, which represents the amount that it was executed to be able to use it in the template and have my dynamic data, and I have no idea how to do this

![Captura de Tela 2023-12-21 às 16.31.24](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d424d6666537c60ade1e51bcb0d54efd366b5d1e.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 22, 2023, 1:06am UTC](https://community.glideapps.com/t/pyramid-chart/68850/16 "2023-12-22T01:06:58Z")

</div>

> [@Fabio\_Carneiro](#):
>
> counting the number of times a “word” is repeated, each repetition, is once this word that represents an action was executed, create a column for each action, which represents the amount that it was executed to be able to use it in the template and have my dynamic data, and I have no idea how to do this

Can you show us the data structure you currently have?

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 22, 2023, 2:47am UTC](https://community.glideapps.com/t/pyramid-chart/68850/17 "2023-12-22T02:47:57Z")

</div>

in this column, each word represents an action that has occurred, if some word repeats, this action occurred more times, if some word appears in this column three times, three times of the action represented by the word occurred, each word represents some step on the funnel, and I need to count each time each action occurred to put on a template to show the funnel with this values

 ![Captura de Tela 2023-12-21 às 23.38.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4e6624b77f338d22ddc36f5629ad983dadc79133.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 22, 2023, 4:34am UTC](https://community.glideapps.com/t/pyramid-chart/68850/18 "2023-12-22T04:34:27Z")

</div>

- Create a Multiple Relation column that matches each item with itself
- Create a Rollup column that targets the relation column and does a count.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [December 22, 2023, 4:41am UTC](https://community.glideapps.com/t/pyramid-chart/68850/19 "2023-12-22T04:41:19Z")

</div>

Initial thought is to take the string containing all the words then use a template column to replace the word you wish to analyze with a specific text like 😀word. This will insert the emoji infront of each word. You can then use a split text column with a field 😀 used to separate elements in the resulting array. Finally you can count the incidence using the array length column.

I’m sure someone better than me knows a simpler way to work with arrays but this should work.

Update: go with Daren’s approach above ☝

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 22, 2023, 11:36am UTC](https://community.glideapps.com/t/pyramid-chart/68850/20 "2023-12-22T11:36:16Z")

</div>

That works, I guess I did this before in another case, but, how do I specify the quantity of some action I want to put on ${quantidade} that is going to receive some quantity when some action is executed, in the template to make dynamic data? In the template, we change a specified word for some column we want to use, in this case, how do I make this work? I need to specify eight quantities of actions that are different

 ![Captura de Tela 2023-12-22 às 08.27.53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/616fa769371d7d411c45aaf208327e60ff1eadfa.png)

[Next page](https://community.glideapps.com/t/pyramid-chart/68850.md?page=2)