Hello Pumpkins and Munchkins!
Halloween's today and so my post. Both are totally coincident by accident.
So, this is a beginner level tutorial where we will build something sweet using QuickChart.
This is how the final product will look like:
Let's get started, shall we?!
Note: I am using Hyper terminal for the execution of the commands and I am hoping that you have the latest version of Node.js installed as well as npm.
I think it is a good idea to make this project in steps so I will be doing just that!
Setting up steps.
- Choose whatever location you want and create a folder there of your choice. For example:
mkdir QChartIO. "QChartIO" is the name I gave, you could give any. - Now we will create some files. You could do it manually or using the console/terminal. In Hyper terminal it looks like this:
touch index.html app.jsThis will create 2 files. - Now we will initialize "npm" and install the packages which are useful for the project we are building.
We do that by running the following command on console/terminal.
npm init- Now you will have to enter some details about the project you are making, if you don't know what to fill then just press enter. A shortcut to automatically fill in the details:npm init -y. -
npm install express --save- Install Express(JS) package (you can omit the "--save" parameter). This is a framework for creating the web application, which is just what we want. If you wanna learn more, here's the link. -
npm install body-parser --save- Install bodyParser package. We will use this to get contents from the HTML file in the JavaScript file. -
npm install https --save- We will use this to get status codes, for error handling.
Terrific job! You deserve fake Dracula teeth coming this far! Just don't bask in the sun after that.
Now we will work on writing the codes! Program! Whatever you wanna call it.
- Open
app.jsfile and include all the packages we installed. Would look like this:
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const https = require("https");
Set up the body-parser like this:
app.use(bodyParser.urlencoded({extended: true}));
For more information on body-parser, you can check this.
- Now open
index.htmlfile and write the following code. If you want, you can make your own without looking one below for more challenge and better understanding. Just remember what you need. - A with "post" method, target as "_blank" (opens link in new tab).
- 3 data input fields, 1 is a dropdown.
- Dropdown one contains the chart types which you can find at: , the other 2 are just data and labels, you can put whatever there for testing. Now, that's how I made it:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QuickChart.io</title>
</head>
<body>
<form action="/" method="post" target="_blank">
<h2><label>Input defined values: </label></h2>
<h4>Type (bar, pie...)</h4>
<select name="type" id="type_chart">
<option value="bar">Bar</option>
<option value="line">Line</option>
<option value="radar">Radar</option>
<option value="pie">Pie</option>
<option value="doughnut">Doughnut</option>
<option value="polarArea">Polar</option>
<option value="scatter">Scatter</option>
<option value="bubble">Bubble</option>
<option value="radialGauge">Radial Gauge</option>
<option value="violin">Box and Violin</option>
<option value="sparkline">Sparklines</option>
<option value="progressBar">Progress Bar</option>
</select>
<h4>Data (to create the chart of)</h4>
<input id="data_chart" type="text" name="data">
<h4>Labels (x-axis)</h4>
<input id="labels_chart" type="text" name="labels">
<br> <br>
<button type="submit">Go</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
- Now we will send this HTML file as GET request like so:
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
})
- Now we will take the values the user gave from the HTML form to the variables that we will declare in
app.jsfile.
app.post("/", function(req, res){
var js_type = req.body.type;
var js_data = req.body.data;
var js_labels = req.body.labels;
console.log(js_type);
console.log(js_data);
console.log(js_labels);
const url = "https://quickchart.io/chart?c={type:'" + js_type + "',data:{labels:[" + js_labels + "],datasets:[{label:'Users',data:[" + js_data +"]}]}}"
https.get(url, function(response){
console.log(response.statusCode);
})
res.redirect(url);
})
With the help of body-parser package, we can make us of this line as you can see in above code: var js_type = req.body.type (type here means the type of chart we want to get made, i.e., Bar, Line, Radar, Pie etc.).
But how we are getting the data from HTML input form to the Javascript file app.js? Look at the HTML code, find "type". Okay okay, I will help you in doing that. It is here:
<select name="type" id="type_chart">
So, with this name="type" field, we are taking this data from this HTML to app.js file using body-parser.
See, in app.js file, we have var js_type = req.body.type, this type thing varies according to the data that we are trying to get from HTML input from user. In short, after the dot in req.body., just put the value that you have given to name="..." field in HTML.
Note: The QuickChart plots chart when we give them the data in the form of URL, so we will just take all the data the user input in the form, and put that in the URL and send that response to QuickChart.
More information can be found here.
The https package is used to receive the statusCode here, so if you get code 200, that means the request is successful and you will get a sweet response back. If it is other than 200-299, oh well, we are in trouble.
Find more information about these codes here.
Alright, the final step is just to redirect the browser to the URL that we just created according to the QuickChart specifications (remember that in HTML file, we put target as "_blank", this will open the URL in new tab).
When we will do that, we will find the response and a beautiful chart rendered in our webpage!
Awesome! Take your treats now: πͺππ«
What times, to get treats we have to do so much of work. π
You can find the full project here.
Top comments (0)