Can (Chart.js) annotation be used as a dynamic "goal line" where the annotation value adjusts based on some easy rules and chart data?
For example, if I run a minimum of 10km, 3 weeks in a row, the annotation goal line increases by +6km; the same applies to the next level. If I do not manage to run 10km for the last 3 weeks it lowers the down to 8km; I think you get the logic. The goal adjust dynamically based on the previous 3 weeks of data.
Made a visualization: how I imagine how it could be looking
Ps. I am a noob. I have no clue what is needed to finalize this idea.
Best regards
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chart.js, the Missing Manual</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1A1A1A;
color: rgba(75, 192, 192, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(75, 192, 192, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 800px;
padding: 10px;
border-radius: 20px;
border: solid 3px rgba(75, 192, 192, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>Hi there</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js" integrity="sha512-Tfw6etYMUhL4RTki37niav99C6OHwMDB2iBT5S5piyHO+ltK2YX8Hjy9TXxhE1Gm/TmAV0uaykSpnHKFIAif/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="path/to/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>
<script>
// data block
var week = [], kilometer = [], pushups = [], situps = []
async function dummyChart () {
await getDummyData()
const data = {
labels: week.slice(-8),
datasets: [{
label: 'Kilometer',
data: kilometer.slice(-8),
datalabels: {
anchor: 'end',
align: 'end',
offset: 5,
font: {
weight: 'bold',
},
clamp: true,
},
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}
]
};
// config block
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
beginAtZero: true,
},
},
layout: {
padding: 20,
},
plugins: {
legend: {
display: false,
},
autocolors: false,
annotation: {
annotations: {
line1: {
type: 'line',
yMin: 10,
yMax: 10,
borderColor: 'rgb(255, 99, 132)',
borderWidth: 2,
}
}
}
}
},
plugins: [ChartDataLabels]
};
// init render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
}
dummyChart()
// Fetch data from API
async function getDummyData() {
const apiUrl = "https://sheetdb.io/api/v1/an675a1pxghf6?sheet=Strava:weekly"
const response = await fetch(apiUrl)
const lineChartData = await response.json()
const weekdata = lineChartData.map( (x) => x.week)
const kilometerdata = lineChartData.map( (x) => x.kilometer)
const pushupsdata = lineChartData.map( (x) => x.pushups)
const situpsdata = lineChartData.map( (x) => x.situps)
console.log(kilometerdata.slice(-4), pushupsdata, situpsdata)
kilometer = kilometerdata
pushups = pushupsdata
situps = situpsdata
week = weekdata
}
</script>
</body>
</html>
Related
I was trying to implement a simple bar chart using Vue and Chart.js. But when I try to run the project I get:
Uncaught TypeError: Cannot read properties of undefined (reading 'getSelected')
at popup.js:7:13
console output
App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
HelloWorld.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js/auto';
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted () {
console.log('Component mounted');
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
myChart;
}
}
</script>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
error in the console screen. I have researched it but I couldn't find the proper solution. Can you please help me?
I'm using https://www.chartjs.org/. I want to make a chart like a picture.
enter image description here.
but created one is this. enter image description here
It is Sharing X-Axis but has Different Y-Axis by chart type. Left Y-axis is for bar, but the right one is for scatter.
I want the scatter values to be positioned according to each bar chart categories.
current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Getting Started with Chart JS with www.chartjs3.com</title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #1a1a1a;
color: rgba(255, 26, 104, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<p>WWW.CHARTJS3.COM (Chart JS 3.8.0)</p>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/chart.js"
></script>
<script>
const labels = ["label1", "label2", "label3", "label4", "label5"];
// setup
const data = {
labels: labels,
datasets: [
{
type: "bar",
label: "bar 1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack1",
},
{
type: "bar",
label: "bar 2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "leftY",
stack: "stack2",
},
{
type: "scatter",
label: "scatter1",
data: [18, 12, 6, 9, 12],
backgroundColor: "rgba(255, 26, 104, 0.2)",
borderColor: "rgba(255, 26, 104, 1)",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack1",
},
{
type: "scatter",
label: "scatter2",
data: [18, 12, 6, 9, 12],
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
yAxisID: "rightY",
stack: "stack2",
},
],
};
// config
const config = {
data,
options: {
scales: {
x: {
grouped: true,
},
leftY: {
grouped: true,
position: "left",
beginAtZero: true,
},
rightY: {
type: "linear",
position: "right",
beginAtZero: true,
stacked: true,
grouped: true,
},
},
},
};
// render init block
const myChart = new Chart(document.getElementById("myChart"), config);
</script>
</body>
</html>
I have tried looking at related answered problems regarding the error:
TypeError: document.getElementById('myChart').getContext is not a function. (In 'document.getElementById('myChart').getContext('2d')', 'document.getElementById('myChart').getContext' is undefined)
but no suggestions have come through for me thus far. I'm trying to work with chart.js library and keep getting the error in the title. Below are my HTML and javascript codes, the js code is in a separate file called app.js Any help would be appreciated. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="contxt.css" />
</head>
<body>
<div class="container">
<div id='myChart'></div>
</div>
</body>
<script src="app.js"></script>
</html>
And here is the JS:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', fire)
}else{
fire()
}
function fire() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
Only a canvas can have a context. Please change
<div class="container">
<div id='myChart'></div>
</div>
for
<div class="container">
<canvas id='myChart'></canvas> <!-- this line -->
</div>
I managed to update easy pie chart, but I don't know how to display the percentage and update it, for example from 1% to 25%, number by number, as the chart updates. Any help?
This is the block of code where I am updating my chart:
var chart = new EasyPieChart(existing, {
lineWidth: '6',
barColor: '#fff',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: false,
});
chart.update(25);
You could use easy-pie-chart's onStep callback function, which will be called on every step to update the number somewhere on the page.
Also, you probably want to round the number using Math.round
var element = document.querySelector('.chart');
var chart = new EasyPieChart(element, {
lineWidth: '6',
barColor: '#000',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: true,
onStep: function(from, to, currentValue) {
// Inside the callback, 'this.el' refers to
// the element that EasyPieChart was created with
// - `.chart`
this.el.querySelector('.number').innerText = `${Math.round(currentValue)}%`;
},
});
chart.update(25);
.chart {
display: inline-block;
position: relative;
}
.number {
font-size: 1.8rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="chart">
<span class="number"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/easypiechart.min.js"></script>
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
</script>
</body>
</html>
not able to display bar chart with above code. could some one help what is the issue with it?
i am trying to use chart.js library as source for displaying charts
not able to display bar chart with above code. could some one help what is the issue with it?
i am trying to use chart.js library as source for displaying charts
Some braces are not closed in your script, And the chart.js version referenced is very old. The chart was displayed when I corrected your script and updated chart.js to the current version 2.5.0.
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="text/javascript"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
borderWidth: 1
}
]
}
});
</script>
</body>