I use Apex Charts to make a pie chart that shows the number of seconds I worked on a project. but I want to convert those seconds into a normal format for time, like 1862 should be 00:31:02. I tried to read the documentation but didn't really understand. can someone help?
My code:
<script>
var options = {
series: <?php echo json_encode($graphSmallTotal['data']); ?>,
chart: {
height: 300,
type: 'donut',
},
dataLabels: {
enabled: false
},
theme: {
palette: 'palette2'
},
legend: {
position: "bottom",
horizontalAlign: 'left'
},
labels: <?php echo json_encode($graphSmallTotal['names']); ?>,
colors: <?php echo json_encode($graphSmallTotal['colors']); ?>,
plotOptions: {
pie: {
donut: {
labels: {
name: {
show: false
},
label: {
show: false,
fontSize: '36px',
},
total: {
show: true
}
}
}
}
}
};
var chart = new ApexCharts(document.querySelector("#byProject"), options);
chart.render();
</script>
Create custom formatter for tooltip value like this
tooltip: {
y: {
formatter: function(value) {
return new Date(value * 1000).toISOString().substr(11, 8);
}
}
},
https://apexcharts.com/docs/options/tooltip/#yformatter
Related
I created a chart with two y-axis and one x-axis and struggle to create tooltips with intersect = false, so it will start the tooltip when hovering over the line and not only the point of the chart
However, the whole settings for the tooltip, described on
https://www.chartjs.org/docs/latest/configuration/tooltip.html
Does not seem to have any effect for me. My code see below
I am using this code inside a NodeRed template node
\<canvas id="myChart" width=912 height =370\>\</canvas\>
\<script\>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = '#E6E6E6';
var linecolors = \['#333F50','#B55A11', '#90C050'\]
var backgroundColor = \['#999FA7','#DAAC88', '#C7DFA7'\]
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: {{{payload.labels}}},
datasets: [
{
label: 'Folie Länge Ist',
backgroundColor: backgroundColor[0],
borderColor: linecolors[0],
data: {{{payload.eins}}},
yAxisID: 'left-y-axis',
},
{
label: 'Folie Länge Soll',
backgroundColor: backgroundColor[1],
borderColor: linecolors[1],
data: {{{payload.zwei}}},
yAxisID: 'left-y-axis',
},
{
label: 'Aufwickler Durchmesser',
backgroundColor: backgroundColor[2],
borderColor: linecolors[2],
data: {{{payload.drei}}},
yAxisID: 'right-y-axis',
}
]
},
// Configuration options
options: {
animation: false,
legend: {
display: true,
position: "top"
},
elements: {
point: {
pointStyle: 'circle',
radius: 0
},
line: {
tension: 0,
fill: false
}
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
yAxes: [
{
gridLines :{display:false},
id: 'left-y-axis',
type: 'linear',
position: 'left',
ticks: {
fontColor: linecolors[0],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
},
{
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:1},
id: 'right-y-axis',
type: 'linear',
position: 'right',
ticks: {
fontColor:linecolors[2],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
}
],
xAxes: [
{
ticks: {
autoSkip: true,
autoSkipPadding: 10,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
});
\</script\>
Tried setting intersect = false, also enable = false just to test if these settings have an effect
MWE: See a graph below with countries in the x-axis. What is the best way to show the whole name in the tooltip instead of the acronym? (Show "Germany" instead of "GER", France instead of "FRA", etc.). I have like 10 or 15 of those.
SEE FULL CODE IN jsfiddle
var example2 = [229, 113, 109];
var labels2 = ["GER", "FRA", "LT"];
https://jsfiddle.net/user3507584/6zpb715x/6/
You can add an object with translations where the key is the value from the label and the value is the full country name:
var example2 = [229, 113, 109];
var labels2 = ["GER", "FRA", "LT"];
var translations = {
GER: 'Germany',
FRA: 'France',
LT: "Italy"
}
var barChartData2 = {
labels: labels2,
datasets: [{
label: 'Student Count',
backgroundColor: '#ccece6',
data: example2
}]
};
function drawChart(el, data, title) {
var ctx = document.getElementById(el).getContext("2d");
var bar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
rectangle: {
borderWidth: 2,
borderColor: '#98c4f9',
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: true,
text: title
},
scales: {
yAxes: [{
ticks: {
beginAtZero: 0,
min: 0
}
}],
xAxes: [{
ticks: {
// Show all labels
autoSkip: false,
callback: function(tick) {
var characterLimit = 20;
if (tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...';;
}
return tick;
}
}
}]
},
tooltips: {
callbacks: {
title: function(tooltipItem) {
return translations[tooltipItem[0].xLabel];
}
}
}
}
});
console.log(bar);
};
drawChart('canvas0', barChartData2, 'example title');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
<div id="container">
<canvas id="canvas0"></canvas>
</div>
I'm using Chart.js to create a bar char, I have to display the percentage on each bar, so I found the chartjs-plugin-datalabels, but I can't make it work, the documentation and the examples are not clear for me.
This is What I got:
HTML:
<canvas id="bar-chart" width="800" height="450"></canvas>
Javascript:
// Bar chart
var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: valuelabel,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: valuedata,
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function(context) {
console.log("Algo: "+context);
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
}
}
}
});
myBarChart.update();
Supposedly, from what I get, the "plugin" inside option is the one that let the values to be display, but as I shown in my code above, doesn't work for me, surely I'm missing something but I don't know what, can somebody help me?
Thanks.
Fiddle:
https://jsfiddle.net/s64bq4sw/16/
It was because of the version of the Chartjs I was using, this plugin requieres 2.7.0 or later.
I am using ChartJS and need a chart like this: https://tppr.me/OE08p
Meaning it should ignore 4 of the labels (flexibility, external, stability, internal) and connect the dots from the other 4 labels (like the red lines show on the screenshot).
Can I ignore these 4 labels data-wise somehow, but keep them?
Other chart packages/solutions are welcome, if it is not possible in chartjs.
You can use highchart.js library, see:
docs: https://www.highcharts.com/docs/chart-and-series-types/polar-chart
example: https://www.highcharts.com/demo/polar-spider
with these options:
plotOptions: {
series: {
connectNulls: true
}
}
and filtering data with map function like below (just for example):
data.map(filter)
<omissis>
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
here is a jsfiddle showing this approach: http://jsfiddle.net/beaver71/w6ozog1c/
or a snippet here:
// original data
var data1 = [43000, 19000, 60000, 35000, 17000, 10000],
data2 = [50000, 39000, 42000, 31000, 26000, 14000];
var chart = Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: data1.map(filter), // filtered data
pointPlacement: 'on',
color: 'red'
}, {
name: 'Actual Spending',
data: data2,
pointPlacement: 'on',
color: 'green'
}],
plotOptions: {
series: {
lineWidth: 2,
connectNulls: true // connects also null value (bypassing)
}
}
});
var filterOn = true;
$('#button').click(function () {
filterOn = !filterOn;
if (filterOn)
chart.series[0].setData(data1.map(filter));
else
chart.series[0].setData(data1);
});
// filter function with your criteria
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
.highcharts-grid-line {
stroke-width: 2;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Toggle filter (ignoring a point in red serie)</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
I added chart.resize() inside of addData and removeData function, but it is always increasing height and it is never decreasing!
I am updating the chart when the user click on item of the menu. Some items have more than 100 datas e some others items have only 2 data and when have few data, the chart is always increasing height:
horizontalBar
Why is this happening?
<canvas id="chart"></canvas>
var chartData = {
labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
datasets: [
{
data: [<?php echo implode(',', $chart_numbers ) ?>],
backgroundColor: '#184b8f',
hoverBackgroundColor: '#ef3e42'
}
]
};
var barOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
legend: {
display: false
},
scales : {
xAxes : [{
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
color: '#cfcfcf'
}
} ],
yAxes : [ {
gridLines : {
display: false
},
ticks: {
fontSize: 13,
fontFamily: "'Open Sans'",
fontWeight: 600,
}
}]
},
animation: {
duration: 500,
easing: "easeOutQuart",
}
};
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.resize();
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.resize();
chart.update();
}
var ctx = document.getElementById("chart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: barOptions
});
I had the same thing. You have to put an empty div around the canvas.
I've found some users had the same issue in this post: https://github.com/jtblin/angular-chart.js/issues/84
The solution for me was to change the chart's options to maintainAspectRatio: false.
myChart.setOptions({
responsive: true,
maintainAspectRatio: false
});
In laravel livewire i fixed adding wire:ignore to wrapper div
<div wire:ignore>
<div class="chart-container" style="height: 80vh; width: 80vh;">
<canvas id="bar-chart" height="800" width="1500"></canvas>
</div>
</div>
I was having the same issue in a Bulma tile.
The fix was to set
responsive: false in the Chart.js script options area.