DEV Community: Nikola Geneshki

Building REST API for data visualization with Flask

Nikola Geneshki — Sat, 11 Feb 2023 17:15:16 +0000

Lately I’m working on a project that involves gathering data in one way or another and then visualizing it using a chart. Up to now I have created a web page with a chart on it, and it wasn’t easy. First I decided I’ll build the chart myself, then I snapped back to reality and built a web component with Chart.js to replace my excuse for a chart. Now I want to make this page dynamic and actually provide some data to this chart. So here I’ll build a REST API for it using Flask.

Requesting data from a REST API

Let’s start this task with a slight deviation. Since I already have some kind of UI for this API I would like to use it to see if I’m doing well or not. This means I need the UI to request the data from the API and then visualize it.

I could do this last of course, but I prefer doing this first, to shorten the feedback loop. So what do I need to do?

Fetch the data

Naturally, I need some data to load. The only way I know how to do this is to ask the back-end to give me some. This back end is going to be our API, so in effect I’m going to make a call to it.

There are many npm packages which are allowing you to do an http call from a web client, and of course there’s the Ajax calls that are a standard. However I prefer the newer standard Fetch API which is available in every modern browser.

Fetching the data is pretty simple really. It all starts with calling the fetch function. Let’s try doing it like that:

const dataPromise = fetch('/data');

The fetch() method takes at least the URI to the resource we need. You can see that I have only written the last part of a valid URI. The reason is, that fetch() considers this resource to be on the same server from where this web page is served. So if your URL is ‘https: //example.com’, fetch() would append this URL in front of the resource path you give it here.

This call would return us a promise. Promises are a complex beast, but the easiest way to deal with them is to use an async function and to await the result. Then we can set it to our chart:

async function fetchData() {
  return await fetch('/data');
}

The problem with this function is that since itself is asynchronous, it will return a promise, not whatever is behind the return keyword. The return actually designates the value this promise resolves to. So to break this cycle of promises, we need to set the data to the chart in this function itself. Perhaps it’s better to rename the function to loadData().

Pass the data to the chart

Let’s try to amend the function above:

async function loadData(chart) {
  const dataResponse = await fetch('/data');
  chart.setAttribute(dataResponse.text());
}

Let’s imagine the parameter chart is the web component I built before. It requires the data to be set to its data attribute and this attribute is in the form of a string.

The data itself we can get from the object which the promise from fetch resolves to. It has a bunch of handful methods, but the one we need is text(), which gives us the response from the back-end as string. Which reminds me it is time to create this back-end.

Creating the Flask Application

Following the Flask Quickstart page I can quickly make the root page show something:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

And I can run the server with:

flask --app hello run

So I’ll save my new Flask application under app.py and run the command above. What I get is:

Usage: flask run [OPTIONS]
Try 'flask run --help' for help.

Error: Could not import 'hello'.

Well, I guess the file needs to be called hello.py. And then I’m greeted with this wonderful message:

 * Serving Flask app 'hello'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

Great! This means we have a server running and we can access it at http://127.0.0.1:5000! I’ll spin up a browser and check what’s there.

It’s not a lot, but we have the “Hello World” that was expected! Hurray! We have a Flask application! Let’s do something useful with it.

Defining the REST API

One of the most important things that has to be done when you’re devising a REST API is to decide what the resources would look like. This is basically the names of your functions, so they have to be pretty, easy to understand, somewhat short and very, very stable. If you ever change one part of the URI for a resource, someone’s code is going to break.

Fortunately, we already defined our resource in the front-end part above, so there’s no need to worry about things like this. We just have to implement the /data resource. So let’s build the function that would process this call.

Build the request handler

First, let’s write some Python code and return a string to the caller. The string I’ll take from the web component article and it’ll be the JSON passed to the Chart constructor.

def data():
    return '''{
        "type": "line",
        "data": {
          "labels": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
          "datasets": [
            {
              "label": "dataset 1",
              "data": [{ "x": 0, "y1":2, "y2":1 },{ "x": 1,"y1":2}, { "x": 1.4,"y1":6 }, { "x":2,"y1":3 }, { "x":3,"y1":6 }, {"x":5, "y2": 2}, {"x":6, "y2":1}, {"x":8, "y2":6}, {"x":9,"y2":6}, {"x":10,"y2":0}],
              "parsing": {
                "yAxisKey": "y1"
              },
              "borderColor": "rgb(75,192,192)"
            },
            {
              "label": "dataset 2",
              "data": [{ "x": 0, "y1":20, "y2":1 },{ "x": 1,"y1":2}, { "x": 1.4,"y1":6 }, { "x":2,"y1":3 }, { "x":3,"y1":6 }, {"x":5, "y2": 2}, {"x":6, "y2":1}, {"x":8, "y2":6}, {"x":9,"y2":6}, {"x":10,"y2":0}],
              "parsing": {
                "yAxisKey": "y2"
              },
              "borderColor": "rgb(192,192, 75)"
            }
          ]
        }
      }'''

Route the requests to the handler

Now we have our data ready to be served, we only need to call this method when there is a request for the /data resource. Just slap an @app.route decorator on top of the method like this:

@app.route("/data")
def data():
  ...

And this is enough to receive the data once we navigate to http://localhost:5000/data. So our REST API is up and running. But when I open the web page with the chart I created for testing I see only a form, no chart. There should be a chart here, but it doesn’t show:

Allowing Fetch to use REST APIs with different origin

This is a bit of a side topic but it completes the picture. Since I’m building the UI above with React I’m running a server on localhost:3000. For the REST API I run a development Flask server on localhost:5000. While they are both running on my local machine, the fact that they’re two separate servers is enough to confuse fetch and send the REST API call to the UI server.

To fix this I can simply add the full address of the /data resource:

async function fetchData() {
  return await fetch('http://localhost:5000/data');
}

This would, however, fail since I’m calling a different server from origin. In fact, it fails with this particular error in the web browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/data. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

CORS setup for our Frontend

CORS stands for Cross-Origin Resource Sharing. It is by default disabled, because Cross-Origin requests can be exploited for a cross-site scripting attacks. But sometimes people do need to access multiple servers for a single web page, so there is a solution to this too.

First’ let’s make our fetch send requests in ‘cors’ mode by passing an option to it:

  const response = await fetch('http://127.0.0.1:5000/data', {method: 'GET', mode: 'cors'});

Now let’s see what happens in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/data. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. [Learn More]

Enabling CORS on the Backend

The error that I got in the console is there to tell the developer that something has to be done on the backend. It doesn’t explain it well. But that’s what I found out when I googled it.

Therefore I needed some code that puts the ‘Access-Control-Allow-Origin’ header to the response of the Flask App. Something like Flask-CORS. Let’s install it and try it out:

pip install flask-cors

Once installed, I imported it in the hello.py module and initialized it like this:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

This is the simplest way to use Flask-CORS and it allows CORS on all routes. Once this is done, the error message in the console disappears and a beautiful chart appears on the page:

Going Forward

Now that I have a connection between my frontend and the backend, I can focus on writing “business logic” and exposing it through the REST API. This would of course make the Flask app look very ugly if all the end-points are in the single file we created for this server.

To deal with this, you can use Flask-Restful.

If, on the other hand you are trying to present data real-time, perhaps the Server-sent Events approach I described earlier would be more appropriate.

If you wonder how the chart got so big, have a look at Making Canvas greedy using CSS flexbox.

How I made Chart.js sane by wrapping it in a web component

Nikola Geneshki — Sat, 21 Jan 2023 14:01:56 +0000

I have this tiny web-based project which isn’t fun, doesn’t go well and I still keep working on once every 6 months or so (perhaps this is its main problem). One of its features is related to presenting loads of data, so a chart would be great to have. At first I looked at libraries for charts like Chart.js and Highcharts, and I decided on Chart.js because of its license. Unfortunately it has this unintuitive API that requires to pass a canvas to it instead of directly declare a line chart.

That’s why I decided to make it myself. Not a good idea, but that’s how I roll. Six to eight months of trying to make it work, I had a horrible spaghetti code that yielded this:

Then I compared my code to the Chart.js GitHub repository, and I decided it isn’t worth it to start from scratch. They’re pretty good at coding! So I gave it a try another time.

Salvaging useless code

I decided I’m going to replace the old chart I made directly with the new one. This way it was easier to debug and test. This allowed me to reuse the web component setup I worked so hard to incorporate into my failed project. At least there’s some time recovered from that fiasco.
How to make a web component

Even though I salvaged it from a previous development, I feel it’s right to explain how to make a web component. This way it’s pretty clear what you need to make all of this work.

Following MDN’s tutorials, I created a class that extends HTMLElement and in its constructor I did this:

class LineChart extends HTMLElement{
  constructor() {
    super();
    this.attachShadow({mode:'open'});
    this.shadowRootDiv = document.createElement('div');
    this.canvas = document.createElement('canvas');
    this.shadowRootDiv.append(this.canvas);
    this.props = {};

    this.shadowRoot.appendChild(this.shadowRootDiv);
  }
}

It’s very important to call the super() constructor to initialize the web component.

Then we need to attach the shadow DOM and afterwards we have all the necessary elements of the component created and structured. This includes the canvas we’ll be using for Chart.js:

    this.attachShadow({mode:'open'});
    this.shadowRootDiv = document.createElement('div');
    this.canvas = document.createElement('canvas');
    this.shadowRootDiv.append(this.canvas);

Finally, of course, we need to append the component elements to the shadowRoot:

this.shadowRoot.appendChild(this.shadowRootDiv);

Interacting with the canvas in the web component

What my attempt to create a chart has thought me is that if you create a web component, you can’t use it’s elements directly from its constructor. It’s simply too early and they’re not attached to the DOM yet.

This means you need to wait for the canvas to be loaded before you can access it. Therefore I didn’t create a new Chart object directly in the controller, but put it into a separate function:

render() {
  const data = JSON.parse(this.getAttribute('data'));
  const context = this.canvas.getContext('2d');
  const chart = new Chart(context, data);
}

You can also see that I extract the data for the chart from the web component’s attributes. It needs to be parsed before it is passed, since it is in the form of string.

This function is still not executed though. I needed to find an appropriate way to call it, when all the elements of the web component are loaded.

Somewhere in the MDN docs I found this lifecycle function that the web components have. It’s called connectedCallback and it is executed right after the shadowDOM is connected to the page DOM. After this I can happily edit a canvas and see the results on the screen. So I used it like this:

  connectedCallback() {
    this.render();
  }

Importing of Chart.js modules and dependencies

Of course, even if you assemble the code snippets above, the code wouldn’t work. After all, we haven’t imported the Chart object yet. But that’s not too hard to do:

import Chart from 'chart.js/auto'

This would import all the different modules that Chart.js uses.

But why is there an entire heading in this blog post just for one obvious line of code?

Well, the Docs say you can also import parts of the modules instead. This seems a good practice in a larger project, where you don’t want huge chunks of useless code to be delivered to your user despite you want to just use a Line Chart.

To import only the Line Chart relevant modules you need to import Chart first, then the modules, and then register them like this:

import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale } from 'chart.js'

Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale)

After this, it should be possible to draw a chart on your canvas.

One thing I haven’t tried yet is what happens when two web components import the chart like this and then they are used on the same page. I hope that the web component works as a module and there is no problem doing this, but I need to test it.

Passing the data to the Chart.js object

At this point I have a setup that would work only if there were data to show.

To pass the data to the chart I’d put it in the <line-chart> tag’s data attribute:

<line-chart id='line-chart-id' data="{type: 'line', ...}" className="chart"></line-chart>

This way our web component can read it and pass it to Chart.js.

You might notice that the data attribute is a string. This is totally ok, but it’s much easier for me to write down the configuration in a json instead. So I prefer having an event handler which sets the data dynamically. This also allows me to load the data asynchronously later (like from a server or something).

Set the data to the web component dynamically

To do this instead of having a data attribute in the definition of the tag, we can set up an event handler, which loads the data and sets it to the line chart:

document.addEventListener('DOMContentLoaded', async (event) => {
  const lineChart = document.getElementById('line-chart-id');
  lineChart.setAttribute('data', await fetchData());
});

You can see that the data is loaded by calling the asynchronous fetchData() and awaiting its result. There we can write down the json which is representing our data:

function fetchData() {
  return JSON.stringify({
    type: 'line',
    data: {
      labels: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
      datasets: [
        {
          label: 'dataset 1',
          data: [{ x: 0, y1:2, y2:1 },{ x: 1,y1:2}, { x: 1.4,y1:6 }, { x:2,y1:3 }, { x:3,y1:6 }, {x:5, y2: 2}, {x:6, y2:1}, {x:8, y2:6}, {x:9,y2:6}, {x:10,y2:0}],
          parsing: {
            yAxisKey: 'y1'
          }
        },
        {
          label: 'dataset 2',
          data: [{ x: 0, y1:2, y2:1 },{ x: 1,y1:2}, { x: 1.4,y1:6 }, { x:2,y1:3 }, { x:3,y1:6 }, {x:5, y2: 2}, {x:6, y2:1}, {x:8, y2:6}, {x:9,y2:6}, {x:10,y2:0}],
          parsing: {
            yAxisKey: 'y2'
          }
        },
      ],
    }
  });
}

What’s important here is that the config of the chart is written in JSON, but before it is returned it is turned into a string. This way we can set it to the attribute directly.

The rest you can see in Chart.js’s own documentation.

Unfortunately, the result looks like this:

Why is the chart not loading?

Because we’re setting the data dynamically now, our web component is too fast in creating the Chart object. This means it passes empty data object to it.

To fix this we need to render a bit later. For example when the data attribute changes. This is why I’m adding the following methods to the web component:

  static get observedAttributes() {
    return ['data'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render()
  }

This alone unfortunately does not change the page. What it changes is in the console:

Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.

How to make Chart.js redraw?

Well, the problem is now clear – we can’t paint over a chart, so what’s the solution? We need to destroy the chart first. The canvas is reusable, but the Chart object from Chart.js insists on being destroyed before the canvas can be repainted.

Therefore I added this code to the attributeChangedCallback:

    if (this.chart) {
      this.chart.destroy();
      this.chart = null;
    }

I decided also it is a good idea to force the garbage collector to remove the old object by setting the reference to null. Oh, and also, notice that the chart is now a property of the web component object. This means our render() function needs to populate it. Now it looks like this:

render() {
  const data = JSON.parse(this.getAttribute('data'));
  const context = this.canvas.getContext('2d');
  this.chart = new Chart(context, data);
}

The chart is alive

And finally we have a working chart:

While it is not easy to see the gray lines and there are breaks in the lines of one of the data series, the Chart.js version is much prettier than my own.

It would take another few hours to brush up the rough edges, but it definitely sped up my project with a few months if not years. And this makes me really happy. I’ve learned, that creating a charting library isn’t a two hours work, but rather a years-long moonlighting project if you have a team of one.

I’ve also learned, that painting things on the browser isn’t impossible. And if you choose your tools correctly you can make some really beautiful projects.

If this is your kind of fun, then go for it! I definitely don’t regret it.

Cheers,

Making Canvas greedy using CSS flexbox

Nikola Geneshki — Sat, 14 Jan 2023 18:01:40 +0000

A while ago I started a completely unnecessary project. There are many problems with it. Nothing is easy. The one that really frustrates me is how the canvas is fixed-size and no matter how big the browser window is, it will always stay the same. So I went on a tangent to fix this and spent 10 hours doing this. I consider this a great loss of valuable time I could have used for gaming, so I think it’s a good topic for a post. Today I’ll tell you how to make canvas fill up the empty space of a page using CSS and the flexbox layout.

Is flexbox the right way to do it?

No idea. I don’t really do things professionally at home. This is is called work and I have a job where I have to be responsible. At home it’s complete mayhem. Let’s have some fun.

The mythical goal of filling up the screen

You know when you have a small web page with maybe an element or two and a huge amount of white space underneath?

And when you have a footer on the bottom with a different color from white? Then you have a colored line in the middle of the screen instead of the pretty design you worked on so hard. Well, if you have a canvas on the screen and you don’t know how big it needs to be something similar to this happens:
Initially the chart is not stretched to fit the empty space at all.

You see, to resize a canvas, you definitely need to set its size in pixels. And using CSS for this job also doesn’t work, since it will only stretch the image, it won’t make the canvas bigger. The canvas has its own reality in which it lives. If it says there are only 100 pixels, you can only paint 100 dots. The CSS would only make these dots bigger and uglier. But that’s a problem for later.

You could of course grab the parent of the canvas and use its width and height and set them to the canvas. And this would make your drawing space as big as the parent. But if the parent is just a div with nothing else, it will have a height of 0 – just enough to fit all the content in.

So basically you end up with a canvas which has 0 pixels. These two problems are basically the same case. This is great, because it means I can look at what others did and then apply it to my problem, right?

Height of the content

To make the canvas take all the space which is available, first we need to solve the 0 pixel height problem.

A bit of CSS would help with this. If we set the body height to 100%, it should do the trick. Except it doesn’t.

Let’s say we have the following HTML:

        <div id="canvas-wrapper">
            <canvas id='canvas-id' class="chart"></canvas>
        </div>

As you can see there are a few CSS classes there. Let’s ignore them first and put some attributes in the body:

body {
  height: 100%;
}
.chart {}
.canvas-wrapper {}

Only the body has a height attribute of 100% nothing else. And here’s the result:

When only the height on the body of a canvas is set to 100% the chart takes only a small part of the available space

Of course the canvas height is set using javascript like this:

    this.canvas.width = this.parentElement.clientWidth;
    this.canvas.height = this.parentElement.clientHeight;

Here the canvas is edited in a dedicated javascript object, which also has a link to the parent of the canvas.

As you can see from the picture above, something went wrong. A way too big part of the screen is unused, when the goal is to have ginormous chart with no blank space. I guess the percent unit of the height is not the one we need to use. Let’s use the vh unit. The difference between it and the percent is that the vh reference is the viewport height, instead of the parent height.

body {
  height: 100vh;
}
.chart {}
.canvas-wrapper {}

Additional structure

This alone, unfortunately, does not change the result. So let’s introduce a bit more markup. I’ll wrap the canvas into a div and just for fun, I’ll add a form into another div next to it:

    <div class="App">
      <div class="item">
        <form>
            <input />
        </form>
      </div>
      <div class="item-main">
          <canvas id='id' class="chart"></canvas>
      </div>
      <div class="item">
      </div>
    </div>

Now we can play around with the different sections and their CSS classes. First, Let’s add some attributes to the App class:

.App {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

This makes the outer div work as a stack. It’s display mode is flex which means the div is a flexbox. Now each element within it will act fluidly, filling up space as described with the flex attribute of their CSS class.

Flexbox items

Now let’s have a look at the items in this container. In my case they are simple divs which have the following CSS classes:

.item {}
.item-main {
    flex: 2;
    overflow: auto;
}

You can see that one of them is empty while the other one has a few attributes. This is actually crucial in this case. The item-main class defines the type of flex and the overflow behaviors, while the normal item class has no such fields. This way we specify the proportions of the different items.

What this means is, that flex items with class .item-main would take up twice as much space as ones with a class that specifies flex: 1 and basically all the empty space in our case, since our other class doesn’t have such attribute at all.

With all this in place, the page with the chart looks like this:

After all the necessary flexbox attributes are in place, the chart takes all available space on the page.

Flexbox is tricky

Like all the CSS, flexbox is tricky. You can’t simply slap in on a div and expect it to work instantly and as you want it. However, the concept isn’t that hard to grasp and after a few tries, you can easily apply it to your page.

On the other hand it makes it pretty simple to align a bunch of elements in a row or a column when compared to the old way of floating divs. So I believe it’s worth it to learn how to use it and never look back.

Cheers,

Learning HTML5 canvas for a stupid reason.

Nikola Geneshki — Sat, 15 Oct 2022 11:25:07 +0000

Several times now I have tried to make a simple web application that tracks some personal data. Each time I halt on different place, as is usual, but this time it was when I tried to display the data in a form that allows deriving insights – a chart.

Plenty of libraries allowing for drawing charts on a web site have been published on the Internet, but when I tried to quickly use one or two, I ended up stuck because of lack of easy to understand documentation. So I decided in a whim I’m going to go with the hardest approach you could choose – writing another one from scratch using the most user unfriendly technology available for the task: an HTML5 Canvas. After all that’s the engineer’s way, right? Reinvent the square wheel again and again… Sigh.

Learning the Canvas Basics

As my first goal was to create a simple line chart, I had to start with very simple things: drawing a coordinate system and naming the axes. So I went on with the first line.

Drawing a line on a Canvas

Going through the MDN Canvas API documentation, I found out that I need to get the 2D context of the canvas and execute these functions:

const context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10, 10);
context.lineTo(10,400);
context.stroke();

And I had a vertical line! Marvelous, I felt like I’m going to be finished with this chart within an hour. Let me explain what’s happening here.

We get the canvas and its 2D context.
We start a path using the beginPath method. This is used for drawing a set of lines each starting where the other one ends. However, we will only draw one line.
We move to the point where the line starts with the moveTo method
We instruct the canvas to draw a line to the point where it should end.
stroke flushes our commands and draws the line on the canvas.

Dealing with the Coordinate System of the Canvas

My hopes of advancing rapidly, however, proved to be an illusion. Once I did the same for the horizontal line which would be the X axis, I found this:

I forgot how computer graphics work… Of course the coordinates are in the Fourth quadrant. This basically means that if I just use the numbers I get from my data, the chart would be completely upside down.

Because at that point (and even now) I am a complete novice in computer graphics, I kept on trying to brute-force my way through the development of a line chart. Instead of reading a bit about coordinate systems and how to deal with them, I decided I’ll just introduce compensation constants to the coordinates which I get from my data.

This quickly devolved into a mess which is not worthy of presenting even on the Internet, but was the reason to waste an entire day of my weekend into it.

Playing Around with Transforms

Once I was fed up with coordinate silliness, I decided to have a look around on the internet. While I didn’t find a panacea to my problems, I found a keyword – “transform”. Something immediately clicked in my monkey brain and I knew, this is the solution to the upside-down chart.

Fortunately, these transforms are done with simple methods on the context. Simple, if you know what you want. And read beforehand. Instead, I decided to YOLO it with the hardest to understand of the available methods and some StackOverflow answers.

setTransform on a canvas

I found out the canvas context has a function called setTransform that takes a bunch of arguments. Like 6 of them. This isn’t really great, because 6 is a big number and I’m usually struggling even with 3. But if I look at the documentation often enough that isn’t really a problem. So I decided to use it.

I read there that the 6 parameters are the upper two rows of a 3×3 matrix, which describes how exactly would the viewport of the canvas change. Each of the parameters are responsible for a certain operation and using all of them somehow allows you to do whatever you want.

Since I wanted the picture to flip horizontally, I needed to use this matrix:

It basically tells the canvas to scale the vetical coordinates with -1 and to move the viewport up by 400 pixels.

Once I applied this matrix I had the axes drawn in the right places! Perfect.

Writing Text

At this point I felt like labeling the axes. This meant I had to write down their names, preferably next to each axis and centered either vertically or horizontally, depending on the axis itself.

Using the fillText(text, x, y) function of the context, I wrote the name of the x-axis. And this was the result:

Let’s just ignore the fact that the Y-axis label is not well placed. I think the bigger problem here is that it isn’t that easy to read the labels when they’re upside down. It doesn’t really look like English, does it?

Transform madness

This is when I felt like I had to read a bit more in the documentation to find out what exactly has happened and how to fix it. There I found out about the transform stack and how to put stuff on it and then take it out. The natural progression was, of course, to use it whether it makes things easier or not. I mean abuse it. That was the word, yes.

I found the methods save() and restore() of the 2d context. They manipulate the transform stack, namely save() puts the current transform on the stack, and restore() takes the last transform on the stack and reapplies it. This way you can reset the canvas to its original viewport and then return back to the previous point you were drawing easily.

It gets even better, when you find out you can store multiple transforms and then layer them back on using restore() multiple times. So I used all of this at once. And here’s how it went.

For each feature of the chart – axis, label, tick on an axis and whatever else was there I had to:

Save the current transform using save();
Clear the transform using resetTransform();
Set the new transform using translate(), rotate(), scale() or setTransform();
Draw something;
Restore the previous transform using restore();
Further it required from me to remember what the previous state of the transform was, because I needed to decide at stage 5, whether I really want to restore it or not.

While this proved to look neat in the documentation, when I applied it, it ended up being completely custom and unfit for reuse. Further it relied on constant debugging to check what’s happening, since the state of the transform stack was very important. And the result wasn’t really stunning:

Look at the mess this chart is. It has the X-axis labels span from way-too-far left to way-too-far right, the Y-axis labels are shifted up for no reason and the labels of the Y-axes is so far away, no one even knows what this text does there.

What happened!?

On State

State management is the main problem which needs to be solved in a front-end application. Sooner or later there’s enough moving parts on a web-site, to make your life a javascript hell: buttons, images, columns of text that need to be placed precisely. Colors have to change depending on some data – there is a reason we call it hell.

A chart shows a lot of data by design, but if you have to keep track not only of it but also of some meta data that is only used because of choice of technology, then the hell is imminent and it inflicts at least three times more mental pain.

When encountering such a thing, usually a developer chooses one of two paths: change the technology in hopes the meta data there is much less, or keep working with the same technology, but introduce a library that deals with the bloat.

And I looked into libraries that introduce a DOM on top of a Canvas element. But because I’m so stubborn, I decided I’ll keep on going without one. If I weren’t that stubborn, I could have used fabric.js or paper.js, that offer a much simpler, high-level API to Canvas. But let’s keep doing stuff the most painful way.

HTML5 Canvas isn’t easy

As a conclusion of this part I can say that using HTML5 Canvas isn’t easy. It takes time to learn the API and then it takes much more time to apply it in a way that paints what you want. It doesn’t support simple things like clicking on an element that you have drawn out of the box and I still haven’t found a way to test it.

This said, it does provide enough, to create insanely complex things like games and animation. So I think it’s worth playing around with it, learning how to use it. Therefore I’ll continue this project and create at least an adequate line chart, that I can use for other projects. And I’ll do this by starting with rewriting what I have done up to now to get my first data set charted.

But I think I need a strategy first.

Until next time!