# Quickchart question about bar graphs

**URL:** <https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963>\
**Category:** Ask for Help\
**Created:** [November 23, 2021, 1:30pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963 "2021-11-23T13:30:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 23, 2021, 1:30pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/1 "2021-11-23T13:30:15Z")

</div>

Hello Gliders! I’m using a barchart from [Quickchart.io](http://Quickchart.io) and I had a question about how I should get my data in the dataset properly. Here’s the dataset code:

```auto
  datasets: [
      {
        type: "line",
        label: "Goal Amount",
        borderColor: "#043f21",
        borderWidth: 3,
        fill: false,
        showLine: false,
        pointRadius: 13,
        pointHoverRadius: 13,
        data: [
          33,
          26,
          29,
          89,
          41,
          70,
          84
        ]
      },
      {
        type: "bar",
        label: "Total Profit",
          display: false,
        backgroundColor: "#51b84d",
        data: [
          42,
          73,
          69,
          94,
          81,
          18,
          87
        ],
        borderColor: "white",
        borderWidth: 0
      }, 
    ]
  },

```

The data I’d like in the above code would be the goal amounts and the total profit from this table. I’m not sure how I can accomplish it? This is how the table is setup:

 ![Screen Shot 2021-11-23 at 8.29.51 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f5007fa01729c804c3942ec01b7dbf95cc9d1696.jpeg)

---

<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:** [November 23, 2021, 1:51pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/2 "2021-11-23T13:51:14Z")

</div>

For each of the two columns, create a Joined List column using a comma separator.  
And then use that joined list column as a replacement in your template. It should look something like this:

```auto
label: "Goal Amount",
        borderColor: "#043f21",
        borderWidth: 3,
        fill: false,
        showLine: false,
        pointRadius: 13,
        pointHoverRadius: 13,
        data: [{joined-list-goal-amount}]

```

---

<div class="post-metadata">

**Author:** ![Mozza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mozza/32/34362_2.png) [@Mozza](https://community.glideapps.com/u/Mozza)\
**Post date:** [November 23, 2021, 1:52pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/3 "2021-11-23T13:52:30Z")

</div>

Hi.  
Maybe this could help:

> [@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:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 23, 2021, 4:18pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/4 "2021-11-23T16:18:06Z")

</div>

Thank you 😀

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 26, 2021, 1:40pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/5 "2021-11-26T13:40:43Z")

</div>

This joined list works great! Thank you! However I noticed it only works for the y-axis values, but not the x-axis values. So my template looks like this:

 ![Screen Shot 2021-11-26 at 8.37.37 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1adcbfbf12613506240aa4c3a83a1b726c94f247.jpeg)

Here’s the reference column:  
 ![Screen Shot 2021-11-26 at 8.38.03 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/b/2b96c57c404e972c72b362b93e37a1065ab79846.jpeg)

Here’s the chart display. It only shows the last month?

 ![Screen Shot 2021-11-26 at 8.38.15 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/919652ab06333344f0f4021c9336d889594c3eee.jpeg)

Also, is there a way to only show the last X amount of months? As time goes by this chart would extend pretty far on the x-axis unless I can limit it somehow.

---

<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:** [November 26, 2021, 2:40pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/6 "2021-11-26T14:40:38Z")

</div>

As far as the inline list is concerned in the right hand side of the data editor you should be able to “limit the number of items”.

 ![Screen Shot 2021-11-26 at 9.37.33 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/eaaea5bc6d7339ca521e715a76deea14852b44a9.png)

For the chart you should be able to use an If-Then-Else column to narrow down your dates and then point the chart to that if-then-else.

---

<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:** [November 26, 2021, 3:43pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/7 "2021-11-26T15:43:09Z")

</div>

> [@Trading\_5\_Talents](#):
>
> However I noticed it only works for the y-axis values, but not the x-axis values.

hmm, I can’t see any obvious reason why that isn’t working.  
One of the downsides of quickcharts with Glide is they can be quite tricky to debug. What I usually do if I have one that isn’t behaving is dump the entire chart URL into a rich text component, and then carefully examine it.

> [@Trading\_5\_Talents](#):
>
> Also, is there a way to only show the last X amount of months? As time goes by this chart would extend pretty far on the x-axis unless I can limit it somehow.

There are a few different ways to do this. Is the Joined List operating through a relation?  
Assuming it is, what you could do is apply some logic in the source sheet to filter the relation.  
Let’s say you only want data for the past 6 months. A rough and ready way could be:

- Create a math column with the formula `Now - 182`, which will give you the date approximately 6 months ago
- Compare that to the row date using an if-then-else column:  
– If date is on or after 6 months ago, then date
- Now just build your relation to that if-then-else column, instead of the original column

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 29, 2021, 8:22pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/8 "2021-11-29T20:22:55Z")

</div>

Thank you both! @Eric_Penn and @Darren_Murphy !!! I managed to get the barchart x-axis labels working (there was some formatting issues with quotation marks in my joined list) as well as the filtering that shows only the last x months of data. Once again, this community of Gliders is awesome!

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 29, 2021, 9:42pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/9 "2021-11-29T21:42:22Z")

</div>

I just wanted to share what it now looks like as I added a selector to adjust the chart’s x-axis to display more data. Thanks again!

 ![3 Months](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/0/a04b747554b4044beb4f9a049ae010a11f0ff7a6.png)  
 ![6 Months](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0cc0553bf573c13c2229fab81d7d1f212041bf95.png)  
 ![9 Months](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/baeed3163e12272415bf734a8412db9d574084b9.png)

---

<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:** [November 29, 2021, 9:58pm UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/10 "2021-11-29T21:58:26Z")

</div>

Looking good!! Just a quick suggestion… if you make the choice component required it will get rid of the “-“ as an option.

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [November 30, 2021, 12:18am UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/11 "2021-11-30T00:18:43Z")

</div>

Awesome! Thanks for that tip 👍

---

<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:** [November 30, 2021, 12:31am UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/12 "2021-11-30T00:31:51Z")

</div>

Nice work! 👍

Also, what Eric said.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [December 1, 2021, 12:32am UTC](https://community.glideapps.com/t/quickchart-question-about-bar-graphs/34963/13 "2021-12-01T00:32:27Z")

</div>

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