Change data onclick with ChartJS - javascript

I have a line chart in ChartJS with euro's values. I'd like to be able to change the data in $.
The Euro Chart works well but I'm not able to change the datas.
My Chart:
<canvas id="myChart" width="820" height="650"></canvas>
let ctx = document.getElementById("myChart");
Chart.defaults.global.defaultFontSize = 15;
var dataEu = [{{{ cote_1989_eu_base_eu }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_eu }}}, {{{ cote_2017_base_eu }}}, {{{ cote_actual_base_eu }}}];
var dataUsd = [{{{ cote_1989_eu_base_usd }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_usd }}}, {{{ cote_2017_base_usd }}}, {{{ cote_actual_base_usd }}}];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1989", "2004", "2014", "2017", "2019"],
datasets: [
{
spangaps: true,
label: 'Exceptionnel',
data: dataEu,
backgroundColor: 'transparent',
borderColor: '#00C853',
borderWidth: 4,
pointWidth: 3,
pointRadius: 5,
pointHoverRadius: 6,
pointBorderColor: '#FFF',
pointBackgroundColor: '#00C853',
pointBorderWidth: 1,
pointHitRadius: 100,
datalabels: {
display: false
}
}]}
});
How can I change the data afterwards, replacing dataEu by dataUsd, if I click on a radio button for example ?
if (radioButtonEu.checked = true) {
???
}

Assuming dataUs and dataEu are arrays with values, you can access and change the data of your chart easily with javascript like this:
myChart.data.datasets[0].data = dataUs; // assuming dataUs is an array
After doing that you need to rerender the chart with
myChart.update();
Heres a fully functional CODEPEN EXAMPLE. Feel free to manipulate and play around with it.

Related

How to reach to a chartjs chart's value?

I have a chartjs line chart that has multiple lines like that;
I have been trying to add a date-time selector but I am not able to update my chart because I don't get how to reach the datas of my chart. Here is my chart decleration;
var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time1, time2,
datasets: [
{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
},
{
label: 'Temperature - 2',
data: temp2,
backgroundColor: 'transparent',
borderColor: 'purple',
borderWidth: 3
},
{
label: 'Humidity - 1',
data: hum1,
backgroundColor: 'transparent',
borderColor: 'green',
borderWidth: 3
},
{
label: 'Humidity - 2',
data: hum2,
backgroundColor: 'transparent',
borderColor: 'yellow',
borderWidth: 3
}]
},
options: {
elements: {
line: {
tension: 0
}
},
scales: {
y: {
title: "Temperature/Humidity",
beginAtZero: true,
min: 10,
max: 60
}
}
}
});
time1, time2, temp1, temp2, hum1, hum2 are all array. When I want to update the chart using chart.update() function that I read at its own documentation, as I said I don't get it how to reach to data arrays like temp1, temp2.
Something like myChart.data.datasets.data would not work, making them like json;
{first_data:{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
}},
Doesn't work also, how can I reach to temp1 for example?
SOLUTION:
Because of my carelessness I had asked a nonsense question. Because of myChart.data.datasets is an object, I am able to reach to temp1 like myChart.data.datasets[0].data, sorry everyone
You will need to target the specific dataset you want to get the data from so to get the data of the Temperature - 1 dataset you will need to target it like this: myChart.data.datasets[0].data
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, options);
console.log(myChart.data.datasets[0].label)
console.log(myChart.data.datasets[0].data)
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Bollinger bands in React application with a library

I am using Chart.js library in my React application.
I want to implement Bollinger Bands looking like this:
Is it possible and if so how? I have searched through issues of the repository and have not found the answer I am looking for.
If it is not possible what other library could you recommend? I have looked into:
Highcharts
React-charts
react-chartjs-2
React-financial-charts
react-stockcharts
Recharts
Could you direct me to the sources I need to read.
Thanks in advance.
This is not possible in chart.js by default, you can achieve this in 2 ways, you can write a custom inline plugin to draw it on the canvas or you can use 2 extra datasets and filter out the legend
Extra datasets example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'black',
borderColor: 'black'
},
{
label: 'boll 1',
data: [6.6, 9, 4, 7, 0, 2],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
tension: 0.4,
pointHitRadius: 0
},
{
label: 'boll 2',
data: [7.3, 11.5, 5.9, 9.6, 5, 11],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
fill: '-1',
tension: 0.4,
pointHitRadius: 0
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (label, data) => (!label.text.includes("boll"))
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

How to pass variables from flask to external javascript in chart js

I have this chart (as shown below)
let ctx1 = document.getElementById("myChart").getContext('2d');
let labels = ['Banking', 'Finances', 'Shopping', 'Recreation', 'Healthcare', 'Transportation', 'Food and Drink'];
let colorHex = ['#FB3640', '#86A9C5', '#286CA1', '#77FAC', '#1C203D', '#798E9C', '#2A303D'];
let myChart = new Chart(ctx1, {
type: 'pie',
data: {
datasets: [{
data: [10, 10, 10, 10, 10, 10, 10],
backgroundColor: colorHex,
borderWidth: [0,0,0,0,0,0,0]
}],
labels: labels,
},
options: {
responsive: false,
legend: {
position: 'bottom',
labels: {
fontColor: 'white'
}
},
plugins: {
datalabels: {
color: '#fff',
anchor: 'end',
align: 'start',
offset: 10,
borderWidth: 0,
// borderColor: '#fff',
borderRadius: 0,
font: {
size: '10',
color: '#fff'
},
formatter: (value) => {
return value + ' %';
}
}
}
}
})
I call it through the html (as shown below)
<canvas id= "myChart" height="330%" width="330%"></canvas>
What I want to do pass variables in the data attribute in the JS - from my backend in flask so that the values that the chart displays will change.
How do I do this?
Thanks
If you are not using javascript externally then you can pass Flask's variable to Template
view and then in view html you can use directly into the javascript as below:
data: {
datasets: [{
data: {{ chartData | tojson }}, //chartData variable is passed From flask to view template
backgroundColor: colorHex,
borderWidth: [0,0,0,0,0,0,0]
}],
labels: labels,
},
Here chartData is Varible passed from Flask to View html, it will have values like
chartData = [10, 12, 11, 12, 10, 12, 11]

Remove data after adding it (chart.js)

I have an add data function in my bar-chart but I would like to be able to remove this data with onclick. How do I do this?
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;
// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: [ "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true,
}]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
};
function addData() {
myBarChart.data.labels[7] ="Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// We add an init function down here after the chart options are declared.
init();
function init() {
// Chart declaration:
myBarChart = new Chart(ctx, {
type: chartType,
data: data,
options: options
});
}
Below is a working example that demonstrates modifying and updating the chart when clicking a button. Your addData function is a little odd in that it adds data at index 7, but the dataset only has keys 0-5, so this causes an extra blank data point to be inserted at index 6.
In case this isn't what you intended, I added some extra functions (pushData and popData) to show adding and removing from the end of a dataset as that's a quite common requirement (and therefore documented).
// same as original function; inserts or updates index 7.
function addData(e) {
myBarChart.data.labels[7] = "Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// requested function; removes index 7.
function removeData(e) {
myBarChart.data.labels.splice(7, 1);
myBarChart.data.datasets[0].data.splice(7, 1);
myBarChart.update();
}
// example of how to add data point to end of dataset.
function pushData(e) {
myBarChart.data.labels.push("Ekologisk palmolja");
myBarChart.data.datasets[0].data.push(14);
myBarChart.update();
}
// example of how to remove data point from end of dataset.
function popData(e) {
myBarChart.data.labels.pop();
myBarChart.data.datasets[0].data.pop();
myBarChart.update();
}
// set listeners on buttons
document.getElementById('add1').addEventListener('click', addData);
document.getElementById('remove1').addEventListener('click', removeData);
document.getElementById('add2').addEventListener('click', pushData);
document.getElementById('remove2').addEventListener('click', popData);
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
let myBarChart = new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
<button id="add1">Add index 7</button>
<button id="remove1">Remove index 7</button>
<button id="add2">Add to end</button>
<button id="remove2">Remove from end</button>

how to label axis within radar chart with chart.js

I would like to label the axis within an chart.js radar chart differently. The axis are labeled with numbers from 1 to 5 (see print screen). I would like to have instead of 1 = "No", 2 = "Basic", 3 = "Proficient" etc.
Is that somehow configurable with chart.js in a radar chart, e.g. by using chart.js options?
Thanks in advance
Since you are using Chart.js version 2.1.3, it will be very simple to achieve what you want.
In any chart (including the radar, the one you are using), labels on values are stored in options.scale.ticks.
Then, if you want to edit the way they are displayed, you must use Chart.js callbacks, like this :
var options = {
scale: {
ticks: {
beginAtZero: true,
userCallback: function (value, index, values) {
// Default callback
return value;
}
}
}
}
Edit the return value with what you want.
Here is a jsFiddle, and also a fully working example using a simple array with the labels you want to display :
var ctx = document.getElementById("myChart").getContext("2d");
var notations = {
0: "",
0.5: "",
1: "no",
1.5: "",
2: "basic",
2.5: "",
3: "proficient",
3.5: "",
4: "great",
4.5: "",
5: "outstanding",
}
var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [3.25, 2.95, 4.5, 4.05, 2.8, 2.75, 2.0]
}, {
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [1.4, 2.4, 2.0, 0.95, 4.8, 1.35, 5.0]
}]
};
var myChart = new Chart(ctx, {
type: "radar",
data: data,
options: {
scale: {
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return notations[value];
}
}
}
}
});
console.log(myChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Categories

Resources