In this series, we will look at an example of Masonite Project - Chartjs example. We will explain simply step by step how to create a chart in Masonite. Chartjs is a javascript library, that we can use to display bar chart, line chart, area chart, column chart, etc. Chartjs is an open-source chart library. Chartjs also provide several theme and graph that way you can use more chart from here : Chartjs
Masonite Installation
mkdir masonite-chartjs
cd masonite-chartjs
Activating Our Virtual Environment
python -m venv venv
source venv/bin/activate
Install Masonite
pip install masonite
Start project
project start .
Start Development Server
python craft serve
This is it! We have the new Masonite Project running now!
Create Route
First of all, we will create simple route for creating simple line chart. Let's add simple routes as like bellow:
routes/web.py
from masonite.routes import Route
ROUTES = [Route.get("/", "WelcomeController@show"),
Route.get("/chart", "ChartController@show")
]
Create Controller
Here, we will create new controller as ChartController.
python craft controller ChartController
So let's add bellow code on that controller file.
from masonite.controllers import Controller
from masonite.views import View
class ChartController(Controller):
def show(self, view: View):
labels= ['January', 'February', 'March', 'April', 'May', 'June', 'July']
data= [1, 2, 3, 4, 5, 6, 7]
return view.render("chart.index",{'labels':labels,'data':data})
Create Template File
We will create the html file (chart/index.html) and in this file we will import chartjs. Please find the relevant code for this file.
templates/chart/index.html
<!DOCTYPE html>
<html>
<head>
<title>Masonite - ChartJS Chart Example - blog.popolo.dev</title>
</head>
<body>
<h1>Masonite - ChartJS Chart Example - blog.popolo.dev</h1>
<canvas id="myChart" height="100px"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
var labels = {{ labels|tojson }};
var users = {{ data }};
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: users,
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</html>
Now let's visit the following url to see the chart:
http://127.0.0.1:8000/chart
It works!!