Flask-ChartJS-Manager (from now on FCM) provides a simple interface to use ChartJS javascript library with Flask.
🚧 This package is under heavy development..
Install the extension with pip:
pip install flask-chartjs-managerInstall with poetry:
poetry add flask-chartjs-managerOnce 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__)FCM works via a ChartJSManager object. To kick things off, we'll set up the chartjs_manager by instantiating it and telling it about our Flask app:
from flask_chartjs import ChartJSManager
chartjs_manager = ChartJSManager()
chartjs_manager.init_app(app)This will make available the chartjs object into the templates context so you could load the javascript package easily, like this.
you can configure a CHARTJS_LOCAL_PATH to add a custom location for the package
<head>
{{ chartjs.load() }}
</head>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)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>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>