Display json format data in smarty chartjs - javascript

<script>
{literal}
var ctx = document.getElementById('myGlaciermassChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [{/literal}
{foreach from=$glaciermass item=year name=glaciermassloop}
{if $smarty.foreach.glaciermassloop.last}
"{$year.Year}"
{else}
"{$year.Year}",
{/if}
{/foreach}
{literal}],
datasets: [{
label: 'Mean Glacier mass Level',
data: [{/literal}
{foreach from=$glaciermass item=year name=glaciermassloop}
{if $smarty.foreach.glaciermassloop.last}
"{$year.Mean-cumulative-mass-balance}"
{else}
"{$year.Mean-cumulative-mass-balance}",
{/if}
{/foreach}
{literal}],
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: {
yAxes: [{
ticks: {
suggestedMax: 0,
suggestedMin:-30,
beginAtZero: true
}
}]
}
}
});
{/literal}
</script>
I am using Chart.js and the data from an API endpoint is not displaying the right Mean values on the screen. I have tried many different ways and I have even tried selecting an index, but it doesn't work.Currently the Mean values are showing only 0s on the chart for all the years instead of the actual values from the json - Here is the json itself. https://pkgstore.datahub.io/core/glacier-mass-balance/glaciers_json/data/6270342ca6134dadf8f94221be683bc6/glaciers_json.json.
<?php
$url ='https://pkgstore.datahub.io/core/glacier-mass-balance/glaciers_json/data/6270342ca6134dadf8f94221be683bc6/glaciers_json.json';
$response = file_get_contents($url);
$GlaciermassData= json_decode($response, true);
$smarty->assign('glaciermass', $GlaciermassData);
?>


Have you tried accessing each index by number?

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 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

Charts.js: Using an object to graph

I have an object that has a 10 keys (names of US states) and a value attached. I want to know how to make the key the label and the value the data in Chart.js but I can't seem to find anything on this.
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: KEYS IN OBJECT GOES HERE,
datasets: [{
label: '# of Votes',
data: VALUE OF KEYS GO HERE,
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
below is my object
var stateGraphOne = {
"Oklahoma": 229,
"Oregon": 107,
"Pennsylvania": 165,
"South Carolina": 15,
"South Dakota": 96,
"Tennessee": 460,
"Texas": 2682,
"Utah": 372,
"Vermont": 13,
"Virginia": 33
};
I'm going to have multiple graphs and I have multiple objects to do the same thing with. If this would be easier using d3.js I am open to using that too. Thanks in advance.

You can get the object keys and values like so:
labels: Object.keys(stateGraphOne),
datasets: [{
label: '# of Votes',
data: Object.values(stateGraphOne),
...
A quick search and... another answer

How to make money format in chart js in 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

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