Jump to content

Google Charts with Data Input on Website

Recommended Posts

I am looking into a solution using Google Charts visualization API to create a chart on a website that has one area where a user can input a number that dynamically changes the chart and produces a different result. So for example the chart would show two products that have different price points and if the user enters one number (times used per month) it produces result A and if they enter a different number it would produce Result B. I have seen samples with a slider but would it be possible to do with a text (#) input?

Link to comment
  • Replies 4
  • Views 767
  • Created
  • Last Reply
On 6/9/2021 at 2:56 AM, UtopiaCreates said:

I am looking into a solution using Google Charts visualization API to create a chart on a website that has one area where a user can input a number that dynamically changes the chart and produces a different result. So for example the chart would show two products that have different price points and if the user enters one number (times used per month) it produces result A and if they enter a different number it would produce Result B. I have seen samples with a slider but would it be possible to do with a text (#) input?

You can register input event on the number input, it's almost identical to use the range slider

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 or anyone else that may know the Google Charts API.

I am good at taking code samples and editing them but I am not familiar enough with JS and the Google Charts API to build what I want from scratch. Is this something you could do? If so can you message me from my website (utopiacreates.com) and let me know how much something like this would cost. Basically what the client is looking for is a chart that shows a comparison of cost between two products over time based on a variable number that the visitor can change. I have a rough example here using Grid "https://lawyerdonedeal.squarespace.com/chart-test"  The data for the chart would live inside a Google Spreadsheet. There would be multiple versions of the chart with slightly different numbers.

What I would need is a nice base sample of code to get it to work. Ideally with as much as possible style wise controlled with css.

Link to comment
11 minutes ago, UtopiaCreates said:

@bangank36 or anyone else that may know the Google Charts API.

I am good at taking code samples and editing them but I am not familiar enough with JS and the Google Charts API to build what I want from scratch. Is this something you could do? If so can you message me from my website (utopiacreates.com) and let me know how much something like this would cost. Basically what the client is looking for is a chart that shows a comparison of cost between two products over time based on a variable number that the visitor can change. I have a rough example here using Grid "https://lawyerdonedeal.squarespace.com/chart-test"  The data for the chart would live inside a Google Spreadsheet. There would be multiple versions of the chart with slightly different numbers.

What I would need is a nice base sample of code to get it to work. Ideally with as much as possible style wise controlled with css.

I'll pm you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
10 hours ago, bangank36 said:

I'll pm you

Sent

 

11 hours ago, UtopiaCreates said:

@bangank36 or anyone else that may know the Google Charts API.

I am good at taking code samples and editing them but I am not familiar enough with JS and the Google Charts API to build what I want from scratch. Is this something you could do? If so can you message me from my website (utopiacreates.com) and let me know how much something like this would cost. Basically what the client is looking for is a chart that shows a comparison of cost between two products over time based on a variable number that the visitor can change. I have a rough example here using Grid "https://lawyerdonedeal.squarespace.com/chart-test"  The data for the chart would live inside a Google Spreadsheet. There would be multiple versions of the chart with slightly different numbers.

What I would need is a nice base sample of code to get it to work. Ideally with as much as possible style wise controlled with css.

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.