Node(JS) + QuickChart = Plotting Graphs.
Tags: api, webdev, node, github
Published: 2022-10-31 16:40:25

###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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oa015kq1mjpkn8n19yks.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/711agxdp7u0o38q788ab.png)


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](https://nodejs.org/) installed as well as [npm](https://npmjs.com/).

I think it is a good idea to make this project in steps so I will be doing just that!

**Setting up steps.**
1. 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.
2. 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.js`
This will create 2 files.
3. 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`.
4. `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](https://expressjs.com/).
5. `npm install body-parser --save` - Install bodyParser package.
We will use this to get contents from the HTML file in the JavaScript file.
6. `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.
1. Open `app.js` file and include all the packages we installed.
Would look like this:
```javascript
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](https://stackoverflow.com/questions/55558402/what-is-the-mean-of-bodyparser-urlencoded-extended-true-and-bodyparser).
2. Now open `index.html` file 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.
1. A <form> with "post" method, target as "_blank" (opens link in new tab).
2. 3 data input fields, 1 is a dropdown.
3. 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:
```html
<!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>
```
3. Now we will send this HTML file as GET request like so:
```javascript
app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
})
```
4. Now we will take the values the user gave from the HTML form to the variables that we will declare in `app.js` file.
```javascript
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](https://quickchart.io/documentation/#parameters).

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status).

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](https://github.com/Syncrofosatron/QChartIO/).

######Was it easy? Or nah?
######Let me know what could have made it easier to understand and better to read (except the jokes I made).
###### I will check it for errors/mistakes as well.

####🎃 Happy Halloween! 🎃