charts.js

charts.js

console.log("chart called");


const plu = {
  htmlLegend: {
    // ID of the container to put the legend in
    containerID: 'legend-container',
  },
  legend: {
    display: true,
    position: "right",
    labels: { color: 'rgb(255, 99, 132)' },
  },

  datalabels: {
    formatter: (value, ctx) => {
      let sum_ = 0;
      let dataArr = ctx.chart.data.datasets[0].data;
      dataArr.map(data => {
        sum_ += data;
      });
      let percentage = (value * 100 / sum_).toFixed(2) + "%";
      return percentage;
    },
    color: '#ffff',
  }
}

export function makeBar0(ctx){
  return new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['team1', 'team2', 'team3', 'team4', 'team5', 'team6'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 2,
        backgroundColor: [
          'red',
          'blue',
          'yellow',
          'green',
          'purple',
          'orange'
        ]
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      hover: {
        mode: 'index',
        intersect: false,
      }
    }
  });

}


function makeBar1(ctx) {

  return new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['team1', 'team2', 'team3', 'team4', 'team5', 'team6'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 4],
        borderWidth: 1
      },
      {
        label: '# of Votes',
        data: [2, 9, 13, 25, 10, 5],
        borderWidth: 1
      }]
    },
    options: {
      plugins: plu,
      scales: {
        y: { beginAtZero: true }
      },
      hover: {
        mode: 'index',
        intersect: false,
      }
    }
  });
}


function makeBar(ctx) {

  return new Chart(ctx.getContext('2d'), {
    type: 'line',
    data: {
      labels: ['team1', 'team2', 'team3', 'team4', 'team5', 'team6'],
      datasets: [
      //   {
      //   label: '# of Votes',
        
      //   // fill: 'origin',
			// 	// tension: 0.15,
        
      //     data: [12, 19, 3, 5, 2, 4],
      //   borderWidth: 2,
      //   hoverBackgroundColor: ['#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF']
      // },
      {
          label: '# of Votes',
          data: [2, 9, 13, 4, 8, 9],
          borderWidth: 3,
          hoverBackgroundColor: ['#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF', '#FFFFF'],

        // borderColor: 'rgba(120, 220, 220, 1)',
        // pointBackgroundColor: 'rgba(220, 220, 220, 1)',
        
        pointBorderColor: '#fff',  // smart
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(220, 220, 220, 1)',
        }]
    },
    options: {
      plugins: plu,
      scales: {
        y: { position: 'left',
				type: 'linear', beginAtZero: true }
      },
      hover: {
        mode: 'index',
        intersect: false,
      },

      options: {
        responsive: true
      }
    }
  });
}

let ctx = document.getElementById("canId");
makeBar(ctx)

from flask import Flask, jsonify, make_response
from functools import wraps

class JSONResponse(make_response):
def init(self, data, *args, **kwargs):
if data is not None:
data = jsonify(data).data
super(JSONResponse, self).init(data, *args, **kwargs)
self.headers['Content-Type'] = 'application/json'

def json_response(f):
@wraps(f)
def wrapper(*args, **kwargs):
resp = f(*args, **kwargs)
if isinstance(resp, tuple):
data, code, headers = resp
return JSONResponse(data, code, headers)
elif isinstance(resp, (dict, list)):
return JSONResponse(resp)
else:
return resp
return wrapper

app = Flask(name)

@app.route('/api/hello')
@json_response
def hello():
return {'message': 'Hello, World!'}

if __:
app.run()