i have a problem when i want to assign output into array string i already use str repace, etc but still not working..
i have output like this (in time)
$grapDate output = 09:00:0001:00:0012:00:0011:00:0010:00:0001:00:0000:00:0023:00:0022:00:00
date('H:i', strtotime($graph['Date'])
and the output become = 09:0001:0012:0011:0010:0001:0000:0023:0022:00
but i want to assign that become e.g $date = ['09:00','01:00', '12:00', etc]
because i want to use graph chart like this in my body
script type="text/javascript">
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart2 = new Chart(ctx, {
type: 'line',
data: {
labels: ['$label'], //Jamnya
datasets: [{
backgroundColor: 'rgba(232,72,163,0.2)',
borderColor: '#e848a3',
label: '29 May 2020',
data: [807,657,600,578,565,576,611,855,625,573,571,584,607,647,771,943,920,647,622,608,722,832,902,1062],
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Yesterday',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TOTAL ONLINE'
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '29 May 2020 '+data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
});
</script>
i still thinking how to assign parameter labels in class Chart become ['value', 'value', 'value']
First make each separate & print in JSON format.
$str = "09:0001:0012:0011:0010:0001:0000:0023:0022:00";
$date = json_encode(str_split($str, 5));
Related
I'm making a chart which is drawing data from a database array. I have 2 arrays:
const numPostPerCat= <?php echo json_encode($countCateT); ?>;
const catName= <?php echo json_encode($cateTforChart); ?>;
Which I use to feed the chart in the traditional way:
const data2= {
labels: catName,
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: numPostPerCat,
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}],
};
const config2={
type: 'bar',
data: data2,
options: {
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid:{
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Territorios',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
But how can I use database arrays when I want to use data structure? Should I use a different kind of a array? There's another configuration in JS? because this doesn't work:
const data2= {
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: [
{Terris: catName, cuantos: {cantidad: numPostPerCat}
},
],
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}]
};
const config2={
type: 'bar',
data: data2,
options: {
parsing:{
xAxisKey: 'Terris',
yAxisKey: 'cuantos.cantidad',
},
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid: {
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Años',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
i done create my chart but i dont know how to pass it, i already try use ?php but its not working.. and i already define in head like below, but when i try to pass it. the php file returning "''" like function tooltips title
<script src="includes/templates/chart.js"></script>
chart.js
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['08:00'] , //Jamnya
datasets: [{
backgroundColor: 'rgba(85, 212, 226, 0.2)',
borderColor: '#55d4e2',
label: '<?php echo $dtDateChart1; ?>' ,
data: [600],
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Today',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TOTAL ONLINE'
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '<?php echo $dtDateChart1; ?>' +data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
}
);
return myChart;
}
in my php file
$out .= ' <canvas id="myChart2" class="canpas chartjs-render-monitor" style="display: block; width: 454px; height: 300px;" width="454" height="300"></canvas>';
and this is my variable that i want to pass to my .js
//result chart1
#mssql_free_result($graph_query2);
$dtDateChart1 = $dateTittleChart1;
$convertChart1 = json_encode($datesChart1);
$totalChart1 = json_encode($nMaxChart1);
$labelChart1 = $convertChart1;
i dont know how to pass it when i already succes getelementbyid thanks you if you know something about it that i should know. i dont have a lot knowledge about javascript passing variable.
I believe that you cannot pass variables from php to javascript because they are different things and they are executed in different places.
your php code runs on your server and the javascript code in the client's browser so they are not seen.
what you can do is a php script that echos the content of the variable you want and through javascript and fetch or any library that makes requests to make a request to the php file
Try to make hidden input and put your php variable on its value then collect element value by js in your function
I almost do this and it is working well
First in your code php or html
Add input like
<input type='hidden' value='<?php echo $dtDateChart1; ?>' id='dtDateChart1' >
chart.js
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['08:00'] , //Jamnya
datasets: [{
backgroundColor: 'rgba(85, 212, 226, 0.2)',
borderColor: '#55d4e2',
label: document.getElementById("dtDateChart1").value,
data: [600],
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Today',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TOTAL ONLINE'
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '<?php echo $dtDateChart1; ?>' +data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
}
);
return myChart;
}
You should not have php code inside js files.
What you can do instead is:
Inside the php file pass the values you need to js variables.
Then, use the global js variables or pass them as parameters to js functions.
Alternatively, instead of including the separate charts.js file, have the contents of charts.js in the php file inside a <script> tag. This way you can have php and js sideways as you did.
i have a problem when i want to call js function, the chart is not show up, i dont know how to call js function because i need to show my chart
js function
<script type="text/javascript">
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart2 = new Chart(ctx, {
type: 'line',
data: {
labels: $labelChart2, //Jamnya
datasets: [{
backgroundColor: 'rgba(232,72,163,0.2)',
borderColor: '#e848a3',
label: $dtDateChart2,
data: $totalChart2,
fill: true,
pointRadius: 5,
pointHoverRadius: 10,
showLine: true
}]
}, options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Total Online Yesterday',
position: 'top',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle'
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'TIME'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
}
}]
},
tooltips:{
callbacks: {
title: function(tooltipItem, data) {
return '$dtDateChart2 '+data['labels'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
},
},
titleFontSize: 15,
bodyFontSize: 15,
displayColors: false
}
}
});
</script>
my php
<canvas id="myChart2" class="canpas chartjs-render-monitor" style="display: block; width: 454px; height: 300px;" width="454" height="300"></canvas>';
anyoone have ever meet with this problem ? when i put in global boddy. the function is call for global and always show value that i define null in other class except class for chart
The issue might be in the following line:
data: $totalChart2,
If $totalChart2 is a php variable, js will not be able to read it.
If your js function is in a php file, you will have to use the following at the least:
data: <?php echo $totalChart2 ?>,
Also make sure the echo command prints a valid js array or object.
I created a bubble chart using Chart.js, but the data label of each bubble will only be displayed when the mouse hovers over the bubble. How to show the data labels of all the bubbles by default (i.e., without hovering a mouse on top)?
new Chart(document.getElementById("stock-chart"), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [
{
label: ["Stock 3, Stock 4"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 0.1,
y: 5.245,
r: 15
}]
}
]
},
options: {
title: {
display: true,
text: 'Chart title',
fontSize: 28
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "Return",
fontSize: 25
},
ticks: {
fontSize: 20
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "Risk",
fontSize: 25
},
ticks: {
fontSize: 20
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label;
return label;
}
}
}
}
});
This can be achieved by using the chartjs-plugin-datalabels(https://github.com/chartjs/chartjs-plugin-datalabels). Specifically, remove the tooltips section in plugins and add the following section:
datalabels: {
anchor: function(context) {
return 'center';
},
align: function(context) {
return 'center';
},
font: {
weight: 'bold',
size: '15'
},
formatter: function(value) {
return value.label;
},
offset: 0,
padding: 0
}```
My chart.js
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages','HTTP Pages'],
datasets: [{
data: [ {{ $array_https_http[0] }}, {{ $array_https_http[1] }}],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize:100
}
}],
}
}
});
My tooltips code
Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length)
return false;
var em = elements[0]._model;
return {
x: em.x-((em.x-em.base)/2),
y: em.y+em.height/4
}
}
My output
My expected output
Is there anyone can help me how to put those value after the bar like the second picture. I just want to display the value to know even its zero. My custom tooltips was to show a different hover rather than default. All your help are appreciated and thank you in advance.
You can use the chartjs.datalabel plugin for achieving the need. I have created a fiddle for you -> http://jsfiddle.net/Labkrpf4/
Hope it helps!
var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
labels: ['HTTPS Pages', 'HTTP Pages'],
datasets: [{
data: [0, 430],
backgroundColor: [
'rgb(81, 170, 120)',
'rgb(198, 222, 208)'
]
}]
},
options: {
showAllTooltips: true,
tooltips: {
enabled: true,
displayColors: false,
yPadding: 20,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
bodyFontSize: 16,
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
position: 'custom',
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " : " + tooltipItem.xLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false
},
}],
xAxes: [{
ticks: {
stepSize: 100
}
}],
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: Math.round
}
}
}
});