How to make date spacing proportional on AppSheet chart? Question: Hi everyone, I’m working with a Google Sheet connected to AppSheet. Each row in my sheet has a date associated with it, and the dates are in chronological order but not evenly spaced — for

AppSheet AppSheet Q&A
,
1

Hi everyone,
I’m working with a Google Sheet connected to AppSheet. Each row in my sheet has a date associated with it, and the dates are in chronological order but not evenly spaced — for example, some dates are just one day apart, others might be a week or more.

When I generate a chart in AppSheet (e.g., a line chart), the dates on the x-axis appear evenly spaced, regardless of the actual time intervals between them. This makes the visual representation misleading.

I’ve checked that my sheet date column in formatted as Date type.

I want the spacing between dates on the chart to reflect the actual number of days between them — so if two dates are 10 days apart, they should appear farther apart than two dates that are just 1 day apart.

Has anyone managed to do this in AppSheet? Is there a way to make the x-axis scale based on real date intervals?

2

Hi! There may be a way to do this with the chart functions that are part of the AppSheet platform but I have chosen to do something similar with QuickChart, an external service that can be integrated and used within AppSheet.

Here’s an example of something I’m doing that plots events on a chronological chart (the unit of measure is “session number” but it could easily be “date”).

Here’s a sample from my app of an actually QuickChart URL that makes and image that I show in my app via an image column. If you copy it and paste it into a browser, you’ll see the image. The trick is to make an AppSheet expression that causes QuickChart to construct the graphic you’re imagining.

https://quickchart.io/chart?c={type:%22scatter%22,data:{datasets:[{label:%22Data2%22,showLine:true,steppedLine:true,fill:false,lineTension:0,pointStyle:%27line%27,borderWidth:1,pointRotation:90,radius:20,pointRadius:15,borderColor:%27black%27,data:[{x:2747,y:3,},{x:2748,y:3,},{x:2752,y:3,},{x:2759,y:3,},{x:2773,y:3,},{x:2797,y:3,},{x:2839,y:3,},{x:2910,y:3,}],},{label:%22Data3%22,showLine:false,steppedLine:true,pointStyle:%27line%27,fill:false,lineTension:0,pointRadius:15,pointRotation:90,borderWidth:1,radius:1,borderColor:%27red%27,data:[{x:2747,y:2,}],},{label:%22Data6%22,showLine:false,steppedLine:true,pointStyle:%27line%27,fill:false,lineTension:0,pointRadius:7,pointRotation:90,borderWidth:1,radius:1,borderColor:%27grey%27,data:[],},{label:%22Data6%22,showLine:false,steppedLine:true,pointStyle:%27line%27,fill:false,lineTension:0,pointRadius:7,pointRotation:90,borderWidth:1,radius:1,borderColor:%27grey%27,data:[],},{label:%22Data4%22,showLine:false,steppedLine:true,pointStyle:%27line%27,fill:false,lineTension:0,pointRadius:15,pointRotation:90,borderWidth:1,radius:1,borderColor:%27red%27,data:[],},{label:%22Data5%22,showLine:false,steppedLine:true,pointStyle:%27line%27,fill:false,lineTension:0,pointRadius:110,pointRotation:90,borderWidth:3,radius:3,borderColor:%27lightblue%27,data:[{x:2882,y:3,}],},],},options:{legend:{display:false,position:%27bottom%27,labels:{fontSize:20,fontStyle:%27bold%27,}},scales:{yAxes:[{scaleLabel:{display:true,labelString:%27W%20to%20M%20errors%20%20%20GOT%20ITs%20%20%20M%20to%20W%20errors%27,},ticks:{min:1,max:5,display:false,reverse:true,stepSize:1,}}],xAxes:[{scaleLabel:{display:true,labelString:%27Session%20numbers%27,},}],}}}
2 Likes
3

There’s no good way to do it with the built-in charting feature. I agree with @Kirk_Masden’s suggestion.

2 Likes