I have a problem with the graphics of CHART.JS when trying to get my data from python to pass my list of values as labels in my chartjs grouped bar chart , my list of values is considered as one variable , not all variables of the list are considered as labels !
app.py
df= pd.read_excel("Extract_data_eurecia.xlsx") def sum_nbr_heure(id_client,start=0,ends=0): if start == 0 : start = df["Date de l'activité"].min() if ends== 0: ends=df["Date de l'activité"].max() cond=(df["Date de l'activité"]>=start) & (df["Date de l'activité"]<=ends) data=df.loc[cond] return sum(data[data["Clients"]==id_client]["Nb heures"]) def sum_nbr_heure_col(id_client,start=0,ends=0): if(start == 0 ): start = df["Date de l'activité"].min() if ends== 0: ends=df["Date de l'activité"].max() cond=(df["Date de l'activité"]>=start) & (df["Date de l'activité"]<=ends) data=df.loc[cond] a=sum_nbr_heure(id_client,start,ends) return data.loc[data["Clients"]==id_client].groupby(['collaborateur'],as_index=False).agg( sum_hours=('Nb heures', sum), percentage_hours=('Nb heures', lambda x: round(((sum(x) * 100 )/a) ,2)))
def suivi_activite(id_client,start=0,ends=0): if start == 0 : start = df["Date de l'activité"].min() if ends== 0: ends=df["Date de l'activité"].max() cond=(df["Date de l'activité"]>=start) & (df["Date de l'activité"]<=ends) data=df.loc[cond] a=sum_nbr_heure_col(id_client,start,ends) return data.loc[data["Clients"]==id_client].groupby(["Description de la feuille de temps","collaborateur"],as_index=False).agg(sum_hours=('Nb heures', sum))
app = Flask(name)
@app.route('/') def dashboard(): tot_sum_h_per_col=[] tot_sum_h_per_col.append(sum_nbr_heure_col(1949635)['collaborateur'].to_list()) tot_sum_h_per_col.append( sum_nbr_heure_col(1949635)['percentage_hours'].to_list()) dsh_suivi_activite=[] dsh_suivi_activite.append(suivi_activite(1949635)["Description de la feuille de temps"].astype(str).to_list()) dsh_suivi_activite.append(suivi_activite(1949635)["collaborateur"].to_list()) dsh_suivi_activite.append(suivi_activite(1949635)["sum_hours"].to_list()) # dsh_suivi_activite=suivi_activite(1949635) return render_template("chart.html", labs_tot_sum_h_per_col = tot_sum_h_per_col[0], vals_tot_sum_h_per_col=tot_sum_h_per_col[1], # dsh_suivi_activite=dsh_suivi_activite.to_json() labs_dsh_suivi_activite=dsh_suivi_activite[0], data_labs_dsh_suivi_activite=dsh_suivi_activite[1], data_vals_dsh_suivi_activite=dsh_suivi_activite[2] )
if name == "main": app.run(port=5000, debug=True)
chart.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<!-- <canvas id="myChart" style="width: 100%; max-width: 700px;"></canvas> -->
<canvas id="pie-chart" width="700" height="500"></canvas>
<script>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: {{labs_tot_sum_h_per_col}},
datasets: [{
label: "%",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: {{vals_tot_sum_h_per_col}}
}]
},
options: {
title: {
display: true,
text:
"Pourcentage somme d'heures de chaque collaborateur"
}
}
});
</script>
<canvas id="bar-chart-grouped" width="90" height="45"></canvas>
<h1> test </h1>
<script>
new Chart(document.getElementById("bar-chart-grouped"), {
type: 'bar',
data: {
// labels: {{labs_dsh_suivi_activite}} ,
labels: ["2022 Semaine 05","2022 Semaine 06","2022 Semaine 06","2022 Semaine 06","2022 Semaine 07","2022 Semaine 07","2022 Semaine 07","2022 Semaine 07","2022 Semaine 08","2022 Semaine 08","2022 Semaine 08","2021 Semaine 46","2021 Semaine 47","2021 Semaine 50"],
datasets: [
{
label: {{data_labs_dsh_suivi_activite}},
data: {{data_vals_dsh_suivi_activite}}
}
]
},
options: {
title: {
display: true,
text: 'Suivi d\'activite'
}
}
});
</script>
</body>
</html>
