A new feature to boost your efforts has been implemented in Pixela! v1.18.0 available now.

I’ll introduce this feature with how to get started with Pixela.

At first, what is Pixela?

Pixela is a Web API service that allows you to record and visualize arbitrary numbers such as the distance you ran, the number of pages you read, and the calories you burned. The visualization looks like this graph;

Image for post
Image for post
You can also display a line graph.

For more information, please also see the following article.

Steps from user registration to measuring and recording time

First, register the user to Pixela. curl command is executed as follows.

$ curl -X POST https://pixe.la/v1/users -d '{"token":"thisissecret", "username":"a-know", "agreeTermsOfService":"yes", "notMinor":"yes"}'

Please feel free to set thisissecret in the above command as your own secret password. a-knowis user ID. If you see the message {“message":"Success.","isSuccess":true}as a result of executing the above command, you have succeeded. …

Pixela is a web service that supports your efforts and routines through visualization, but with this update, it’s even more powerful. You can now receive a notification if a predetermined number (threshold) is not exceeded by the specified time. Yes, it’s a reminder feature.

Steps to use Pixela’s remind feature

This section explains the steps to use Pixela’s remind function, starting with registering as a Pixela user. Since Pixela is an API service, you need to send an HTTP request with like the following command.

$ curl -X POST https://pixe.la/v1/users -d '{"token":"thisissecret", "username":"your-name", "agreeTermsOfService":"yes", "notMinor":"yes"}'

You can find the terms of use here.

Next, let’s create a graph. It would be nice if one graph corresponded to one of the daily routines you have. The following is an example command.that …

Hello! I’m announcing a new release today. Pixela now supports dark mode!

Image for post
Image for post

By specifying appearance=dark in the query string when requesting the SVG for the graph, you can obtain an SVG with a color scheme that matches the dark mode.

Image for post
Image for post

Similarly, it can be specified in short mode and line graph mode.

In the case of simple mode ( mode = simple ), there is no need to specify the above, and it is convenient because the display is automatically switched based on the OS settings. (Simple mode is intended for use with iframes.)

I think it has become easier to use for your use case. Thank you for choosing Pixela!

Since I released Pixela, many people have created a variety of things about it.

Pixela’s user interface is basically just a Web API. The reason is that I don’t have enough front-end development skills, but on the other hand I think it has given Pixela a hackable side. I am very happy.

And this time, the iOS / iPadOS app for Pixela was born out by Pixela breeders who love Pixela just like you! Its name is “PixelaUI”!!

I also thought that an iOS / iPadOS app would have to be created in order for more people to use Pixela. …

Hello! I’m announcing a new release today! Pixela now supports badge display mode!

Image for post
Image for post
Pixela badge shows CI frequency

You see badges in the GitHub README, right? Displays information in badge format based on data stored in Pixela. The label uses the unit of the graph definition.

Hello! Today I want to share a tip using Pixela.

Image for post
Image for post

When defining a graph in Pixela, you can specify the selfSufficient option. Here is the description of the API documentation:

selfSufficient — string

[optional] If SVG graph with this field increment or decrement is referenced, Pixel of this graph itself will be incremented or decremented.
It is suitable when you want to record the PVs on a web page or site simultaneously.
The specification of increment or decrement is the same as Increment a Pixel and Decrement a Pixel with webhook.
If not specified, it is treated as none .

In other words, if you define a graph as "selfSufficient":"increment" , the Pixel value for that graph for the day will be incremented each time someone sees your graph. …

I introduced in the article I wrote the other day, Pixela has a few features that only work with Patreon Patron.

Image for post
Image for post

Pixela’s Patron is a very small $1 monthly subscription, but it needs still a billing system. I think it’s normal to build a billing system using stripe, etc., but I want Pixela to be easy to use and continue to be easy to develop.

So I used Patreon’s webhook function to easily implement a billing system. In this article, I’ll go into a bit more detail on how to do this.

Integrate Patreon subscriptions into own service

Do you already know Patreon? …

Hello! Pixela developer, a-know here.

I launched Pixela about a year ago and have been doing improvement since then, but this medium update has been delayed, sorry. Today I’m going to share a digest of Pixela’s updates over the past year.

Pixela charts image my blog’s PV over the past year.
Pixela charts image my blog’s PV over the past year.
Pixela charts my blog’s PV over the past year.

v1.1.0 — You can now clear data cached on GitHub


If you reference image data generated by Pixela (svg) and refereed such as from the GitHub Readme, GitHub automatically caches that data. This caused Pixela’s data to update, but not change when viewed on GitHub.

I’ve updated Pixela to allow you to clear GitHub’s cache when Pixela’s data is updated. …

I have launched “Pixela,” a service for generating GitHub-like graphs without using VCS Commit. I am writing this post to spread the word to everyone in the world. Of course, it is provided free of charge. I want every lover of visualization of life logs and data to try it out!

What is “Pixela”?

Pixela is a service that allows you to register any set of values or quantities you want and pixelizes the data to generate GitHub-like graphs!

For example, it can easily visualize the following:

  • Number of tweets per day
  • Number of deployments of your product
  • Changes in your body weight (in comparison to the previous…



CRE (Customer Reliability Engineer)@ Hatena Co., Ltd. 🙂 Developing Pixela http://pixe.la and grass-graph http://grass-graph.moshimo.works .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store