'On clicking the specific label in Canvasjs Pie chart, pass the clicked label to Flask for further processing
I am working with pie charts using Canvasjs and I want to make it clickable so that if the specific label is clicked it will send the clicked label value to the flask so that I can process that value in the flask also redirect me to the other page
My Chart Code on the index.html page
{%extends "master.html"%}
{%block chart%}
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: false,
theme: "light1", // "light1", "light2", "dark1", "dark2"
backgroundColor: "transparent",
**data: [{
click: function (e) {
var dataPoint = e.dataPoint.label;
window.open({{url_for('jazz_index')}}, "_blank");
},**
type: "doughnut",
startAngle: 20,
//innerRadius: 10,
indexLabelFontSize: 17,
indexLabelFontColor: "white",
indexLabel: "#percent%",
toolTipContent: "<b>{label}:</b> {y} (#percent%)",
dataPoints: [
{%for outgoing_number,outgoing_call_type in outgoing_calls%}
{ y: {{outgoing_call_type}}, label: "{{outgoing_number}}" },
{%endfor%}
]
}]
});
chart.render();
}
</script>
{%endblock%}
{%block body%}
<div class="card-body" id="chartContainer" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 90%;">
</div>
{%endblock%}
In this code, I am making a pie chart and I want to pass variable dataPoint to the flask route jazz_index when the specific bar is clicked on the pie chart and I also want to know how to access that variable value in the route jazz_index so that I can process that dataPoint value and redirect the chart to the new page (jazz_index.html) which contains the information related to that dataPoint.
This is my jazz_index route
@app.route('/jazz', methods=['GET', 'POST'])
def jazz_index():
return render_template('jazz_index.html')
Please help me out with some code. Thanks in advance
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
