Use AngularJS $scope var in on-page script - javascript

I'm implementing Chart.js into my AngularJS app, and I'm loading the chart data from server API into $scope.chartData that is an array of numbers.
I need to access this variable from Chart.js, and using the script example on their website, I'm not sure how to access the variable. Trying something like:
home.html:
<!-- A bunch of HTML, then -->
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Balance',
data: {{chartData}}, //this is where I need to access the variable
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>
What would be the best way (not a work around) to accomplish loading this data into the chart script?

You should use the library angular-chart.js inorder to use with angularjs.
You can assign the data part to the options config.
DEMO
angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
$scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
$scope.chartOptionsPercent = {
title: {
display: true,
text: "Downtime Percentage of Equipment",
fontSize: 20
},
legend: {
text: "Hello"
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
min: 0,
max: 100
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Name of Equipment'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Percentage of Downtime (%)'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
$scope.dataPercent = [5, 6, 7, 12];
});
<!DOCTYPE html>
<html>
<head>
<title>radar Chart</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ChartCtrl" style="width:360px">
<canvas class="chart chart-bar" chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent" ></canvas>
</div>
</body>
</html>

Related

Not able to change chart.js x and y font colors

I tried changing the xticks color of chart js but somehow this is not working. This is the cdn I am using.
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
function plot(x, y, chartTitle, labelText) {
$("#canvasCard").html(
'<canvas id="myChart" width="600px" height="600px"></canvas>'
);
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: x,
datasets: [
{
label: labelText,
data: y,
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: 2,
},
],
},
options: {
responsive: false,
plugins:{
title: {
display: true,
text: chartTitle
}},
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
},
},
});
}
Doesn't have any effect
I googled the problem and many of them have listed the same thing as it is in the scales object. Still it isn't working. Any help appreciated
Thank you in advance.
I found the answer! In v3.4.1 or v3 and above chart js has different description.
Trying this worked. So this works
scales: {
y: {
beginAtZero: true,
ticks:{
color: "white"
}
},
x:{
ticks:{
color: "white"
}
}
}
Instead of the following code. The following works in previous versions.
scales: {
y: {
beginAtZero: true,
},
xAxes: [{
ticks: {
fontColor: 'green'
}
}]
}
Thank You.

I am using chart.js I sent my time values throw my api as timestamp know i need to show them in the chart as date format

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ labels}},//labels are the time values
datasets: [{
label: '# temperature',
data: {{ datas}},
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 need to define your xAxis as a time cartesian axis with a unit that matches your data. The default display format of 'hour' is 'hA' (for instance '2PM'). You should probably also use the same format for displaying tooltips.
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
Please note that Chart.js 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.
Please have a look at belo runnable code snippet.
const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '# temperature',
data: datas,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
tooltipFormat: 'hA'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>

ChartJS Only Show Large Font Size for a Specific Tick

I am attempting to emphasize a specific value on the X-Axis if it meets a specific condition.
For example, in my codepen I want to only change the font size of the 'blue' bar. Is this even possible with Chart.js?
var ctx = document.getElementById("myChart").getContext('2d');
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
}
}],
xAxes: [{
ticks: {
//only show large font size for 'Blue'
fontSize: 16
}
}]
}
}
});
Chartjs doesn't have a public api to do this but you can modify internal _ticks on beforeDraw and make the label "Blue" as major: true then that label will be drawn using the major styling in tick configuration options.
Also use this with caution since it relies on internal implementation and thus might break in future releases (very unlikely to happen but just saying).
var ctx = document.getElementById("myChart").getContext('2d');
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
}
}],
xAxes: [{
ticks: {
fontSize: 16,
major: {
fontSize: 20
}
}
}]
}
},
plugins: [{
beforeDraw: function({ chart }, options) {
chart.boxes
.find(box => box.id === "x-axis-0")
._ticks
.find(tick => tick.label === "Blue")
.major = true;
}
}]
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
PS: Just in case someone is wondering how I know this internal implementation I searched fillText in chartjs github source code and console.log(myChart) xD
Looks like it's not possible according to their docs. You can only do something like uppercase needed label with callback function
xAxes: [{
ticks: {
fontSize: 16,
callback: v => v === 'Blue' ? v.toUpperCase() : v
}
}]
For chartjs 3.0 and higher, it can be done by using scriptable-options. Include it like this into your options for ticks:
options: {
scales: {
x: {
ticks: {
font: {
size: (c) => {
if (c.index==1){
return 20 // at tick label with idx one set fontsize 20
}
else {
return 12 // for all other tick labels set fontsize 12
}
},
},
},
},
},
},

Chart.js with dual axis incorrect starting points (if negative values)

I have a chart.js chart in my app. This is how it looks without negative values:
With negative values:
As you can see I have dual axisY. They work as needed if there are no negative values. But if there are some, right AxisY starts in the incorrect position.
How to make it starts in the same place as left AxisY?
Here is my code:
private buildOptions(): any {
return {
responsive: true,
title: {
display: false,
text: ''
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff'
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff'
}]
},
legend: {
display: true,
labels: {
fontColor: '#fff'
}
}
};
}
Thank you.
Have you tried setting the same min value for both axes?
You can use ticks for specifying it:
ticks: {
min: -5
}
Here's an example snippet I made for you:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, -5, 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: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff',
ticks: {
min: -5
}
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff',
ticks: {
min: -5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>

ChartJS beginAtZero, min, max doesn't work

I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
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
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.

Categories