No project description provided
Project description
Flask-ChartJS-Manager
Flask-ChartJS-Manager (from now on FCM) provides a simple interface to use ChartJS javascript library with Flask.
🚧 This package is under heavy development..
Installation
Install the extension with pip:
pip install flask-chartjs-manager
Install with poetry:
uv add flask-chartjs-manager
Usage
Once installed the FCM is easy to use. Let's walk through setting up a basic application. Also please note that this is a very basic guide: we will be taking shortcuts here that you should never take in a real application.
To begin we'll set up a Flask app:
from flask import Flask
app = Flask(__name__)
Setting up extension
FCM works via a ChartJS object. To kick things off, we'll set up the chartjs by instantiating it and telling it about our Flask app:
from flask_chartjs import ChartJS
chartjs = ChartJSManager()
chartjs.init_app(app)
This will make available the chartjs object into the templates context so you could load the javascript package easily.
You can configure a CHARTJS_LOCAL_PATH to add a custom location for the package
<head>
{{ chartjs.load() }}
</head>
Creating a chart
Now we will construct a basic chart. For this you have to import Chart and DataSet objects in order to create a new chart.
from flask_chartjs import Chart, DataSet
from flask import render_template
@app.get('/chart-example')
def chart_example():
chart = Chart('income-outcome', 'bar') # Requires at least an ID and a chart type.
dataset_income = DataSet('Income', [100,200,300])
dataset_outcome = DataSet('OutCome', [50,100,150])
chart.data.add_labels('jan', 'feb', 'mar')
chart.data.add_dataset(dataset_income)
chart.data.add_dataset(dataset_outcome)
return render_template('path/to/template.html', my_chart=chart)
Rendering the chart
Once created you can pass the Chart object to render_template and use it likewise.
<!-- chartjs.load() must be called before this line -->
<div class="my-classes">{{ chartjs.render(my_chart) }}</div>
Changelog 0.1.11
Added new options to personalize using the full power of the ChartJS library. Now you can limit the python code to add the dataset itself and let
the configuration and further customization to the actual template level. See the next example.
If you add a % in front of a value its assumed to be a javascript variable.
You have the especial kwarg datasets to access directly to the datasets options, as you can observe in the next example. The key is the dataset index.
<!-- load_chartjs() must be called before this line -->
<script>
function addDollarSign(value, index, ticks) {
return "$" + value.toLocaleString();
}
</script>
<div class="my-classes">
{{ chartjs.render(chart, options={ 'datasets': { 'line': { 'tension': 0.4,
'fill': true, } }, 'elements': { 'point': { 'pointStyle': 'circle', 'radius':
5, 'hitRadius': 5, 'hoverRadius': 5, 'borderWidth': 5, } }, 'scales': { 'y': {
'ticks': { 'callback': '%addDollarSign' } } } }, datasets={ 0: {
'borderColor': 'rgba(20, 184, 166, 0.8)', 'backgroundColor': 'rgba(20, 184,
166, 0.4)', }, 1: { 'borderColor': 'rgba(239, 68, 68, 0.8)',
'backgroundColor': 'rgba(239, 68, 68, 0.4)', }, }) }}
</div>
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file flask_chartjs_manager-0.1.17.tar.gz.
File metadata
- Download URL: flask_chartjs_manager-0.1.17.tar.gz
- Upload date:
- Size: 9.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.7.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
cc9061cdfa2988fe75ef42059ee874bce8f35de769894d1b17e1f327c3d5bb17
|
|
| MD5 |
17f4a20a35ac33482dff3465ee3a7959
|
|
| BLAKE2b-256 |
69847d23fcbf7f09798160c264596e469f551e7ecdc71053125ffaabf7a4d244
|
File details
Details for the file flask_chartjs_manager-0.1.17-py3-none-any.whl.
File metadata
- Download URL: flask_chartjs_manager-0.1.17-py3-none-any.whl
- Upload date:
- Size: 6.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.7.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
f8977482de058d7907baa2c349bb82a0b55511e7a953d262f77a1e34ceef9c6d
|
|
| MD5 |
82d85eb7431aef7bb1955f125dc61df5
|
|
| BLAKE2b-256 |
755a2db92be38bebb17509329c47398d9a8b95fd1e258a2aee1e2e41af6be38b
|
