how to show ng-repeat in angular - angularjs

I have JSON list data from API, it called by
$scope.link = globalVar.folderAPI+"/web/data.php";
$http.get($scope.link).then(function(response){
$scope.listDataitem = response.data.respone;
})
i want to show the data period to chart
this bellow I've wrote, but it still cannot appear, how to make the data display on chart, how can I parse the data to chart script part
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<div ng-repeat=" x in listDataitem "> {{ x.period }} </div>],
datasets: [{
data: [<div ng-repeat="y in listDataitem"> {{ y.sales}} </div>],
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
}
}]
}
}
});

You can try redraw your chart every time your API will be called.
$scope.link = globalVar.folderAPI+"/web/data.php";
$http.get($scope.link).then(function(response) {
$scope.listDataitem = response.data.respone;
let myLabels = [];
let myDataset = [];
for(let i = 0; i< $scope.listDitaitem); i++) {
myLabels.push($scope.listDitaitem[i].period);
myDataset.push($scope.listDitaitem[i].sales);
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: myLabels,
datasets: [{
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)'
],
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
}
}]
}
}
});
})

Related

How to change the Date Format in Chart.js?

I am confused about how to change my Date Format in Chart.js.
I grabbed my data from the MySQL database one of my columns is called "StartD"
[{"RECORD_NO":217,"Cost":4971,"StartD":"5/8/2022"},{"RECORD_NO":216,"Cost":1814,"StartD":"4/8/2022"},{"RECORD_NO":215,"Cost":3335,"StartD":"3/8/2022"},{"RECORD_NO":214,"Cost":1886,"StartD":"2/8/2022"},{"RECORD_NO":213,"Cost":1274,"StartD":"1/8/2022"},{"RECORD_NO":212,"Cost":2238,"StartD":"31/7/2022"},{"RECORD_NO":211,"Cost":1819,"StartD":"30/7/2022"},{"RECORD_NO":210,"Cost":1021,"StartD":"29/7/2022"},{"RECORD_NO":209,"Cost":2564,"StartD":"28/7/2022"},{"RECORD_NO":208,"Cost":4534,"StartD":"27/7/2022"},{"RECORD_NO":207,"Cost":4187,"StartD":"26/7/2022"},{"RECORD_NO":206,"Cost":2337,"StartD":"25/7/2022"},{"RECORD_NO":205,"Cost":4778,"StartD":"24/7/2022"},{"RECORD_NO":204,"Cost":3215,"StartD":"23/7/2022"},{"RECORD_NO":203,"Cost":4469,"StartD":"22/7/2022"},{"RECORD_NO":202,"Cost":1883,"StartD":"21/7/2022"},{"RECORD_NO":201,"Cost":1097,"StartD":"20/7/2022"},{"RECORD_NO":200,"Cost":2918,"StartD":"19/7/2022"},{"RECORD_NO":199,"Cost":4956,"StartD":"18/7/2022"},{"RECORD_NO":198,"Cost":1565,"StartD":"17/7/2022"},{"RECORD_NO":197,"Cost":4425,"StartD":"16/7/2022"},{"RECORD_NO":196,"Cost":2277,"StartD":"15/7/2022"},{"RECORD_NO":195,"Cost":3866,"StartD":"14/7/2022"},{"RECORD_NO":194,"Cost":1546,"StartD":"13/7/2022"},{"RECORD_NO":193,"Cost":563,"StartD":"12/7/2022"},{"RECORD_NO":192,"Cost":576,"StartD":"11/7/2022"},{"RECORD_NO":191,"Cost":731,"StartD":"10/7/2022"},{"RECORD_NO":190,"Cost":2850,"StartD":"9/7/2022"},{"RECORD_NO":189,"Cost":1154,"StartD":"8/7/2022"},{"RECORD_NO":188,"Cost":4447,"StartD":"7/7/2022"},{"RECORD_NO":187,"Cost":3476,"StartD":"6/7/2022"},{"RECORD_NO":186,"Cost":1047,"StartD":"5/7/2022"},{"RECORD_NO":185,"Cost":1049,"StartD":"4/7/2022"},{"RECORD_NO":184,"Cost":1566,"StartD":"3/7/2022"},{"RECORD_NO":183,"Cost":700,"StartD":"2/7/2022"},{"RECORD_NO":182,"Cost":4728,"StartD":"1/7/2022"},{"RECORD_NO":181,"Cost":4549,"StartD":"30/6/2022"},{"RECORD_NO":180,"Cost":1155,"StartD":"29/6/2022"},{"RECORD_NO":179,"Cost":2148,"StartD":"28/6/2022"},{"RECORD_NO":178,"Cost":4934,"StartD":"27/6/2022"},{"RECORD_NO":177,"Cost":4353,"StartD":"26/6/2022"},{"RECORD_NO":176,"Cost":2546,"StartD":"25/6/2022"},{"RECORD_NO":175,"Cost":1239,"StartD":"24/6/2022"},{"RECORD_NO":174,"Cost":1724,"StartD":"23/6/2022"},{"RECORD_NO":173,"Cost":769,"StartD":"22/6/2022"},{"RECORD_NO":172,"Cost":670,"StartD":"21/6/2022"},{"RECORD_NO":171,"Cost":4634,"StartD":"20/6/2022"},{"RECORD_NO":170,"Cost":2742,"StartD":"19/6/2022"},{"RECORD_NO":169,"Cost":4797,"StartD":"18/6/2022"},{"RECORD_NO":168,"Cost":3317,"StartD":"17/6/2022"}]
I put it into my BarChar.js file and it recognized the data.
import React, {
useState,
useEffect
} from 'react'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js'
import {
Bar
} from "react-chartjs-2"
// Radar, Doughnut, Polar, Pie
import axios from 'axios';
ChartJS.register(
CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
);
function BarChart() {
const [chartData, setChartData] = useState({
datasets: [],
});
const Chart = () => {
let Cost = [];
let No = [];
axios.get("http://localhost:3001/api/TranscationRecord/Cost")
.then(res => {
console.log(res);
for (const dataObj of res.data) {
Cost.push(parseInt(dataObj.Cost));
No.push(parseInt(dataObj.StartD));
}
setChartData({
labels: No,
datasets: [{
label: 'Daily Cost',
data: Cost,
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)',
'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)',
'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: {
x: {
type: 'time',
time: {
unit: 'date',
parser: 'dd/mm/yyyy'
}
},
y: {
beginAtZero: true
}
}
}
}]
});
})
.catch(err => {
console.log(err);
})
}
useEffect(() => {
Chart();
}, []);
return ( <
div className = "App" >
<
h1 > Bar Chart < /h1> <
div >
<
Bar data = {
chartData
}
/> < /
div > <
/div>
)
}
export default BarChart;
The result
It can only present the Day but not the format of "DD/MM"
Is that a way to solve the problem?
Try displayFormats:
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}
}
}
});
Chart.js Time Display Formats
Change your for loop like below
for (const dataObj of res.data) {
Cost.push(parseInt(dataObj.Cost));
const date = new Date(dataObj.StartD);
No.push(date->toLocaleDateString('en-us',{month:"2-digit", day:"2-digit"));
}
I just figure out the answer. Thanks for helping. I take #terinao's code for references.
Changing the code like this can solve the problem.
axios.get("http://localhost:3001/api/TranscationRecord/Cost")
.then(res => {
console.log(res);
for(const dataObj of res.data){
Cost.push(parseInt(dataObj.Cost));
const d = new Date(dataObj.StartD);
No.push(d.toLocaleDateString('en-us',{day:"2-digit",month:"2-digit" }));
}
The result be like:
(I change the colour into blue but they are the same datasets)
The bar chart
The x-axis of your bar chart is currently a category axis instead of a time axis. The reason is that options is misplaced, it should not be defined inside the dataset but follow the top level structure of the Chart.js configuration.
With react-chartjs-2, you would define options as a separate object and provide it as follows:
<Bar data={data} options={options} />
Once this is is corrected, the display format can be defined according to the Chart.js documentation here.
Please also consider that the time scale requires both, a date library and a corresponding adapter to be present.

Uncaught Error: "category" is not a registered scale

I am trying to implement React char but getting this error, I search and follow decumentation but couldn't find the solution.
import React from 'react';
import { Bar } from 'react-chartjs-2';
const BarChart = () => {
return (
<div>
<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
}]
}} />
</div>
);
};
export default BarChart;
Change your code to:
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const BarChart = () => { ... your code ... }
As described in https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc you need to register all the components you're going to use.
The above code just registers everything.
Check out the link for all available components you can register.

Chartjs on Reactjs - beginAtZero not working

I have been trying to make this bar chart start from 0, but it doesn't always work - the weird part is that sometimes it works - it begins from 0, but when I refresh the page it begins from some random number or sometimes even from the number on the lowest bar in the bar chart. I added the min:0 hoping this would fix it. I can't get a hold of the issue, what am I doing wrong?
const data = {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: chartData,
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
}]
}
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min:0
}
}]
}
}
const chartData = [shownTotal, shownNewTotal];
<Chart chartData={data} options={options} key={key} legendPosition="bottom"/>
EDIT: I forgot to add the options code the first time I posted this.

Calling a helper function and passing in data to chart.js

I created a helper function to work around my chart.js.
First, on my index.html file I put the ff:
<div id="app"></div>
<canvas id="myChart" width="400" height="400"></canvas>
Next, to call chart.js, I created a helper function with the necessary data/arguments on it:
export const chartUI = (labels, data) =>{
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'RATES',
data: data,
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
}
}]
}
}
});
};
Now on my component where I need to put my data on I called the function so it can manipulate and display the data:
import React from 'react';
const helper = require('../../../helpers/utils')
const Chart = (props) => {
return(
<div>
{props.info.map(item => {
return <p>{helper.chartUI(item.time, item.rates)}</p>
}) }
</div>
)
};
export default Chart;
When I run this code i did not see any chart on the frontend and also I got this error: Uncaught TypeError: this.ticks.map is not a function The above error occurred in the <Chart> component: TypeError: this.ticks.map is not a function
PS. Here's the the type data I am flowing from my app:
{
"rates": [
{
"time": "2018-04-13T15:45:19.5968204Z",
"asset_id_quote": "$$$",
"rate": 4000000
},
{
"time": "2018-04-13T15:45:41.7725202Z",
"asset_id_quote": "1ST",
"rate": 37714.501225721289835941919668
}
}

Why is chart.js not working with angular JS

I am trying to create a chart component in AngularJS (v1.5.8) but for some odd reason chart.js is not getting initialized. http://codepen.io/flyinggambit/pen/eBYezK
angular.module("dashboard", [])
.component("exceptionChart", {
template: "<canvas width='200' height='200' class='{{$ctrl.class}}'></canvas>",
bindings: {
class: '#'
},
controller: function($element) {
this.$postLink = function() {
// code for chart
var ctx = $element.find('canvas')[0];
var 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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<div ng-app="dashboard">
<exception-chart class=""></exception-chart>
</div>
<canvas id="myChart" width="200" height="200"></canvas>
However the code for the same works in vanilla JS. http://codepen.io/flyinggambit/pen/MbWOmG
What is the reason for this ? How can I fix this ?
You can't have the canvas as the root element and then try to access it in the way you're doing it.
Wrap it in another div to quickly solve your problem:
"<div><canvas width='200' height='200' class='{{$ctrl.class}}'></canvas></div>"

Resources