interactive Button doesn't hide the chart as I intended - javascript

I'm trying to link a set of data to each green button up in the display: I'd like to click the button and display half of the curves in my graph. I created the buttons, the function and linked data but it doesn't work. The end goal is to click the button (a month) and display just a portion of the three curves:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Covid Piemonte 2020</title>
<h1>Evoluzione del virus Covid-19 nel bimestre marzo-aprile 2020 (Piemonte)</h1>
<br>
<button class="btn btn-success" onclick="updateChart()">MARZO</button>
<button class="btn btn-success" onclick="updateChart1()">APRILE</button>
<br>
</head>
<body>
<div class="container">
<canvas id="myChart" width="720" height="360"></canvas>
</div>
<script>
var label1 = ['16-marzo', '17-marzo', '18-marzo', '19-marzo', '20-marzo', '21-marzo', '22-marzo', '23-marzo', '24-marzo', '25-marzo', '26-marzo', '27-marzo', '28-marzo', '29-marzo', '30-marzo', '31-marzo', '1-aprile', '2-aprile', '3-aprile', '4-aprile', '5-aprile', '6-aprile', '7-aprile', '8-aprile', '9-aprile', '10-aprile', '11-aprile', '12-aprile', '13-aprile', '14-aprile', '15-aprile', '16-aprile', '17-aprile', '18-aprile', '19-aprile', '20-aprile', '21-aprile', '22-aprile', '23-aprile', '24-aprile', '25-aprile', '26-aprile', '27-aprile', '28-aprile', '29-aprile', '30-aprile'];
var olddata = [5589, 6872, 8140, 9424, 10590, 11799, 12869, 14619, 16110, 17509, 18486, 20197, 22829, 24782, 26578, 28918, 31135, 33431, 36547, 38638, 40638, 43306, 46927, 51311, 55548, 60271, 65391, 69003, 71615, 74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
var olddata1= [1516, 2063, 2659, 3017, 3576, 4059, 4541, 5094, 5767, 6193, 6708, 7228, 7920, 8461, 8835, 9418, 9918, 10466, 11082, 11839, 12442, 13046, 13434, 13964, 14671, 15412, 16109, 16733, 17246, 17773, 18446, 19261, 19954, 20581, 21144, 21437, 22149, 22854, 23319, 24050, 24549, 24910, 25216, 25538, 25995, 26453];
var olddata2= [111, 144, 166, 183, 224, 255, 300, 336, 403, 483, 545, 598, 662, 734, 795, 854, 924, 1018, 1088, 1144, 1191, 1284, 1349, 1349, 1417, 1487, 1591, 1689, 1788, 1876, 1969, 2064, 2146, 2224, 2302, 2379, 2453, 2524, 2598, 2668, 2737, 2803, 2859, 2913, 2966, 3032, 3086];
let myChart = (document.getElementById('myChart').getContext('2d'));
let myCovidChart = new Chart(myChart, {
type: 'line',
data:{
labels:label1,
datasets:[{
data:olddata,
label: 'numero cumulativo dei Tamponi',
borderColor:'green',
},{
data:olddata1,
label: 'Numero incrementale dei contagiati',
borderColor: 'red',
},{
data: olddata2,
label: 'Numero incrementale dei decessi',
borderColor: 'blue',
}]
},
options:{
}
});
function updateChart(){
{
function updateChart(){
chart.data.datasets[0].data = [74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
chart.update();
}
}
};
</script>
</body>
</html>

I think I see two issues with your current code.
Your chart variable is myCovidChart, but in updateChart you reference chart.
Your function updateChart defines a local function also called updateChart, but doesn't call it.
These can be fixed by changing the updateChart function to:
function updateChart() {
myCovidChart.data.datasets[0].data = [120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
myCovidChart.update();
}

As domdomegg pointed out in his answer your update function was not correct, the chart pointed to the wrong variable because chart was nothing because you stored the chart in the myCovidChart, also the update function didnt work because you nested it double with a lot of extra brackets so it couldnt find the variable anymore. If you remove all extra clutter and point to the right variable it will work
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Covid Piemonte 2020</title>
<h1>Evoluzione del virus Covid-19 nel bimestre marzo-aprile 2020 (Piemonte)</h1>
<br>
<button class="btn btn-success" onclick="updateChart()">MARZO</button>
<button class="btn btn-success" onclick="updateChart1()">APRILE</button>
<br>
</head>
<body>
<div class="container">
<canvas id="myChart" width="720" height="360"></canvas>
</div>
<script>
var label1 = ['16-marzo', '17-marzo', '18-marzo', '19-marzo', '20-marzo', '21-marzo', '22-marzo', '23-marzo', '24-marzo', '25-marzo', '26-marzo', '27-marzo', '28-marzo', '29-marzo', '30-marzo', '31-marzo', '1-aprile', '2-aprile', '3-aprile', '4-aprile', '5-aprile', '6-aprile', '7-aprile', '8-aprile', '9-aprile', '10-aprile', '11-aprile', '12-aprile', '13-aprile', '14-aprile', '15-aprile', '16-aprile', '17-aprile', '18-aprile', '19-aprile', '20-aprile', '21-aprile', '22-aprile', '23-aprile', '24-aprile', '25-aprile', '26-aprile', '27-aprile', '28-aprile', '29-aprile', '30-aprile'];
var olddata = [5589, 6872, 8140, 9424, 10590, 11799, 12869, 14619, 16110, 17509, 18486, 20197, 22829, 24782, 26578, 28918, 31135, 33431, 36547, 38638, 40638, 43306, 46927, 51311, 55548, 60271, 65391, 69003, 71615, 74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
var olddata1 = [1516, 2063, 2659, 3017, 3576, 4059, 4541, 5094, 5767, 6193, 6708, 7228, 7920, 8461, 8835, 9418, 9918, 10466, 11082, 11839, 12442, 13046, 13434, 13964, 14671, 15412, 16109, 16733, 17246, 17773, 18446, 19261, 19954, 20581, 21144, 21437, 22149, 22854, 23319, 24050, 24549, 24910, 25216, 25538, 25995, 26453];
var olddata2 = [111, 144, 166, 183, 224, 255, 300, 336, 403, 483, 545, 598, 662, 734, 795, 854, 924, 1018, 1088, 1144, 1191, 1284, 1349, 1349, 1417, 1487, 1591, 1689, 1788, 1876, 1969, 2064, 2146, 2224, 2302, 2379, 2453, 2524, 2598, 2668, 2737, 2803, 2859, 2913, 2966, 3032, 3086];
let myChart = (document.getElementById('myChart').getContext('2d'));
let myCovidChart = new Chart(myChart, {
type: 'line',
data: {
labels: label1,
datasets: [{
data: olddata,
label: 'numero cumulativo dei Tamponi',
borderColor: 'green',
}, {
data: olddata1,
label: 'Numero incrementale dei contagiati',
borderColor: 'red',
}, {
data: olddata2,
label: 'Numero incrementale dei decessi',
borderColor: 'blue',
}]
},
options: {
}
});
function updateChart() {
myCovidChart.data.datasets[0].data = [74060, 78066, 83130, 89136, 94278, 99008, 102082, 107850, 113930, 120387, 127108, 132510, 137069, 140996, 146173, 152447, 158762, 164053, 170109];
myCovidChart.update();
};
</script>
</body>
</html>

Related

How to use ChartjsPluginStacked100 javascript only, no typescript

good day. Im trying to use the plugin chartjs-plugin-stacked100 with chart.js vs3 but im not having any luck. it stays as normal stacked horizontal bar chart.
I think im doing something wrong when importing or registering i but not know what im doing wrong.
here is how im doing my html:
<!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>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-stacked100#1.0.0"></script>
</head>
<body>
<div id="my-chart-container" style="height:400px;">
<canvas id="my-chart" ></canvas>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>
and here is how im doing my js:
Chart.register(ChartjsPluginStacked100);
new Chart(document.getElementById("my-chart"), {
type: "bar",
data: {
labels: ["2010-2015", "2016", "2017", "2018", "2019"],
datasets: [
{ label: "IG", data: [0, 250, 7417.5, 650, 1455], backgroundColor: "rgba(244, 143, 177, 0.6)" },
{ label: "HY", data: [0, 0, 0, 1000, 0], backgroundColor: "rgba(255, 235, 59, 0.6)" },
{ label: "NR", data: [0, 675, 4182.5, 1505, 1735], backgroundColor: "rgba(100, 181, 246, 0.6)" }
]
},
options: {
indexAxis: 'y',
scales: {
xAxis:{
stacked:true
},
yAxis:{
stacked:true
},
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const datasetIndex = tooltipItem.datasetIndex;
const datasetLabel = data.datasets[datasetIndex].label;
// You can use two type values.
// `data.originalData` is raw values,
// `data.calculatedData` is percentage values, e.g. 20.5 (The total value is 100.0)
const originalValue = data.originalData[datasetIndex][tooltipItem.index];
const rateValue = data.calculatedData[datasetIndex][tooltipItem.index];
return `${datasetLabel}: ${rateValue}% (raw ${originalValue})`;
}
}
},
plugins: {
plugins:[ChartDataLabels],
stacked100: { enable: true, replaceTooltipLabel: false }
}
}
});
if anyone can guide me to do it correctly would be appreciated.
here is a jsbin with it, example
Thanks for your time.

How to set the xAxes min and max values of time cartesian chart in Chart.js

I want to create a diagram with Chart.js where the x-Axes is the time.
I want the diagram to show a entire day (from 0 a.m. to 24 p.m.).
Since my data doesn't start at 0 a.m. and doesn't end at 24 p.m. I wanted to set a min and max value for the axes. I tried some varietions but nothing really worked.
index.html:
<!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>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>
my-chart.js:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [
{x: '2021-08-08T13:12:23', y:3},
{x: '2021-08-08T13:12:45', y:5},
{x: '2021-08-08T13:12:46', y:6},
{x: '2021-08-08T13:13:11', y:3},
{x: '2021-08-08T13:14:23', y:9},
{x: '2021-08-08T13:16:45', y:1}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
}
},
y: {
beginAtZero: true
},
xAxes: [{
type: "time",
time: {
min: 1628373600,
max: 1628460000
}
}]
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
Is there a mistake in my code or why it isn't changing anything?
You are trying to use v2 and v3 config at the same time, this wont work. You need to remove the array format and only use the objects to define scales.
When placing the min and max props at the root of the x object for the x scale it works fine, although the time between the min and max you are using is only 1,5 minute:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [{
x: '2021-08-08T13:12:23',
y: 3
},
{
x: '2021-08-08T13:12:45',
y: 5
},
{
x: '2021-08-08T13:12:46',
y: 6
},
{
x: '2021-08-08T13:13:11',
y: 3
},
{
x: '2021-08-08T13:14:23',
y: 9
},
{
x: '2021-08-08T13:16:45',
y: 1
}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
},
min: '2021-08-08T00:00:00',
max: '2021-08-08T23:59:59'
},
y: {
beginAtZero: true
}
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<!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>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>

How to hide the legend display for a specific chart?

What I'm trying now is if I have 1 chart and then, when I click on a button with the "onchange" function, it'll display several chart. But when I'm clicking back, I have the chart I want but there is still the "legend" of the 2nd chart in the top of the 1st chart.
Is there a way to remove it ? I've found options: { legend: { display: false } but it remove the legend for all the chart.
Here is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<div class="row mt-3">
<div class="col-md-12">
<div style="width:75%; margin: 0 auto;">
<canvas id="myChart"></canvas>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkBox" onchange="toggleCategories(event)">
<label class="form-check-label" for="checkBox">Catégories</label>
</div>
</div>
</div>
<script>
var test1 = [0, 10, 5, 2, 20, 30, 45, 60, 43, 22, 11, 23];
var test2 = [90, 80, 75, 62, 50, 40, 35, 11, 2, 24, 28, 34];
var test3 = [90, 10, 90, 10, 50, 40, 23, 62, 13, 32, 11, 13];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'test3', 'test4', 'test5', 'test6', 'test7', 'test9', 'test10', 'test11', 'test12'],
datasets: [{
label: 'My test1',
fill : false,
borderColor: 'rgb(255, 99, 132)',
data: test1,
}, {fill : false
}]
},
// Configuration options go here
options: {}
});
function toggleCategories(e){
if (e.target.checked) {
chart.data.datasets[0].label = 'My test2';
chart.data.datasets[0].data = test2;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test3';
chart.data.datasets[1].data = test3;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
} else {
chart.data.datasets[0].label = 'My test1';
chart.data.datasets[0].data = test1;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = '';
chart.data.datasets[1].data = '';
chart.data.datasets[1].borderColor = '';
}
chart.update();
}
</script>
</body>
</html>
Cordially
Chart.js highly depends on its data. Therefore, the easiest way is just dynamically populating the necessary data to your chart whenever you need it. This should add and remove the legend as expected. However, don't forget updating your chart on data change.
Let's add some code to get an idea about it, since basically you're actually doing it - but just a little bit wrong.
The data of your chart is stored in dataset. As we can see you have 2 entries whereas the 2nd one is just an object containing a boolean property (fill). Therefore, it's displaying undefined in your legend at the very beginning.
datasets: [{
label: 'My test1',
fill: false,
borderColor: 'rgb(255, 99, 132)',
data: test1,
}, {
fill: false
}]
However, when toggling the the checkbox it looks fine, since you're overwriting everything within your toggleCategories as seen below.
function toggleCategories(e) {
if (e.target.checked) {
chart.data.datasets[0].label = 'My test2';
chart.data.datasets[0].data = test2;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test3';
chart.data.datasets[1].data = test3;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
} else {
...
}
chart.update();
}
But taking a closer look to else shows what's going on here.
// Those 3 lines just reset on index 1, it doesn't get deleted
chart.data.datasets[1].label = '';
chart.data.datasets[1].data = '';
chart.data.datasets[1].borderColor = '';
So in order to get rid of the 2nd legend when you only want 1, you simply have to remove the object of dataset[1] and re-add it whenever you need it.
You might want to look into this fiddle for a fully working example:
It could be a solution?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<div class="row mt-3">
<div class="col-md-12">
<div>
<h5 id="legend" style="text-align: center;">My test 1</h5>
</div>
<div style="width:75%; margin: 0 auto;">
<canvas id="myChart"></canvas>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkBox" onchange="toggleCategories(event)">
<label class="form-check-label" for="checkBox">Catégories</label>
</div>
</div>
</div>
<script>
var test1 = [0, 10, 5, 2, 20, 30, 45, 60, 43, 22, 11, 23];
var test2 = [90, 80, 75, 62, 50, 40, 35, 11, 2, 24, 28, 34];
var test3 = [90, 10, 90, 10, 50, 40, 23, 62, 13, 32, 11, 13];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'test3', 'test4', 'test5', 'test6', 'test7', 'test9', 'test10', 'test11', 'test12'],
datasets: [{
label: 'My test1',
fill : false,
borderColor: 'rgb(255, 99, 132)',
data: test1,
}, {fill : false
}]
},
// Configuration options go here
options: {legend:{display: false}}
});
function toggleCategories(e){
if (e.target.checked) {
changeLegendOnCl();
chart.data.datasets[0].label = 'My test2';
chart.data.datasets[0].data = test2;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test3';
chart.data.datasets[1].data = test3;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
} else {
document.getElementById("legend").innerHTML = "My test 1";
chart.data.datasets[0].label = 'My test1';
chart.data.datasets[0].data = test1;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test1';
chart.data.datasets[1].data = test1;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
}
chart.update();
}
function changeLegendOnCl(){
document.getElementById("legend").innerHTML = "My test 2"+" "+"My test 3";
}
</script>
</body>
</html>

Control multi line spreading of x-axis tick in billboard.js

Following one example we can format the tick text. I see that this is set to multiline: true by default, which is fine, but I also want to be able to control where the line breaking happens. Is there a way to do that?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
rotate: -75,
format: function (x) {
return x.getFullYear() + ' control this line breaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>
There's no <br> for svg text nodes. To line break, it needs to add a <tspan> node for each line of text.
For this moment, you can handle line-breaking with the axis.x.tick.width option.
axis: {
x: {
tick: {
width: 80
}
}
},
UPDATE - billboard.js now supports multiline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
//rotate: -20,
format: function (x) {
return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>

How to pass variables from Razor to JavaScript?

I have one C# variable "value" that I want to pass into JavaScript Chartjs data object. It renders the chart but does not include the two #p values. See code source below:
cshtml file:
#{
int p1 = 43;
int p2 = 45;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
javascript file:
var chart = document.getElementById("lineChart");
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(#p1)', '(#p2)', 50, 48, 47, 52]
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);
How can I write it so that it works?
You can do
<script type="text/javascript">
var p1 = #p1, p2= #p2;
</script>
and use p1, p2.
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: [p1, p2, 50, 48, 47, 52]
}
]
};
In this case you don't have to use hidden html fields and you can expand your code to use more field like
var tempObj ={
tempData: "",
otherData:"",
moreData: ""
}
Something like below
View:
#{
var p1 = 43;
var p2 = 45
}
<input type="hidden" id="PassingToJavaScript1" value=#p1>
<input type="hidden" id="PassingToJavaScript2" value=#p2>
JavaScript:
var p1 = document.getElementById('PassingToJavaScript1').value;
var p2 = document.getElementById('PassingToJavaScript2').value;
Use a hidden field which will hold the value and then read the hidden field's value from JavaScript.
Example:
#{
int p = 43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
<input type="hidden" id="someId" value="#p" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
var chart = document.getElementById("lineChart");
var hiddenFieldValue = document.getElementById("someId").value;
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(hiddenFieldValue)', 45, 50, 48, 47, 52] // Not really sure how to format the data but you get main idea...
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);

Categories