I wanted to mock up a simple chart that visualized my key product marketing skill strengths to show, at a glance, why someone should hire me. I could have used Excel or other BI tools to do this. But I decided to try it with AI. In this case ChatGPT (free version).
It’s very basic, but I wanted to share to show how even non-tech people can do this stuff. It probably would have taken me (with my rusty skills) 3 or 4 hours to figure this out with Google Chart tools and documentation. In this case, it took me longer to create this page with Elementor than it did to create the simple dynamic visualization page.
For “real programmers,” yeah this is a nothingburger. But you are not the target audience of this exercise and example.
Dynamic Skill Chart
Here is the workflow:
- Write a prompt
- Copy the HTML to a local .HTML file
- On Chrome press CTRL+O to open a local file
- Test it
- Adjust the prompt to update the HTML
- Publish the HTML on a page on my web site and share with you
- Using a text editor
- Being able to open a local file on Chrome
- (Optional) Being able to use WordPress or other tool to publish a live web page and embed an HTML snippet into the page
- (Optional) Continue to manually tweak.
Please create a single web page in a complete HTML file (a single file I can publish as a web page) that does the following using Javascript and the Google Charts Library. For inputs, create three fields that allow the user to enter three numbers from 1 to 10. One labeled “Creativity” one labeled “Technology” and one labeled “Presentation Skills.” Then, using Google Charts, create a 3D pie chart that represents these numbers and labels in a 3D pie chart. Each data point should be represented in the chart in a different color. Also create a button that says “Refresh” next to the data inputs that will refresh the 3D pie chart after the user updates the numbers.
ChatGPT asked me: “Would you like me to also make the chart update automatically as soon as the user changes a number, without needing to press the button?” I agreed. It also asked me “Do you also want me to make the inputs use sliders (range inputs) so you can drag values from 1–10 and see the chart update smoothly?” I agreed.
2 – I added this request
In addition, please left align the categories.
Please add a drop-down at the top to dynamically choose between the following kinds of charts: Area Chart; Line Chart; Bubble chart
Please remove bubble chart. Please add gauge chart. Please add donut chart. All to the drop-downs
Deleted all the stuff before the <title> at the top and the </html> at the bottom. I probably didn’t have to do this.
Here’s a clear summary of the current prompt that shaped the HTML file:
Inputs:
Three sliders (values 1–10) for Creativity, Technology, and Presentation Skills.
Each slider shows its current value next to the label.
Sliders are left-aligned inside a centered container.
Chart Options:
At the top, there’s a dropdown menu that lets the user choose the chart type.
Available chart types:
3D Pie Chart
Donut Chart
Gauge Chart
Area Chart
Line Chart
Chart Rendering:
Uses Google Charts (
corechart+gaugepackages).The chart updates automatically when a slider is moved or when the chart type dropdown is changed.
Colors are consistent: Creativity (orange), Technology (blue), Presentation Skills (green).
Layout & Styling:
Page is centered, but the labels and sliders are left-aligned within their container.
The chart is displayed below the controls in a responsive size.