Flask-Charts is a Flask extension for dealing with chart visualization. Flask-Charts is using Google Charts to render charts on the client-side.
Use the package manager pip to install Flask-Charts.
pip install Flask-ChartsGoogle charts are controlled through a GoogleCharts instance
from flask import Flask
from flask_charts import GoogleCharts
app = Flask(__name__)
charts = GoogleCharts(app)You can also set up the GoogleCharts instance later using the init_app method
charts = GoogleCharts()
app = Flask(__name__)
charts.init_app(app)Import Chart and declare it in your view, give it a type and id at a minimum
from flask_charts import Chart
my_chart = Chart("PieChart", "my_chart")You can populate the chart using the addColumn and addRows methods on the chart.data
my_chart.data.add_column("string", "Person")
my_chart.data.add_column("number", "Count")
my_chart.data.add_row(["Albin", 3])
my_chart.data.add_row(["Robert", 4])
my_chart.data.add_row(["Daniel", 2.5])If you will be pulling JSON data from another endpoint, just specify the url in the data_url variable
my_chart.data_url = url_for("data"))If you are pulling data from an url you can specify how often the data will refresh
my_chart.refresh = 5000 # 5 seconds intervalIn python you have to select a event type and a javascript callback function
my_chart.add_event_listener("select", "my_function")In the callback function you can do whatever you want
function my_function(){
alert("You selected a value in the chart");
}Create your chart and send it to the template
...
return render_template("index.html", my_chart=my_chart)On every page where there will be charts, you must include {{ init_charts }}.
<head>
<meta charset="UTF-8">
<title>Flask-Charts Example</title>
{{ init_charts }}
</head>To display the chart, you need to call the template variable you assign the chart to
<body>
{{ my_chart() }}
</body>Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.