# Chart Choice

**URL:** <https://community.glideapps.com/t/chart-choice/22790>\
**Category:** Feature Requests\
**Created:** [February 15, 2021, 2:00am UTC](https://community.glideapps.com/t/chart-choice/22790 "2021-02-15T02:00:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 15, 2021, 2:00am UTC](https://community.glideapps.com/t/chart-choice/22790/1 "2021-02-15T02:00:33Z")

</div>

Hello,

I really need the variety of charts since I am using this app for sales tracking.  
So that the chart really needed.  
Eg : Scatter chart , waterfall chart and others.

---

<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:** [February 15, 2021, 3:30am UTC](https://community.glideapps.com/t/chart-choice/22790/2 "2021-02-15T03:30:49Z")

</div>

Have you looked at the Chart options available at [quickchart.io](http://quickchart.io)?

For some inspiration, see below…

> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946):
>
> GAME CHANGER! Stumbled upon this site today—a way to create on the fly charts using data from your Glide tables. Images render instantly and you can select one of 14 different charts, customize colors, styles etc all through URL parameters! The video below shows my first attempt to create a chart from scratch and implement it in Glide. Took me less than 5 minutes. End result:

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 15, 2021, 5:34am UTC](https://community.glideapps.com/t/chart-choice/22790/3 "2021-02-15T05:34:08Z")

</div>

Do you have any idea on how to do the scatter chart based on two column (date and amount).  
Only need one chart for the whole data.  
As the video as you showed, it based on one data one chart right?

[image]

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 15, 2021, 5:34am UTC](https://community.glideapps.com/t/chart-choice/22790/4 "2021-02-15T05:34:56Z")

</div>

![Trend By Model](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/c/9c552965244420e2c55cc8552a303ad0a39c8e14.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:** [February 15, 2021, 5:44am UTC](https://community.glideapps.com/t/chart-choice/22790/5 "2021-02-15T05:44:21Z")

</div>

You can use the quickchart [Scatter Chart Sandbox](https://quickchart.io/sandbox/#%7B%0A%20%20%22type%22%3A%20%22scatter%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20First%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba(255%2C%2099%2C%20132%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-49%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2040%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-59%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-67%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%2084%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-31%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-92%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-50%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-21%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-39%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-79%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2056%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-25%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2081%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20Second%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba(54%2C%20162%2C%20235%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%2082%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2032%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-88%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-59%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%2017%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2099%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-84%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2012%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-76%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2091%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-98%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%2071%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22x%22%3A%20-51%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22y%22%3A%20-31%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Scatter%20Chart%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D), and plug in your own data. This will give you a URL, that you can then use with a [Construct URL](https://docs.glideapps.com/all/reference/data-editor/computed-columns/construct-url) Column in Glide to call the API and generate the chart.

Below is a worked example of how to do all this:

> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/125):
>
> So here is the one I did using the Construct URL column… Started off with a URL that looked like: https://quickchart.io/chart?bkg=white&c={.........} There are two query parameters in that URL: bkg=white c={ JSON structure } So I took the whole JSON structure, and put that in a template column: Then defined the Construct URL column as follows: The first query parameter was simple, so I “hard-coded” that, …

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 15, 2021, 5:52am UTC](https://community.glideapps.com/t/chart-choice/22790/6 "2021-02-15T05:52:45Z")

</div>

So , I have to insert the data manually into the template isn’t ?  
But the things is my data is dynamically change.  
For example,  
User will choose the model , status and others first.  
And data will change for the chart.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/159da28e4ebf464b9f31709a9d88c2011f3aaca3.png)

Currently , I am using the bar chart.  
But my intention not really good for this objective.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c3fd738149903f6410a6f2b1283262eb2ffcf433.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:** [February 15, 2021, 5:54am UTC](https://community.glideapps.com/t/chart-choice/22790/7 "2021-02-15T05:54:12Z")

</div>

Use replacements in your template to insert the data dynamically.

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 15, 2021, 6:45am UTC](https://community.glideapps.com/t/chart-choice/22790/9 "2021-02-15T06:45:12Z")

</div>

Here i am using the code:  
It is correct?

{  
“type”: “scatter”,  
“data”: {  
“datasets”: [  
{  
“label”: “Trend By Model”,  
“borderColor”: “rgb(255, 99, 132)”,  
“backgroundColor”: “rgba(255, 99, 132, 0.2)”,  
“data”: [  
{  
“x”: x,  
“y”: y },

```
]

```

},  
“options”: {  
“title”: {  
“display”: true,  
“text”: “Chart.js Scatter Chart”  
}  
}  
}

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/49511b28d3ea112d26bd5dbdd3c55fe7d018b8ee.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:** [February 15, 2021, 6:59am UTC](https://community.glideapps.com/t/chart-choice/22790/10 "2021-02-15T06:59:03Z")

</div>

That looks like it’s just going to give you a chart with a single data point. What you probably need to do is:

1. Use a template column to generate the data item for each row. That might look something like this:  
 ![Screen Shot 2021-02-15 at 2.56.15 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d361365d68cf4b88ac4ea01aec2d65dd07606190.png)
2. Use a Joined List column to stitch all of the individual rows together.
3. And finally, use that Joined List column as a replacement in your template