How to make money format in chart js in javascript - javascript

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

Related

chart.js function delay not affect my graph

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

How i can use chart.js script in function.php as a short code, Please fixed the issue in my code

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"); ?>

Chart.js not to be begin in Y-Axis

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"});
}
}
}]
}
}
}

How to displays item names from the database using a monthly or yearly chart PHP MySQL

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

Chart.js how to set start and end values to plot

I am trying to implement chart.js in my angular app.(horizontal bar chart)
I would like to add the start and end point for the data to be plotted.
In my dataset whenever i pass a value the graph plots from 0 to the given value.
data: [2,6,5,8,7,3,2]
when this data gets plotted the graph shows from 0 to 2.
But i want to show it from 1 to 2.
Is there a way to pass the start value and end value to be shown in the graph.(not the label the data inside of dataset.)
my data:
var data = {
labels: [10,9,8,7,6,5,4,3,2,1,0],
datasets: [
{
label: "My First dataset",
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,
data: [2,6,5,8,7,3,2],
}
]
};
var options ={
barShowStroke: false,
scaleShowGridLines: true,
scaleOverride: true,
scaleStartValue: 1,
scaleStepWidth: 1,
responsive: true,
barBeginAtOrigin: true,
scales: {
xAxes: [{
time: {
unit: 'month'
},
ticks:{
min: 0,
max: 20,
stepSize: 1
}
}],
yAxes: [{
display:true}]
}
};
EDIT:
Here i want the y-axis 4 to start from 1 in the x-axis to 2 in the x-axis.
The y-axis 6 to start from 3 in the x-axis to 7 in the x-axis.

Yes possible, check the options provided for (scale) chart below :
var ctx = $("#graphTest").get(0).getContext("2d");
var options = {
barShowStroke: false,
scaleShowGridLines: true,
scaleOverride: true,
scaleStartValue: 1,
caleStepWidth: 1,
responsive: true,
barBeginAtOrigin: true
};
var data = {
labels: [10,9,8,7,6,5,4,3,2,1],
datasets: [
{
label: "My First dataset",
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,
data: [2,6,5,8,7,3,2],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>

Categories

Resources