I'm in need of some help. I'm using chart.js graphics, with the "doughnut" model. I need the values to be printed on the chart, both the absolute value and its percentage in relation to the amount (as shown in the model below).
Please could someone help
var ctx = document.getElementById("tempoGastoNaLoja");
var myDoughnutChart2 = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
"10min",
"30min",
"45min",
"1h",
"1h30",
"2h+"
],
datasets: [
{
data: [80, 42, 38, 21, 15, 18],
backgroundColor: [
"#ffd833",
"#f4b12d",
"#e88b28",
"#dd6422",
"#d13e1d",
"#c61717"
],
hoverBackgroundColor: [
"#ffd833",
"#f4b12d",
"#e88b28",
"#dd6422",
"#d13e1d",
"#c61717"
]
}],
options: {
responsive: true,
maintainAspectRatio: false,
}
}
});
Related
I try to display stacked line chart but it doesn't work.
Could you advise where I should change with the following code?
window.onload=function(){
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: {{subcategories|tojson}},
datasets: [
{
1st_sample_dataset
},
{
2nd_sample_dataset
}
]
},
options = {
scales: {
yAxes: [{
stacked: true
}]
}
};
new Chart(ctx).Line(data, {
onAnimationComplete: function () {
var sourceCanvas = this.chart.ctx.canvas;
var targetCtx = document.getElementById("myChartAxis").getContext("2d");
targetCtx.canvas.width = copyWidth;
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
}
});
}
And this is actual display.
From your code I presume you're using an old version of chart.js.
new Chart(ctx).Line(data, {
...
Charts are now created in a different way.
var myChart = new Chart(ctx, {
type: 'line',
...
If you switch to version 2.9.3., it works fine as the following code sample illustrates.
new Chart(document.getElementById('myChartAxis'), {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [
{
label: 'WARNINGS',
data: [1, 2, 3, 2],
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.2)'
},
{
label: 'ERRORS',
data: [1, 2, 1, 3],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}
]
},
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChartAxis" height="90"></canvas>
When updating from 2.7.1 I've found the Polar Area Chart has changed something about how it is displayed. There's now a lot of padding on either side of the graph, so that it no longer fills the div in which the canvas is placed.
I've got screenshots of the same output using 2.5.0 and 2.7.1
Everything other than the version of chart.js being used is the same in the two screenshots.
Is there a way to fix this so that I can stay up to date with 2.7.1 and get the output I want, as it looks using 2.5.0 ?
Thanks,
Scott
Here's an example of the output:
//helpers = Chart.helpers;
var trimergencePolarData = {
datasets: [{
data: [
41,
38,
35
],
backgroundColor: [
"rgba(103, 182, 93,.75)",
"rgba(182, 87, 56,.75)",
"rgba(83, 134, 155,.75)"
],
hoverBackgroundColor: [
"rgba(103, 182, 93,1)",
"rgba(182, 87, 56,1)",
"rgba(83, 134, 155,1)"
]
}],
labels: [
"Intuition",
"Emotion",
"Logic"
],
relativeLevel: [
"Primary",
"Secondary",
"Tertiary"
],
activation: [
"Higher",
"Higher",
"Middle"
]
};
window.onload = function() {
var ctx = document.getElementById("polar_chartjs").getContext("2d");
var mytrimergencePolarArea = new Chart(ctx, {
data: trimergencePolarData,
type: "polarArea",
options: {
startAngle: Math.PI * 1.166666666667,
layout: {
padding: 18
},
elements: {
arc: {
//borderColor: "#000000"
}
},
scale: {
ticks: {
min: 5,
max: 50,
stepSize: 5,
display: false
}
},
animation: {
duration: 1000,
easing: "easeOutQuad",
onComplete: function() {
var imgBlob = mytrimergencePolarArea.toBase64Image();
//console.log(imgBlob);
//document.body.appendChild(imgBlob);
data = {
"taking_id": 15,
"action": "trimergence_store_image",
"img_type": "polar_chart",
"imgdata": imgBlob
}
jQuery.post("https://trimergprogrms.wpengine.com/wp-admin/admin-ajax.php", data, function(msg) {
// do nothing for now
});
//});
}
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgba(0,0,0,.6)",
bodyFontColor: "rgb(255,255,255)"
}
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="polar_chartjs"></canvas>
Note the change in chart size (padding) if you change the version of Chart.js from 2.7.1 to 2.5.0
Setting option aspectRatio: 1 fixed the padding issue.
You can change your new chart.js to old 'chart.js' ver 2.5.
And polar ares chart will get normal size.
In Chartjs I have two plots, as shown here:
var config = {
type: 'line',
data: {
labels: [
"2017-07-03T01:05:00+0100",
....
],
datasets: [
{
label: "Consumption",
fill: 'origin',
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
data: [
0.015625,
0.0199861111111,
...
],
}
,
{
fill: 'origin',
label: "PV",
pointRadius: 0,
borderColor: "#ebf909",
backgroundColor: "rgba(29,241,13,210)",
data: [
0.0,
.....
],
}
]
},
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Line Chart - Stacked Area"
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
stacked: false,
scaleLabel: {
display: true,
labelString: 'kWh'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?
You need to set fill property to false for the first dataset (the red one), to make it transparent.
datasets: [{
label: "Consumption",
fill: false,
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
...
or, you can also reduce the opacity of background color, like so ...
backgroundColor: "rgba(255, 10, 13, 0.1)"
Here is the working codepen
Using a standard bar chart I am able to successfully create a chart with two datasets plotted on two y-axis. Working Example here: https://jsfiddle.net/pe8kxjqc/12/ How can I create the same chart as a horizontalBar chart with the labels on the left and the two dataset axes on the top and bottom?
The horizontalBar chart doesn't appear to handle the second axis as expected. I've tried the following but it doesn't work like expected:
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [
{
"label": "Total V",
"xAxisID": "v",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100,90,80,70,60]
},
{
"label": "Total C",
"xAxisID": "c",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10,9,8,7,6]
}]};
var options = {scales:{
xAxes:[
{position:"top",id:"v", gridLines:{color:"rgba(53,81,103,.4)"}},
{position:"bottom",id:"c", gridLines:{color:"rgba(255,153,0,.4)"}}
]}};
var ctx = document.getElementById("myChart");
new Chart(ctx, {type: "horizontalBar",data:data, options:options});
You can have dynamic configuration for bar as well as horizontalBar you can use this configurations
Fiddle demo
var data = {
labels: ["Label1", "Label2", "Label3", "Label4", "Label5"],
datasets: [{
"label": "Total V",
"yAxisID": "A",
"backgroundColor": "rgba(53,81,103,1)",
"borderColor": "rgba(53,81,103,.4)",
"data": [100, 90, 80, 70, 60]
}, {
"label": "Total C",
"yAxisID": "A",
"backgroundColor": "rgba(255,153,0,1)",
"borderColor": "rgba(255,153,0,.4)",
"data": [10, 9, 8, 7, 6]
}]
};
var options = {
scales: {
yAxes: [{
id: 'A',
position: 'left'
}]
}
};
var ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "horizontalBar",
data: data,
options: options
});
coming to your question the actual problem is with var options={...} it is made to work only with bar charts. Hope you understand
Update
Replace following as option in the chart above for required axis scales
var options = {scales:{yAxes:[{id: 'A',position: 'left',gridLines:{color:"rgba(53,81,103,.4)"}},{position:"top",id:"c", gridLines:{color:"rgba(255,153,0,.4)"},ticks: { min: 0,max: 100,}},]}};
updated fiddle
Basically you will need a y-axis for the first dataset which going to hold the labels. And you will need two x-axis for showing the values in the top and in the bottom.
The second dataset will go to the x-axis which is shown at the top.
Working fiddle included:
{
scales: {
yAxes: [{
id: 'A',
position: 'left',
display: true,
gridLines: {
color: "rgba(53,81,103,.4)"
}
}, ],
xAxes: [{
barPercentage: 0.4,
display: true,
id: "1",
position: 'bottom',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}, {
stacked: false,
barPercentage: 1,
display: true,
type: 'linear',
id: '2',
position: 'top',
ticks: {
fontColor: 'rgb(0, 0, 0)'
},
fontSize: 500,
}],
}
};
fiddle for two axis horizontal bar chart
My last column does not show, I use chart.js 2.5,the framework is used laravel 5.4，the data has been confirmed into the incoming.
Look at this figure:
data has been into the incoming :
var ctxBar = $('#barChart');
var data2 = {
labels: {!!json_encode($project_names, JSON_UNESCAPED_UNICODE) !! },
datasets: [{
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 2,
data: {!!json_encode(TasksCountArray($projects), JSON_UNESCAPED_UNICODE) !! }
}]
};
var myBarChart = new Chart(ctxBar, {
type: 'bar',
data: data2,
options: {
responsive: true,
title: {
display: true,
text: 'Projects Tasks'
},
legend: {
display: false
},
fullWidth: true
}
});