Created
September 17, 2021 23:01
-
-
Save Tsugami/9d79762c86ebacf3cca3c6b927a5e0ec to your computer and use it in GitHub Desktop.
chartjs testing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>alo</h1> | |
| <canvas id="myChart"></canvas> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://d3js.org/d3.v6.min.js"></script> | |
| <script> | |
| d3.csv("data.csv").then(makeChart); | |
| function makeChart(players) { | |
| const orgName = "Softwrap-Company/"; | |
| const result = players.reduce((acc, data) => { | |
| const qty = data?.Quantity; | |
| const name = (data["Repository Slug"] || "unkown").replace( | |
| orgName, | |
| "" | |
| ); | |
| if (!qty) return acc; | |
| if (acc[name]) { | |
| acc[name] += Number(qty); | |
| } else { | |
| acc[name] = Number(qty); | |
| } | |
| return acc; | |
| }, {}); | |
| const randomColor = () => | |
| "#" + Math.floor(Math.random() * 16777215).toString(16); | |
| const labels = Object.entries(result).map(([v, i]) => i + " " + v); | |
| const data = Object.values(result); | |
| const colors = labels.map(() => randomColor()); | |
| const chart = new Chart("myChart", { | |
| type: "doughnut", | |
| data: { | |
| labels, | |
| datasets: [ | |
| { | |
| data, | |
| backgroundColor: colors, | |
| }, | |
| ], | |
| }, | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment