Hi I can draw a line chart with Chart.js adding some data set.
<div class="row">
<div class="col-md-9" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default" >
<select ng-model="selec">
<option value="aapl">AAPL(Apple)</option>
<option value="goog">GOOG(Google)</option>
<option value="amzn">AMZN(Amazon)</option>
</select>
<div class="panel-body">
<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
click="onClick()" series="series"></canvas>
</div>
</div>
</div>
<div class="col-md-3" id="txtfield" ng-controller="LineCtrl">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="dates" class="col-sm-7 control-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="dates" ng-model="selecDate"
placeholder=" " readonly>
</div>
and this is data set in Json file.
[
{
"date":"2011-06-29",
"numOfTweet":4,
"oldScore":5,
"newScore":4,
"percentage1":74.64788732,
"appleClosePrice":45.01,
"percentage2":-18.81363435
},
{
"date":"2011-06-30",
"numOfTweet":1,
"oldScore":2,
"newScore":1,
"percentage1":-55.2238806,
"appleClosePrice":45.23,
"percentage2":24.43901355
},
If I move the cursor on the graph it shows a tooltip involving the label(date) and point(data).
I wanna make that if I click the point of graph in the day the data will be shown in a textfields I already made (numOfTweet, scores, percentages and so on) as well. How can I show it manipulating controller.js or somewhere else?
my controller.js looks like
app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('stock/aapl.json').success(function(data) {
$scope.selec = 'aapl'; //default as age
$scope.series = ['Tweet Mood', 'Stock Market'];
$scope.stocks = data;
$scope.labels = [];
$scope.createLabels = function() {
for (var i = 0; i < $scope.stocks.length; i++) {
$scope.labels.push($scope.stocks[i].date);
}
};
$scope.createLabels();
$scope.data = [[], []];
$scope.createGraphArray = function() {
for (var i = 0; i < $scope.stocks.length; i++) {
$scope.data[0].push($scope.stocks[i].percentage1);
$scope.data[1].push($scope.stocks[i].percentage2);
}
};
$scope.createGraphArray();
$scope.clickPredic = function() {
$scope.buySell = 'clicked';
}; //button click test
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.onHover = function (points) {
if (points.length > 0) {
console.log('Point', points[0].value);
} else {
console.log('No point');
}
};
});
}]);
Chart.js is available in .js/blob/master/Chart.js Thanks in advance!
Hi I can draw a line chart with Chart.js adding some data set.
<div class="row">
<div class="col-md-9" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default" >
<select ng-model="selec">
<option value="aapl">AAPL(Apple)</option>
<option value="goog">GOOG(Google)</option>
<option value="amzn">AMZN(Amazon)</option>
</select>
<div class="panel-body">
<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
click="onClick()" series="series"></canvas>
</div>
</div>
</div>
<div class="col-md-3" id="txtfield" ng-controller="LineCtrl">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="dates" class="col-sm-7 control-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="dates" ng-model="selecDate"
placeholder=" " readonly>
</div>
and this is data set in Json file.
[
{
"date":"2011-06-29",
"numOfTweet":4,
"oldScore":5,
"newScore":4,
"percentage1":74.64788732,
"appleClosePrice":45.01,
"percentage2":-18.81363435
},
{
"date":"2011-06-30",
"numOfTweet":1,
"oldScore":2,
"newScore":1,
"percentage1":-55.2238806,
"appleClosePrice":45.23,
"percentage2":24.43901355
},
If I move the cursor on the graph it shows a tooltip involving the label(date) and point(data).
I wanna make that if I click the point of graph in the day the data will be shown in a textfields I already made (numOfTweet, scores, percentages and so on) as well. How can I show it manipulating controller.js or somewhere else?
my controller.js looks like
app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('stock/aapl.json').success(function(data) {
$scope.selec = 'aapl'; //default as age
$scope.series = ['Tweet Mood', 'Stock Market'];
$scope.stocks = data;
$scope.labels = [];
$scope.createLabels = function() {
for (var i = 0; i < $scope.stocks.length; i++) {
$scope.labels.push($scope.stocks[i].date);
}
};
$scope.createLabels();
$scope.data = [[], []];
$scope.createGraphArray = function() {
for (var i = 0; i < $scope.stocks.length; i++) {
$scope.data[0].push($scope.stocks[i].percentage1);
$scope.data[1].push($scope.stocks[i].percentage2);
}
};
$scope.createGraphArray();
$scope.clickPredic = function() {
$scope.buySell = 'clicked';
}; //button click test
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.onHover = function (points) {
if (points.length > 0) {
console.log('Point', points[0].value);
} else {
console.log('No point');
}
};
});
}]);
Chart.js is available in https://github./nnnick/Chart.js/blob/master/Chart.js Thanks in advance!
Share Improve this question edited Apr 24, 2015 at 1:54 floribon 19.2k5 gold badges55 silver badges68 bronze badges asked Apr 24, 2015 at 1:41 JamesJames 472 silver badges8 bronze badges1 Answer
Reset to default 3The click attribute on the canvas element is expecting a callback. In your code, you put the result of the function onClick as a callback (undefined), not the function itself. So basically, you can remove the paranthesis in your code :
<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true" click="onClick" series="series"></canvas>
Hope this helps,
Cheers