this is what the code looks like right now
With an 1st image preview currently using Chart.js.
Please give me some insights on how my data chart not to begin in Y axis.
ACTUAL RESULT of the Code below.
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [<?php echo trim($labels);?>],
datasets: [{
label: 'Weekly Revenue',
data: [ 0, 100, 3000, 4000, 5000, 6000, 7000, 8000,9000,10000,],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 3
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value.toLocaleString("en-PH",{style:"currency", currency:"PHP"});
}
}
}]
}
}
});
<div class="chart-container" style="min-width: 210px; height: 400px; margin: 0 auto">
<canvas id="myChart"></canvas>
</div>
Aiming: Data does not begin in Y-axis.
The easiest way to produce a margin between the Y axis and your first point is to add an empty string spacer in labels and a null value in data:
{
type: 'line',
data: {
labels: ['', '2020-12-27','2020-12-28','2020-12-29','2020-12-31','2020-12-31','2020-01-01','2020-01-02','2020-01-03','2020-01-04','2020-01-05'],
datasets: [{
label: 'Weekly Revenue',
data: [ null, 0, 100, 3000, 4000, 5000, 6000, 7000, 8000,9000,10000,],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 3
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value.toLocaleString("en-PH",{style:"currency", currency:"PHP"});
}
}
}]
}
}
}
Related
I am asking you because I created a chart with chart.js and I would like to assign it a delay before it appears, after reading the docs and different forums I get the following code which unfortunately does not work. Thanking you in advance for your help!
var cts = document.getElementById('myDonutChart').getContext('2d');
var myDonutChart = new Chart(cts, {
type: 'doughnut',
data: {
labels:[
//requete sql
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: '# of Votes',
data: [
//requete sql
12,
19,
3,
5,
2,
3
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: { display: false },
responsive: false,
maintainAspectRatio: false,
animation: {
delay: 4000
}
}
});
Reading the doc gives me the result with the delay function or alone it doesn't work and the only solution I found was to add a setimout but I still wanted to find the solution to the delay problem
I want to create a shortcode for chart.js, when I add this code without function in a page then it works fine, however, When I add this code in fuction.php it breaks the site. I already have tried my methods.
function chartJS_shortcode(){
?><canvas id="myChart" width="400" height="400"></canvas><?php
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
}
add_shortcode("chartJS", "chartJS_shortcode");
Always use return with shortcodes, try following it will work
<?php function chartJS_shortcode(){
ob_start();
?><canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
<?php
return ob_get_clean();
}
add_shortcode("chartJS", "chartJS_shortcode"); ?>
I am trying to make a chart by grouping the items by month and year. I was successful with just showing the item on the chart not name item. what I want is I want to retrieve data name item from my table.
This is my database and table structure:
id (int)
item (varchar)
mydate (date)
1
New
2020-12-14
2
Sold
2020-11-16
3
New
2020-10-13
4
Cancel
2020-09-15
5
Accepted
2019-07-16
6
Cancel
2019-11-21
7
Sold
2019-08-29
8
Delivery
2020-12-22
9
Delivery
2018-11-14
10
New
2018-06-12
Here is just my short code chart.php:
<script name="bymonth">
var ctx = document.getElementById("myChart_month");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php while ($row_month = mysqli_fetch_assoc($result_month)) { echo '"'.$row_month['mydate'].'"';?>,<?php }?>],
datasets: [{
label: "item",
data: [<?php while ($row_cmonth = mysqli_fetch_assoc($result_cmonth)) { echo '"'.$row_cmonth['mydate'].'"';?>,<?php }?>],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
<script name="byyear">
var ctx = document.getElementById("myChart_year");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php while ($row_year = mysqli_fetch_assoc($result_year)) { echo '"year '.$row_year['mydate'].'"';?>,<?php }?>],
datasets: [{
label: "item",
data: [<?php while ($row_cyear = mysqli_fetch_assoc($result_count)) { echo '"'.$row_cyear['mydate'].'"';?>,<?php }?>],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
Sorry, it's too long. for the full source file here:
https://www.mediafire.com/file/ah10eelxiweh2mn/chart.rar/file
On chart.php I only show item: (count) by month / year
How can i display the item name data of each date like.
December 2020
item:
New: 1
Delivery: 1
November 2020
item:
Sold: 1
Your SQL query very poor and unreadable. If you are using too much if/else you are wrong way. Just use native functions.
PDO example;
$host = 'localhost';
$username = 'root';
$password = '';
$db_name = 'market_db';
$conn = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
$conn->exec("set names utf8");
$conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
// trim for sql query, 01 -> 1
$_POST['month1'] = ltrim($_POST['month1'] ?: '1', '0');
$_POST['month2'] = ltrim($_POST['month2'] ?: '12', '0');
// By month
// only between months
if(isset($_POST['year1']) && $_POST['year1'] == null){
$query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count
FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 GROUP BY MONTH(mydate)");
$query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
$query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
$query->execute();
$result_months = $query->fetchAll();
}
// between months with selected year
else {
$query = $conn->prepare("SELECT *, MONTHNAME(mydate) AS month_name, YEAR(mydate) AS year, COUNT(*) AS item_count
FROM mytable WHERE MONTH(mydate) BETWEEN :month1 AND :month2 AND YEAR(mydate) = :year1 GROUP BY MONTH(mydate)");
$query->bindParam(':month1', $_POST['month1'], PDO::PARAM_INT);
$query->bindParam(':month2', $_POST['month2'], PDO::PARAM_INT);
$query->bindParam(':year1', $_POST['year1'], PDO::PARAM_INT);
$query->execute();
$result_months = $query->fetchAll();
}
Then print as json array.
const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];
Use array map or filter.
labels: byMonthData.map(function (item) {
return [
[`${item.month_name} ${item.year}`],
[`Item: ${item.item}`]
]
}),
Complete example
const byMonthData = [<?php foreach($result_months as $item) echo json_encode($item).','?>];
var ctx = document.getElementById("myChart_month");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: byMonthData.map(function (item) {
return [
[`${item.month_name} ${item.year}`],
[`Item: ${item.item}`]
]
}),
datasets: [{
label: "item",
data: byMonthData.map(function (item) {
return item.item_count
}),
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
Result
I want to change bar graph to make it look like the image one, which has only header tip visible not the whole bar, the header has the detail like shown in the image and only the header visible as a line in graph
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2015-01", "2015-02", "2015-03"],
datasets: [{
label: '# of Tomatoes',
data: [12, 19, 13],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 80
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
body {
background-color: #a3d5d3;
}
<canvas id="myChart" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
If you just want to display a dash for each value, you better choose a scatter chart and define dataset.pointStyle as 'line'. For scatter charts, no labels are defined but the data must be passed as objects containing x and y properties. Your xAxes would then have to be defined as a time cartesian axis.
Note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
The following code illustrates how it can be done.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '# of Tomatoes',
data: [
{ x: "2015-01", y: 12 },
{ x: "2015-02", y: 19 },
{ x: "2015-03", y: 3 },
{ x: "2015-04", y: 5 },
{ x: "2015-05", y: 2 },
{ x: "2015-06", y: 3 },
{ x: "2015-07", y: 20 },
{ x: "2015-08", y: 3 },
{ x: "2015-09", y: 5 },
{ x: "2015-10", y: 6 },
{ x: "2015-11", y: 2 },
{ x: "2015-12", y: 1 }
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
pointStyle: 'line',
pointRadius: 10,
pointHoverRadius: 10
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'YYYY-MM'
},
tooltipFormat: 'YYYY-MM'
},
ticks: {
maxRotation: 90,
minRotation: 80
},
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
body {
background-color: #a3d5d3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="200"></canvas>
If I correctly understand your question, you need floating bars, which are officially available since Chart.js v2.9.0. The feature was merged into chartjs:master with pull request #6056. Individual bars can now be specified with the syntax [min, max].
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"],
datasets: [{
label: '# of Tomatoes',
data: [[11,12], [18,19], [2,3], [4,5], [1,2], [2,3], [19,20], [2,3], [4,5], [5,6], [1,2], [0,1]],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 80
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
body {
background-color: #a3d5d3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
Above is my data in a chart bar using javascript, I didn't have any idea how to format the money like: "11,372,626" in the labels.
This below is how to show the data in the chart bar.
$scope.listData = response.data.respone; //all of my Json Data
let myLabels = []; //For label
let myDataset = []; //for money label
for(let i = 0; i< $scope.listData.length; i++) { //looping the datas
myLabels.push($scope.listData[i].period);
myDataset.push($scope.listData[i].sales);
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: myLabels,
datasets: [{
label: 'Sales Store',
// data: [12, 19, 3, 5, 2, 3],
data: myDataset,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:false
}
}]
}
}
});
The data is coming from an API in json format, how to format the money data so it can be shown in the labels?
You can try this:
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
...
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return formatter.format(tooltipItem.yLabel);
},
},
},
},
example