python-eel
Can i use eel with chartsjs
I m new in ds and i want to develop a Gui for ds app so can I use eel for modern UI based dashboards ? can is use eel to fetch data from python program and put it into chartjs ? Chartjs : https://www.chartjs.org/
Hi netesy.
Yes you can.
But how could this be done? is there any example for this? Can I use eel with chartsjs?
I got a working chart days ago using python and eel, here are a few tips:
Add this to your html file, in the head tag:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Create a div to use as a container (might not be required afaik but useful for setting height and width) and create an element inside it with the canvas tag:
<div id="chart" style="width:400px; height:400px;"><canvas id="myChart"></canvas></div>
Function on your script.js file to add the chart details:
function createchart() {
data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
config = {
type: 'doughnut',
data: data,
};
myChart = new Chart(document.getElementById('myChart'), config);
}
This creates a basic chart with predefined values. To get data from python you could use the following example:
on your python file:
@eel.expose
def dashboard():
result = [300, 50, 100]
return (result)
On your script.js file:
async function createchart() {
let result = await eel.dashboard()();
console.log(result)
data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [result[0], result[1], result[2]],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
config = {
type: 'doughnut',
data: data,
};
myChart = new Chart(document.getElementById('myChart'), config);
}
Hi all. Can someone help me? Why would someone help you? I'm trying to insert an example of chart js in the eel.