Can i use eel with chartsjs

[vikramsamak]

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/

[netesy]

Yes you can.

[ghost]

Hi netesy.

Yes you can.

But how could this be done? is there any example for this? Can I use eel with chartsjs?

[netesy]

I will quickly share one when I am with my system.

[vikramsamak]

I will quickly share one when I am with my system.

Waiting sir ...

[1drg]

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);

}

[vikramsamak]

thank you so much sir...

[ghost]

Hi all. Can someone help me? Why would someone help you? I'm trying to insert an example of chart js in the eel.