Introduction Charts had become a normal part of our lives, visual elements of our work. How do they grow? Are they decreasing or increasing? Or just to see progress over time. So it hits me. Why not create a chart-building webpage where you enter the data and it creates the webpage? And with the help of AI it could be even easier. What's the idea? Easy, it should: Let me enter data. See the progress over time. And finally download it as a PNG. Let me enter data. See the progress over time. And finally download it as a PNG. But what it really needs is the code? First part: CSS Styles the layout (dark theme, spacing, and buttons).Makes the interface clean and readable. Styles the layout (dark theme, spacing, and buttons). Makes the interface clean and readable. Javascript Main function function drawChart() { ... } function drawChart() { ... } This function is the heart of the code. It lets you read the input, draw a grid, and last but not least, plot data. Receiving the user input const vMin = parseFloat(document.getElementById("vMin".value); const vMin = parseFloat(document.getElementById("vMin".value); This part is used to take the inputs and convert them into numbers. With this part the code will not know what to draw. So basically it's useless. Setting up the canvas const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); Everything you see on the chart is drawn here. So basically it creates the drawing board. Grid drawing ctx.moveTo(pad, y);
ctx.lineTo(pad+w, y);
ctx.stroke(); ctx.moveTo(pad, y);
ctx.lineTo(pad+w, y);
ctx.stroke(); For creating the vertical and horizontal lines, the squares in the background. Scaling the data let normalized = (val - vMin) / (vMax - vMin); let normalized = (val - vMin) / (vMax - vMin); Now this line is very important. It converts the data into percentages. And make them fit inside the chart. Positioning each point at the right place let x = pad + (i/(data.length-1)) * w;
let y = pad + h - normalized * h; let x = pad + (i/(data.length-1)) * w;
let y = pad + h - normalized * h; spreads points across Xplaces them correctly on Y spreads points across X places them correctly on Y Drawing the data lines (of your data) ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke(); ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke(); Without this, the image will appear as just squares and no data inside them. Download image canvas.toDataURL() canvas.toDataURL() This part is what lets the image be downloaded. Here's a demo if you want to try it yourself. demo Who it can be used for Today, every company uses graphs. And even people, when they want to show things to other people. They can make it into graphs, so they are more readable. Even in schools and universities, they teach students about graphs and how to use them. Conclusion This idea is basically a way to make showing data easier. And to see that with a little bit of coding and imagination, it could become possible. Coding isn't just about writing code. But about what the code does. It is the most important part.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Interactive Data Chart Generator (Pure JavaScript Canvas Tool)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Building a DIY Keypad Circuit With Diodes and AI Tools

The Noonification: How Often Do NFTs Pass The Howey Test? (1/13/2023)

Darwin's Hybrid Intelligence to Align AI & Human Goals for Startups & VCs

The Noonification: White Man (11/26/2022)

The Noonification: The Metaverse is a Sh*tshow (11/2/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps