popolo - code simple..

popolo - code simple..

Masonite Project - Chart Js Example Tutorial

Masonite Project - Chart Js Example Tutorial

Theodoros Kafantaris's photo
Theodoros Kafantaris
·May 2, 2022·

2 min read

Table of contents

  • Masonite Installation
  • Activating Our Virtual Environment
  • Install Masonite
  • Start project
  • Start Development Server
  • Create Route
  • Create Controller
  • Create Template File

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

image.png

It works!!

 
Share this