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>"
Related
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.
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
}
}]
}
}
});
})
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
}
}
I am using this example jsfiddle on But When I use a small screen labels start to overlap like this
What I can do to prevent it ? I want to make it fully responsive. I tried to change length and other aspect ratios etc but no sucess.
var ctx = $('#myChart');
ctx.height(500);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
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
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
This can be prevented by changing the y-axis label's font size on-the-fly (dynamically). Though, in ChartJS there is no built-in method to do so, meaning no matter how you resize the chart, the font size will always be the same.
However, to get around this, you can use the following chart plugin, which will make the font size responsive ...
plugins: [{
beforeDraw: function(c) {
var chartHeight = c.chart.height;
c.scales['y-axis-0'].options.ticks.fontSize = chartHeight * 6 / 100;
}
}]
add this plugin followed by your chart options.
Here is a working example on jsFiddle
You could add some CSS to stop the chart getting too small, forcing some users on mobile to scroll right:
https://jsfiddle.net/panchroma/yybc26Lr/1/
The only change I made was add
.chart{
min-width:300px;
}
I'm trying to implement a Line chart in my react app. I found this when searching for charts.
https://github.com/reactjs/react-chartjs
I have used this piece of code but it isn't clear how to use chartData and chartOptions
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
How can i declare the chartData and chartOptions inorder to get my Linechart work?
You need to define chartData and chartOptions as objects in your React Component. A sample chartData will look like
For a line Chart
var chartOptions: {
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - Whether to show a dot for each point
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
var chartData = {
labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: false,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
data: [[5, 8], [3, 11]]
}
]
}
For a barChart
var chartData = {
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
}]
},
var chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
See the docs here for more information on the object properties: