I'm having an issue in setting bars width using chart.js.
This is my code:
<script>
var endpoint = '/api/';
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
drawBarGraph(data, 'myChartBar');
console.log("drawing");
},
error: function (error_data) {
console.log(error_data);
}
})
function drawBarGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
barThickness: 0.9,
label: chartLabel,
data: chartdata,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
</script>
I cannot increase the bar thickness.
I'm using Argon Dashboard with Django.
Is this an issue with theme's css?
What am I missing here?
Change this value
xAxes: [{
// Change this
barPercentage: 0.2
}]
Related
I am using chart.js to create a linegraph from data in a locally hosted mysql DB.
I am able to pull this data and display it as intended, however despite following documentation and advice given else where I am unable to hide the xAxis Labels. The code I am using is below - any help would be much appriacated.
var chardata = {
labels: time,
datasets: [
{
label: "System health",
fill: false,
backgroundColor: "rgba(123, 192, 67, 0.75)",
borderColor: "rgba(123, 192, 67, 1)",
pointHoverBackgroundColor: "rgba(123, 192, 67, 1)",
pointHoverBorderColor: "rgba(123, 192, 67, 1)",
data: health_score
}
]
};
var ctx = $("#mycanvas");
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
};
var LineGraph = new Chart(ctx, options);
Cheers
..
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
}
};
..
I'm using Chart.js to show a bar graph from two datasets for every month to show the evolution of certain data. Now the problem is the way Chart.js is showing these bars.
var myChartIBM = new Chart(ctx1, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
datasets: [{
label: "Número de entregas",
data: entregas,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
},
{
label: "Número de reversas",
data: reversas,
backgroundColor: [
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 500
}
}],
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
ticks: {
source: 'data'
},
time: {
unit: 'month',
tooltipFormat: 'll'
}
}]
},
tooltips: {
mode: 'x', // optional
callbacks: {
title: function(tooltipItems, data) {
let tI = tooltipItems[0];
return data.datasets[tI.datasetIndex].data[tI.index].x;
}
}
},
plugins: {
datalabels: {
formatter: function(value, context) {
return value['y'];
}
}
},
responsive: true,
maintainAspectRatio: true
}
});
My doubt is why is it showing grey after the first dataset and what could I do to fix this. Maybe should I always add a zero?
This is the code on PHP side which generates the data:
$col_entregas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_recepcion) as year, month(fecha_recepcion) as month"))->whereNotNull('fecha_recepcion')->whereNotNull('guia_recepcion')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();
$col_reversas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_reversa) as year, month(fecha_reversa) as month"))->whereNotNull('fecha_reversa')->whereNotNull('guia_reversa')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();
$ar_entregas = [];
$ar_reversas = [];
$meses_grafico = [];
foreach($col_entregas as $entrega)
{
$fecha = $entrega->year . '-' . $entrega->month;
$meses_grafico[] = $fecha;
$ar_entregas[] = ["x" => $fecha,
"y" => $entrega->cantidad];
}
foreach($col_reversas as $reversa)
{
$fecha = $reversa->year . '-' . $reversa->month;
$ar_reversas[] = [
"x" => $fecha,
"y" => $reversa->cantidad];
}
So I had to add a foreach to add the same color to every entry in both arrays and that fixed the issue:
var colors_entregas = [];
var border_entregas = [];
entregas.forEach(function (el){
colors_entregas.push('rgba(255, 99, 132, 0.2)');
border_entregas.push('rgba(255, 99, 132, 1)');
});
var colors_reversas = [];
var border_reversas = [];
reversas.forEach(function (el){
colors_reversas.push('rgba(54, 162, 235, 0.2)');
border_reversas.push('rgba(54, 162, 235, 1)');
});
Inside every dataset:
data: entregas,
backgroundColor: colors_entregas,
borderColor: border_entregas,
I need not to load the same type of data for different sections in one bar/pie chart. On load it shows relevant data but after that, when I load the data of subsequent sections is loaded then it shows irrelevant data or it shows previous sections data.
Demo link: http://coderstutor.com/ChartProb/
codepenLink: https://codepen.io/tumulalmamun/pen/eeVmVX
var chartList = [5,6];
function chart(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
chart();
function addData(){
var i = 4;
var o = 8;
chartList = [];
chartList.push(i);
chartList.push(o);
chart();
}
</script>
</body>
Every time you update it, you're sort of like, creating a new chart over it. What you need to do is to destroy the chart before updating it.
myChart.destroy()
I updated your javascript code:
var chartList = [5,6];
var myChart;
function chart(){
var ctx = document.getElementById("myChart").getContext('2d');
if (myChart != undefined && typeof myChart == 'object' && typeof myChart.destroy == 'function') myChart.destroy()
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: chartList,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
chart();
function addData(){
var i = 4;
var o = 8;
chartList = [];
chartList.push(i);
chartList.push(o);
chart();
}
I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image
Although I am able to make it by drawing two line in this example
var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
afterDraw: function(chart) {
if (typeof chart.config.options.lineAt != 'undefined') {
var lineAt = chart.config.options.lineAt;
var ctxPlugin = chart.chart.ctx;
var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
ctxPlugin.strokeStyle = "green";
ctxPlugin.beginPath();
lineAt = 102;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.moveTo(xAxe.left, lineAt-33);
ctxPlugin.lineTo(xAxe.right, lineAt-33);
ctxPlugin.stroke();
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
datasets: [{
label: 'Findings',
data: [0,45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
lineAt: 15,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Please share your suggestion here : http://jsfiddle.net/nikleshraut/ad2fsefe/
There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.
Using that plugin, you'll need to create a box annotation (rectangle), as such :
options: { //your chart options
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
note: this is the minimum options required to draw that rectangle,
and you can find more options here.
Here is a working fiddle.
I'm with a error on my HorizontalBar Chart. Basically when i mouse hover on some bar, it should show me the Label name and Value of this bar. But in my chart it shows Label and Label, without value.
Here is a pic: https://i.stack.imgur.com/NGNPM.jpg
it should show me : "Top 10 Clientes and 2400 below"
This is totally static code, here is:
var gerarGraficoDeBarrasHorizontal = function (name, labels, components){
var myChart = new Chart(name, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: components
},
options: optionsSemLegenda
});
}
// OBJECT TO CLARIFY THE CHART CREATION
var barrasHorizontal = [{
data: [2500, 5000],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)'],
borderWidth: 1
}];
// CREATE CHART
gerarGraficoDeBarrasHorizontal('topDezClientesxFaturamentoTotal', ["Top 10
Clientes", "Faturamento Total"], barrasHorizontal);
Thanks a lot!!
#Edit #1
var optionsSemLegenda = new Object();
optionsSemLegenda = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}