Here, we try to replicate a company’s progress yearly. We also provide UI for adding year based progress to our database.
The whole process involves 5 steps.
Let’s dive in.
At the moment of writing this article , I am using the following configuration.
OTP: 23.0.3Built with: Elixir 1.10.0 and OTP 21.3
Step1 — Creating A New Phoenix Project
mix phx.new hello
Create a new Phoenix project using the above command and run the necessary commands to set up the project with a database and node modules. You can name the project as you like.
Here, I am leaving the database with the default configuration. However, you can configure your database in
config/dev.exs and run:
mix ecto.create .
Step2 — Generating a Migration & Schema using phx.gen
mix phx.gen.html Progress Revenue revenues year:integer amount:float
The first argument Progress is the context module followed by the schema module Revenue and its plural name revenues used as the schema table name. We are not going deeper here as I hope you are familiar with these concepts.
Add the resource to your browser scope in
resources "/revenues", RevenueController
Remember to update your repository by running migrations:
Step3 — Adding Data
If everything went fine, you can visit the
http://localhost:4000/revenues there you can see a link to add new revenue.
Use that link to add a revenue value for different years. For good visibility, add at least 5 different years.
After adding data, the ui might be looking like in the following screenshot when you visit the path
Step 4 — Chart.Js Setup using NPM
npm install chart.js --prefix assets --save
Creating a file linechart.js
Go to folder
assets/js and create a file with the name
linechart.js. You can name the file to your convention. Since we are developing the linechart over the data, I named it as a
This file contains the code to create a chart with the dynamic data.
In this file, we define how our chart should look like. Here, we use two dynamic variables named
chart_labels. You can name them as you like.
We will make sure of the above mentiond varibles will available in the template we use this
You have to make a small change here. We need to add a new entry for our
As we know, in the entire application we use
app.js. But, we don’t want this
linechart.js to be available on every template. We need this on the specific template we wish to be. For that, we have to make a new entry like in the following way.
Open the file
assets/webpack.config.js file and add the following line under entry section.
The bold and italic line is our new entry for
linechart.js file. Don’t forget to add coma
, before adding the line.
The Chart.js setup has been completed.
Step 5 — Creating a Chart using linechart.js
This going to be our final major step for creating a chart.
Chart Template Setup
Here, we use the same template that lists the revenues.
Add the following lines in at the end of the template file
The noticeable lines of code are
<canvas id="lineChart" width="100%" height="100%"></canvas>
This is the canvas with the id lineChart that we use to render the chart in our
window.chart_data = <%= raw(Jason.encode!(fetch_chart_data @revenues)) %>window.chart_labels = <%= raw(Jason.encode!(fetch_chart_labels @revenues)) %>
We are making sure of the dynamic variables
chart_labels are available. The window.variableName means that the variable is being declared at the global scope.
Here, we used the functions
fetch_chart_labels/1 which gives the list of amount values and list of years respectively. Soon we are going to develop these functions inside the view file
revenue_view.ex associated with this template.
Above line simply loads our
linechart.js file in this particular template.
Updating View with functions
Add the following lines of code inside the view file
def fetch_chart_data(revenues) do
Enum.map(revenues, & &1.amount)
enddef fetch_chart_labels(data_packets) do
Enum.map(revenues, & &1.year)
It just prepares the data according to our chart representation. Nothing much to concentrate here.
That’s the end of the Coding part.
Now visit the path
This time, you will see the chart under the table section popping up like in the following screenshot.
The following screeenshot gives the idea of changed files
Now it’s your time to create beautiful charts.
Happy Coding !!
Join Our Telegram Channe Blackoders
EAT 🍕 - CODE🐞 - SLEEP😴 Code, Thoughts, & Ideas Coding Resources, Tips, Videos, Articles & News We follow & collect…
Check out the GitHub repository on Killer Elixir Tips
Glad if you can contribute with a ★