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.
Related
I am recieving in the context of my canvas (in ANGULAR 9) the information using:
var ctx = this.Chart.nativeElement.getContext('2d');
I would like to get to the legend colors which is generated automatically for chart.js
My canvas code is:
<canvas
baseChart
#linechart
id="linechart"
name="linechart"
[datasets]="grafica.series"
[labels]="grafica.labels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins"
chart-dataset-override="dataSetOverride"
>
</canvas>
And options keeped in lineChartOptions:
{
responsive: true,
maintainAspectRatio: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 8,
autoSkip: true,
maxTicksLimit: 5, //5 //responsivemode
beginAtZero: true
},
gridLines: {
color: 'rgba(222,222,222,0,3)',
lineWidth: 1
},
scaleLabel: {
display: true,
labelString: ejeYLabel,
fontColor: 'rgba(255,255,255,1)',
fontSize: 9
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 9,
stepSize: 1,
beginAtZero: true,
},
gridLines: {
color: 'rgba(222,222,222,0.3)',
lineWidth: 1
}
}]
},
legend: {
display: false, //false, //responsivemode
labels: {
fontColor: 'white' //set your desired color
},
position: 'bottom',
align: 'start',
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: 'white',
formatter: function(value, context) {
return "";
}
}
}
}
Okey you can intercept the automated legend label creation call, and save the results somewhere before returning it, which gives you the colors.
change your labels block to this, and you can see in the console log how it looks:
legend: {
labels: {
fontColor: 'white', //set your desired color
generateLabels: (ctx) => {
var labels = Chart.defaults.global.legend.labels.generateLabels(ctx);
console.log('created labels', labels);
return labels;
}
}
},
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 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));
Chart.js Version: 2.7.1
I have in use since two years some pages which present a number of graphs, always with horizontal bars, but now I wish to select different formats, like bar and line.
When one of these options is selected I always get the same error: 'TypeError: e.slice is not a function'.
I thought that in the chart option is only required to change the tipe of graph, but possibly I'm missing something else.
This is the chart declaration:
var myBarChart = new Chart(ctx, {
type: 'horizontalbar',
data: {
labels: nameArray,
datasets: [{
label: 'Visite nel periodo alla pagina: ' + pag ,
data: valueArray,
backgroundColor:'rgba(255, 32, 0, 0.5)'
}]
},
options: chartOptions,
});
And this is the chartOptions (sorry, is quite long):
chartOptions = {
maintainAspectRatio:false,
aspectRatio:4,
fontStyle:"bold",
defaultFontStyle:"bold",
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
labels: {
show: true,
fontStyle:"bold"
},
}],
yAxes: {
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
scaleLabel: {
display: true,
labelString: "Acquisti",
fontColor: 'rgba(0, 80, 212, 0.5)',
fontSize:18,
fontStyle:"bold"
},
ticks: {
beginAtZero: true,
min:0,
fontSize:14,
fontStyle:"bold",
fontColor:"#03a"
},
labels: {
show:true,
fontStyle:"bold"
}
}
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
title: {
display: true,
fontColor: "#c40",
fontSize: 16,
text: chartTitle,
}
};
When I want to switch from a format to another I only programmatically change this line : type: 'bar' or type: 'line'.
Is there anything else I should change?
Thanks
I finally found the problem, even if the original cause is still unknown.
In the 'options' declaration there was an offending block, this one:
labels: {
show: true,
fontStyle:"bold"
},
I do not recall where this block is coming from, possibly some tests in the past; even leaving only the 'labels' declaration without any parameters, raises the error. Deleting the block makes the chart perfect.
I am new to Chart JS, I am currently using it in Angular JS version 1.5.3 and Chart JS I am using version 2.1.4 this is my code below
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Player Count',
data: count,
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {titleFontSize:29, bodyFontSize:29},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
I am seeing my chart displayed in Chrome, but in Firefox I am getting this error
Error: Chart is not defined
I am not sure what is the reason, any feedback will help thanks
This is because, ChartJS library is not being loaded by the time you are creating the chart.
You should rather initialize your chart on window onload event, like so ...
var app = angular.module('app', []);
app.controller("myCtrl", function($scope) {
$scope.load = function() {
var myChart = new Chart(canvas, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Player Count',
data: [1, 2, 3],
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {
titleFontSize: 29,
bodyFontSize: 29
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<canvas id="canvas" ng-init="load()"></canvas>
</div>
You have to provide the path to chart.js without / at the beginning.
<script src="libs/Chart.js/2.1.4/Chart.min.js"></script>