I am trying to set the attribute of an HTML canvas element, but the attribute has a value, which should be an array. How should it be done? Please help.
JavaScript:
var labels = ["January", "February", "March", "April", "May", "June", "July"];
var series = ['Series A', 'Series B'];
var data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
var datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
var options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
Trying to set attribute:
$('#line').attr("chart-data", data);
$('#line').attr("chart-labels", labels);
$('#line').attr("chart-series", series);
$('#line').attr("chart-options", datasetOverride );
$('#line').attr("chart-dataset-override", options);
HTML:
<canvas id="line" class="chart chart-line"></canvas>
You can do this in many ways. One of them is convert them to a string with join. Like this:
var data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
var joined = data.join(',');
console.log(joined);
$('#line').attr("chart-data", joined);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line">line</div>
Please inspect the div element. I used a div, so you could inspect it, but it's the same with canvas.
Related
I have a double doughnut chart. When a mouse hovers a particular dataset, it must maintain its color, while everything else should become darker as shown in this picture picture. In other words, I need the opposite of a hover effect. Here is my code https://jsfiddle.net/arrruzhan11/mufw4r07/ (p.s. hover effect in the snippet below is not working).
var ctx = document.getElementById("myChart");
var doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets: [
{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8','#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db','#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
hoverBackgroundColor: ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
hoverOffset: 10,}
]},
options: {
tooltips: {
callbacks: {
beforeBody: function (chart, data) {
const hoverval = document.getElementById('hoverval');
var datasetIndex = chart[0].datasetIndex;
var label = data.datasets[datasetIndex].label;
hoverval.innerText = `${label}`;
}
},
},
responsive: true,
legend: {
position: "left",
align: "start",
fullSize: true,
},
hover: {
mode: 'dataset',
},
}})
#hoverval {
padding: 10px;
border: solid 1px grey;
background: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<h3>
How to darken other datasets when hovering one dataset in chart js?
</h3>
<div id="hoverval"> </div>
<canvas id="myChart" width="470" height="200"></canvas>
You can define an onHover function as follows:
onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
}
For further information, please consult the Chart.js documentation here.
Please take a look at your amended code and see how it works. Note that this sample uses Chart.js v3.8.2, the current most recent version of the library.
const bgColor = ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'];
const hoverBgColor = ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'];
new Chart('myChart', {
type: 'doughnut',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: 'Fact',
data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
backgroundColor: bgColor
},
{
label: 'Plan',
data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
backgroundColor: bgColor
}
]
},
options: {
responsive: false,
onHover: (e, activeElements, chart) => {
const datasets = chart.config.data.datasets;
if (activeElements[0]) {
let ctx = activeElements[0].element.$context;
datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
} else {
datasets.forEach(ds => ds.backgroundColor = bgColor);
}
chart.update();
},
plugins: {
legend: {
position: "left",
align: "start",
fullSize: true,
}
},
hover: {
mode: 'dataset',
},
}
})
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#3.8.2/dist/chart.min.js"></script>
<div id="hoverval"> </div>
<canvas id="myChart"></canvas>
Suppose x1={1,4,7,9} | y1={10,20,35,40} and x2={2,3,6,9} | y2={15,23,30,35}. Now I want to draw a line chart in chart.js for it.
P.S. Scatter chart is not a solution because my website is generating data dynamically so I have to provide data in array only and scatter requires the data in very sophisticated manner.
My simple question is by any way, can we have different x axis points in line chart for different lines??
code for your reference:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues1 = [50,60,70,80,90,100,110,120,130,140,150];
var yValues1 = [7,8,8,9,9,9,10,11,14,14,15];
var xValues2 = [54,64,74,84,94,104,114,124,134,144,154];
var yValues2 = [8,9,9,10,10,10,11,12,15,15,16];
new Chart("myChart", {
type: "line",
data: {
labels: xValues1,
datasets: [{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues1
},
{
fill: false,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues2
}
]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
(for yvalues2, I want xvalues2)
You can add a second X axis for your other labels:
const xValues1 = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yValues1 = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
const xValues2 = [54, 64, 74, 84, 94, 104, 114, 124, 134, 144, 154];
const yValues2 = [8, 9, 9, 10, 10, 10, 11, 12, 15, 15, 16];
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: yValues1,
borderColor: 'pink'
},
{
label: '# of Points',
data: yValues2,
borderColor: 'orange',
xAxisID: 'x2' // Match dataset to other axis
}
]
},
options: {
scales: {
xAxes: [{
type: 'category',
labels: xValues1,
id: 'x',
display: true // Set to false to hide the axis
},
{
type: 'category',
labels: xValues2,
id: 'x2',
display: true // Set to false to hide the axis
}
]
}
}
}
const 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/2.9.4/Chart.js"></script>
</body>
I have two datasets in datasets array and they have labels like My first dataset and My second dataset.I only want to show My first dataset label.I researched on the internet and only could find how to remove all or not.
Here jsFiddle : http://jsfiddle.net/yj6mqu4r/
In the options, add the following:
options: {
legend: {
labels: {
filter: function(label) {
if (label.text == 'My first dataset') return true;
}
}
}
}
See the following snippet:
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My first dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}, {
label: "My second dataset",
data: [60, 20, 50, 41, 36, 25, 80],
fill: false
}]
},
options: {
legend: {
labels: {
filter: function(label) {
if (label.text == 'My first dataset') return true;
}
}
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.js"></script>
I'm using Chart.js to display some charts.
When I use the onload function for the pie chart it loads correctly on the page, when I add a second variable to onload for bar-chart, nothing will display.
My javascript code looks like this
var config = {
type: 'pie',
data: {
datasets: [
{
data : [10, 30, 40, 50],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#65b13b",
],
}],
labels: ["4G", "5G", "Mano"],
},
options: {
responsive: true
}
};
var barChartData = {
type: 'bar',
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
options: {
responsive: true
},
};
window.onload = function() {
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(ctx, config);
};
var bctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(bctx, barChartData);
};
My html code looks like this:
<canvas id="bar-chart" class="chart-holder" height="250" width="538"></canvas>
<canvas id="pie-chart" class="chart-holder" height="250" width="538"></canvas>
I've looked at other solutions but they are all very complicated and I feel like it's only something simple.
The bar-chart code is outside the window.onload function. Put that inside the window.onload function:
window.onload = function() {
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(ctx, config);
var bctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(bctx, barChartData);
};
I have searched in google and was not able to find how to display tool tip in line chart. I am using angular-chart.js.
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
});
HTML
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
I am searching similar kind of this, which displays percentage on the tool tip.
I have tried the below options.(found in the angular-js issues). But its not working.
var options = {
scaleShowLabelBackdrop : true,
scaleShowLabels : true,
scaleBeginAtZero : true,
scaleLabel : "Percent",
multiTooltipTemplate: "10% achieved"
}