angular-chart.js
Reactive, responsive, beautiful charts for AngularJS using Chart.js: <a href="http://jtblin.github.io/angular-chart.js">http://jtblin.github.io/angular-chart.js</a>
I am following the Chart.js example. But when I try to render thaat example, I get the following error:
Uncaught TypeError: Cannot read property 'draw' of undefined
Here is the example I am following. I've done everything accordingly and I have no idea why it would be causing this problem.
http://carlcraig.github.io/tc-angular-chartjs/doughnut/
Below is my implementation of the example.
My module
angular.module('main')
.controller('AboutController', ['$scope', function ($scope) {
$scope.data = [
{
value: 300,
color: '#F7464A',
highlight: '#FF5A5E',
label: 'Red'
},
{
value: 50,
color: '#46BFBD',
highlight: '#5AD3D1',
label: 'Green'
},
{
value: 100,
color: '#FDB45C',
highlight: '#FFC870',
label: 'Yellow'
}
];
// Chart.js Options
$scope.options = {
// Sets the chart to be responsive
responsive: true,
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: '#fff',
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: 'easeOutBounce',
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
};
}]);
And here is my html code
<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>
I should add that I am able to render the legend for the chart.
Source: (StackOverflow)
I'm creating a dashboard that uses angular chartjs to show a graph. A demo page can be seen at http://clients.friendlyduck.co.uk/sweetch/. I think you can access all js files etc... from viewing the source? Otherwise please let me know what other info you need in order to help answer my question.
I'm quite new to Angular and can't quite figure out how to achieve the following:
- Update the chart using data from the selected user
- Update the chart labels using the select boxes "weekly", "activity tracking on"
I want to try to avoid asking people to do this work for me, but I just can't figure out how to get the data from my userservice.js file to update the chart with the values I need! Same goes for the dropdowns etc... Which I'm sure will work in a similar way once I know what I'm doing?
Thanks!
Source: (StackOverflow)
I am using Angular-charts library for bar charts pie charts. Everything is working fine, however bar chart and pie chart tool tip is displayed at the end of the page at the bottom.
I am also using linear charts and the tooltip is working fine for it. I tried to debug the issue and found that while mouse hover on bar chart and pie chart the below given paragraph tag is been added to the page:
< p class='ac-tooltip' style>48< / p>
However while mouse hover on linear chart, the below given paragraph tag is been added:
< p class='ac-tooltip' style='left:150px;top:100px;'>48< /a>
I also found the style tag values such as left/top etc are getting calculated correctly and appended to the p tag, however style tag values are removed immediately.
Your help is highly appreciated.
Source: (StackOverflow)
I'm trying to render an angular-chart (based on chart.js) chart inside a bootstrap panel. Currently the chart does not swho at all when inside the panel but does show when placed outside the panel. When I view the source in the browser I see the height and width are set to zero.
chart does not display
<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse>
<div class="panel panel-default" ng-repeat="experiment in experiments">
<div class="panel-collapse" role="tabpanel" bs-collapse-target>
<div class="panel-body">
<canvas id="pie" class="chart chart-pie" data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas>
</div>
</div>
</div>
</div>
chart DOES display
<div class="panel-group" ng-model="experiments.active" role="tablist" aria-multiselectable="true" bs-collapse>
<div class="panel panel-default" ng-repeat="experiment in experiments">
<div class="panel-collapse" role="tabpanel" bs-collapse-target>
<div class="panel-body">
</div>
</div>
</div>
</div>
<canvas id="pie" class="chart chart-pie" data="viewCountData" labels="viewCountLabels" options="viewCountOptions" style="height: 50px; width: 50px"></canvas>
Page Source:
Not sure where or why the height and width are getting set to zero. I also have tried setting the height and width in css but still have had no luck.
.chart {
height: 400px;
width: 600px;
}
#pie {
height: 400px;
width: 600px;
}
I have also tried adjusting the chart options
viewCountOptions = {
responsive: false,
maintainAspectRatio: false
};
Source: (StackOverflow)
I am trying to display data on a bar chart using angular-chart. I am trying retrieving the data from a database. I want to display all data on the chart for the last five (5) years including this year and also get the data to correspond with the years. So far I am only using 2 yrs, as shown below.
Json Array
Angularjs
app.controller('ChartCtrl', ['$scope', '$http', function ($scope, $http) {
var currentYear = new Date().getFullYear();
var allYrs = [];
// get data from database
$http.get('/dashboard/incident').success(function(incidents) {
$scope.incidentCnt = incidents;
console.log($scope.incidentCnt);
for (var i = 0; $scope.incidentCnt.length; i++) {
// Gets the current year and last 4 years (5 yrs total)
for(var year = currentYear; year >= currentYear-4; year--) {
allYrs.push(year);
$scope.labels = allYrs; // display years
$scope.series = [
'Aggravated Assault',
'Arson',
'Burglary',
'Forcible Sex Offense',
'Hate Crime',
'Motor Vehicle Theft',
'Murder or Non-Negligent Manslaughter',
'Negligent Manslaughter',
'Non-Forcible Sex Offense',
'Relationship/Dating Violence',
'Robbery',
'Stalking'
];
$scope.data = [
[
$scope.incidentCnt[i].assault,
$scope.incidentCnt[i].arson,
$scope.incidentCnt[i].burglary,
$scope.incidentCnt[i].fSexOffense,
$scope.incidentCnt[i].hateCrime,
$scope.incidentCnt[i].vehicleTheft,
$scope.incidentCnt[i].nonNegligentMaslaughter,
$scope.incidentCnt[i].negligentMaslaughter,
$scope.incidentCnt[i].nonForcibleSexOffense,
$scope.incidentCnt[i].rshipDatingViolence,
$scope.incidentCnt[i].robbery,
$scope.incidentCnt[i].stalking
]
];
}
};
});
}]);
Chart's current look
Any help would be much appreciated. Thank you...
Source: (StackOverflow)
I am using the Angular-chart.js package:
http://jtblin.github.io/angular-chart.js/
When I load the page, the legend at the bottom of the page shows, but the chart itself is not displayed.
I added divs to verify that the data is actually populated. Here is the code that I have so far:
<div>
<span>
vm.bvpsData -
</span>
{{vm.bvpsData | json}}
</div>
<div>
<span>
vm.bvpsLabels -
</span>{{vm.bvpsLabels | json}}
</div>
<div>
<span>
vm.bvpsSeries -
</span>{{vm.bvpsSeries | json}}
</div>
<canvas id="bvpsChart" class="chart chart-line" data-data="vm.bvpsData"
data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries">
</canvas>
When I run the page and look at the code, this is what is rendered in the html:
<div class="ng-binding"><span>vm.bvpsData -</span>[
[
"6.88",
"6.95",
"4.31",
"4.33",
"4.45",
"4.49",
"4.16",
"4.04",
"3.92",
"3.61",
"3.68",
"3.55",
"3.21",
"3.38",
"3.62",
"3.98",
"3.86",
"3.66",
"3.87",
"4.15",
"4.41",
"4.59",
"4.95",
"5.15",
"5.22",
"5.40",
"5.66",
"6.28",
"6.68",
"7.00",
"7.57",
"8.08",
"7.79",
"8.10",
"8.59",
"9.10",
"9.33",
"9.68",
"10.14",
"10.45",
"10.74",
"10.80",
"11.07",
"10.94"
]
]</div>
<div class="ng-binding"><span>vm.bvpsLabels -</span>[
"06/2004",
"09/2004",
"12/2004",
"03/2005",
"06/2005",
"09/2005",
"12/2005",
"03/2006",
"06/2006",
"09/2006",
"12/2006",
"03/2007",
"06/2007",
"09/2007",
"12/2007",
"03/2008",
"06/2008",
"09/2008",
"12/2008",
"03/2009",
"06/2009",
"09/2009",
"12/2009",
"03/2010",
"06/2010",
"09/2010",
"12/2010",
"03/2011",
"06/2011",
"09/2011",
"12/2011",
"03/2012",
"06/2012",
"09/2012",
"12/2012",
"03/2013",
"06/2013",
"09/2013",
"12/2013",
"03/2014",
"06/2014",
"09/2014",
"12/2014",
"03/2015"
]</div>
<div class="ng-binding"><span>vm.bvpsSeries -</span>[
"Book Value Per Share"
]</div>
<div class="chart-container">
<canvas id="bvpsChart" class="chart chart-line ng-isolate-scope" data-data="vm.bvpsData" data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries" width="929" height="0" style="width: 929px; height: 0px;"></canvas>
<chart-legend>
<ul class="line-legend">
<li><span style="background-color:rgba(151,187,205,1)"></span>Book Value Per Share</li>
</ul>
</chart-legend>
</div>
What am I doing wrong? Why is the chart not displaying?
Source: (StackOverflow)
I'm creating a chart with angular charts, and am having problems getting the chart how i need.
I would like the x axis to have the date and the mouse over to show the client name, which are all being fed from a loop on an array of resource object.
Here is the loop:
angular.forEach(charts, function(chart, key) {
var d = new Date(chart.appointment_date).toDateString();
$scope.labels.push(d);
$scope.total_earnings += chart.cost.dollars;
$scope.data[0].push(chart.cost.dollars);
if (!chart.refundObj[0]){
$scope.data[1].push(0);
} else {
$scope.data[1].push((chart.refundObj[0].amount/100));
}
});
And but this only sets the date property on the x axis, as well as in the mouse over. If i create an object using the following:
$scope.labels.push({date: d, name: clientName});
the result only says [Object, Object].
I'm using the following as the basis for the charts:
http://jtblin.github.io/angular-chart.js/#getting_started
Source: (StackOverflow)
When I tried to use the angular-chart framework I can see the series I've defined, but not the labels and data. I've included following three files to my index.html
<link rel="stylesheet" rel='nofollow' href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
These are the variables I define in my $scope
$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
[12, 13, 8, 4, 29],
[6, 12, 9, 8, 25]
];
And it only displays this:
What am I doing wrong?
EDIT: After further investigation I noticed that the graph is showing when I did a back -> forward when on the page. So by refreshing you lose the chart...
I can manage to draw the chart after refresh by deferring the scope variables like this:
setTimeout(function (){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}, 0);
This implies a timing issue, which I'm unable to resolve.
Source: (StackOverflow)
I'm trying to include an angular chart component.
, inside of a panel from bootstrap, i'm using a node template engine jade, this part of code is where i'm trying to put the chart:
.col-md-7
.row
.col-md-11
.panel.panel-default.content
angularchart(dataset="dataset" schema="schema" options="options")
But the chart is outside the panel, like the image.
Is there a way to fit into the panel?
Thanks.
Source: (StackOverflow)
I have a problem when making an ionic app about the chart cannot get response when page loads first time with "Item 1" and "New York" as initial selected option like my screenshot below: 
controller.js
.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout, $interval, $state, $filter, $location, DOLLTYPE, REGION) {
$http
.get('js/data2.json')
.then(function(region) {
var i = region.length -1;
for (i; i >= 0; i--) {
REGION.add(region[i]);
};
})
.catch(function(error){
console.log('Error fetching region data: ', error)
})
$http
.get('js/data.json')
.then(function(result) {
var i = result.length -1;
for (i; i >= 0; i--) {
DOLLTYPE.add(result[i]);
};
})
.catch(function(error){
console.log('Error fetching doll data: ', error)
})
$scope.title = "Dashboard";
$scope.dash = [];
$scope.datas = [];
$scope.avg = [];
$scope.avgy = [];
$scope.data = [[]];
$scope.labels = [[]];
$scope.date = [];
$scope.place = [];
$scope.ayv = [];
$scope.dolltype = [];
DOLLTYPE
.all()
.then(function(dolltype){
$scope.dolltype = dolltype;
$scope.dash2 = $scope.dolltype[0];
});
$scope.regiontype = [];
REGION
.all()
.then(function(regiontype){
$scope.regiontype = regiontype;
$scope.dash1 = $scope.regiontype[0];
})
$scope.change = function(dash1) {
$scope.place = dash1;
}
$scope.change2 = function(dash2) {
$scope.doll= dash2.id;
}
$scope.place.name = 'Please select';
$scope.$watchCollection('[place, doll]', function(newVal, oldVal) {
$scope.colours = [
{ // Blue
fillColor: 'rgba(148,159,177,0)',
strokeColor: 'rgba(47,64,200,1)',
pointColor: 'rgba(67,43,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)'
},
{ // Red
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(200,15,9,1)',
pointColor: 'rgba(190,50,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
},
{ // Green
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(18,177, 26,1)',
pointColor: 'rgba(80,200,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
}
];
$http.get('js/data4.json').success(function(result) {
var deferred = $q.defer();
$scope.dash.msg = result.message;
$scope.prices = result.data;
deferred.resolve($scope.prices);
angular.forEach($scope.prices,function(value,index){
var values = {
value : value.value,
date : new Date(value.created_at.replace(/-/g,"/"))
};
$scope.datas.push(values.value);
$scope.dash.price = $scope.datas[2];
$scope.date.push($filter('date')(values.date,'dd-MMM'));
$scope.date.splice(2);
return deferred.promise;
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get price value
$http.get('js/data5.json').success(function(result) {
$scope.averageprice = result.data;
angular.forEach($scope.averageprice,function(value,index){
var avgvalue = {
average: value.average,
date : new Date(value.created_at.replace(/-/g,"/"))
};
console.log (avgvalue);
$scope.avg.push(avgvalue.average);
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get average price value
var deferred = $q.defer();
$http.get('js/data3.json').success(function(result) {
$scope.averageyearprice = result.data;
deferred.resolve($scope.averageyearprice);
console.log ($scope.averageyearprice);
$scope.avgy.push($scope.averageyearprice.yearly_average);
return deferred.promise;
}).error(function(data, status) {
}); //End get average year price value
$scope.data[0] = $scope.datas;
$scope.data[1] = $scope.avg;
$scope.data[2] = $scope.avgy;
$scope.labels = $scope.date;
console.log ($scope.data[0]);
$scope.series = [$scope.place.name, 'All (Average)', 'All (YTD Year)'];
console.log ($scope.series); // Add information for the hover/touch effect
})
}])
HTML Template
<ion-view cache-view="false" view-title="{{title}}">
<ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar>
<ion-content class="has-header">
<div class="list">
<div class="row item">
<div class="col text-left assertive"> <select name='options' ng-model="dash2" ng-change="change2(dash2)" ng-options="DOLLtype as DOLLtype.name for DOLLtype in dolltype">
</select></div>
<div class="col text-right assertive"> <select name='options' ng-model="dash1" ng-change="change(dash1)" ng-options="REGIONtype as REGIONtype.name for REGIONtype in regiontype">
</select></div>
</div>
<div class="row item">
<div class="col">Current Price</div>
<div class="col text-right assertive">{{dash.price}} %</div>
</div>
</br>
<div class="row item" id="container">
<div class="col text-center">
<p>{{dash.msg}}</p>
<canvas id="line" class="chart chart-line" data="data" labels="labels" series='series' height="100" legend="true" colours="colours"></canvas>
</div>
</div>
</ion-content>
</ion-view>
I am using angular chart plugin for my app. Could anyone help me to solve this problem? Please check this link for full example code.
Source: (StackOverflow)
I am using angular-chart.js (http://jtblin.github.io/angular-chart.js/) module and trying to make the chart data editable with UI-Grid module (http://ui-grid.info/docs/#/tutorial/201_editable).
I am able to edit the data but not sure how I can make the chart updated responsively upon editing the cell.
I am fighting with this for sometime.I'd appreciate any thoughts on this.
Here's what I have got so far:
app.controller("myController", function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.gridOptions = {
columnDefs: [
{ name: 'A', width: '50%', enableCellEdit: true },
{ name: 'B', width: '50%', enableCellEdit: true }
],
data: [{
"A": 65,
"B": 28
},
{
"A": 59,
"B": 48
},
{
"A": 80,
"B": 40
},
{
"A": 81,
"B": 19
},
{
"A": 56,
"B": 86
},
{
"A": 55,
"B": 27
},
{
"A": 40,
"B": 90
}
]
};
var seriesA = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesA.push($scope.gridOptions.data[i].A);
}
console.log(seriesA);
var seriesB = [];
for (var i = 0; i < $scope.gridOptions.data.length; i++) {
seriesB.push($scope.gridOptions.data[i].B);
}
console.log(seriesB);
$scope.data = [
seriesA,
seriesB
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
Here's the HTML snippet:
<div id="grid1" class="panel" ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick"></canvas>
Source: (StackOverflow)
I want to changing D3 charts(http://chinmaymk.github.io/angular-charts/) dynamically using angular drag & drop(http://codef0rmer.github.io/angular-dragdrop/#/). This interaction causes some error.
This is my html code:
<!DOCTYPE html>
<html ng-app="chartApp">
<head>
<meta charset="utf-8" />
<title>Angular-charts</title>
<link rel="stylesheet" rel='nofollow' href="style.css" />
<link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel='nofollow' href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="d3@*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
<script src="angular-dragdrop.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>
</div>
<div
data-ac-chart="'bar'"
data-ac-data="data"
data-ac-config="config"
class="chart">
</div>
</body>
</html>
This is angular code:
var App=angular.module('chartApp', ['angularCharts', 'ngDragDrop']);
App.controller('MainCtrl', function($scope) {
$scope.chartname='bar';
$scope.list1 = {title: 'bar',title: 'bar1'};
$scope.list2 = {};
$scope.config = {
title: 'Products',
tooltips: true,
labels: false,
width: 400,
height: 400,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$scope.data = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
};
});
Source: (StackOverflow)
I have a nice application that displays a line chart based on several criteria. When the main criteria is changed I want to clear the current line chart. However, I cannot find out how to do this. I'm using AngulerJS v1.4.0-rc2, Chart.js v1.0.2 and angular-chart v0.7.1.
When loading the page I call the function updateSelection(). This function is also called when any of the other criteria changes. The function is implemented as:
$scope.updateSelection = function() {
$scope.chartLabels = maandData;
if ($scope.isPostcodeArea()) {
$scope.chartSeries = getPostcodeSeries();
$scope.chartData = getPostcodeData($scope.dataArea.index, $scope.dataMetric.index);
} else {
$scope.chartSeries = getSelectionSeries();
$scope.chartData = getSelectionData($scope.dataArea.index, $scope.dataMetric.index);
}
};
This will call the proper functions to initialize the data for the line chart based on the main criteria. Displaying the data entries in the web page shows the correct values.
In the select box for the main criteria I call the function updateArea():
$scope.updateArea = function() {
$scope.form.$setPristine();
if ($scope.isPostcodeArea()) {
$scope.postcodeSelection = null;
$scope.postcodeCompare1 = null;
$scope.postcodeCompare2 = null;
$scope.postcodeCompare3 = null;
} else {
$scope.selectionData = null;
$scope.selectionCompare1 = null;
$scope.selectionCompare2 = null;
$scope.selectionCompare3 = null;
}
$scope.selections = getSelections($scope.dataArea.index);
$scope.selectionLabel = $scope.areas[$scope.dataArea.index].label;
$scope.chartLabels = [];
$scope.chartSeries = [];
$scope.chartData = [];
};
This function will reset the input form and the form data. It will also determine the data for another criteria (selections), a label appropriate for the criteria (selectionLabel) and it should reset the chart data.
However, the chart is not updated to reflect the new data. So, is there a way to reset the data properly?
The chart itself is displayed using the following HTML:
<canvas id="line" class="chart chart-line"
data="chartData" labels="chartLabels" series="chartSeries"
legend="true" options="{'scaleBeginAtZero': true, 'datasetFill': false}">
</canvas>
Source: (StackOverflow)
i'm using chart.js wrapped within angular-charts.js to create a bar chart in an Ionic framework app.
I want to make the bar background totally opaque.
This the code i have to create the chart.
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}" colours="[ '#ffff00', '#0066ff']"></canvas>
Have any idea of how could i achieve that?
Thanks a lot!
Source: (StackOverflow)
In my application I am displaying graphs by using angular chart directives.
What I'd like to accomplish is to display a small version of the graphs in the main page and then, by pressing a button, display a bigger version of a specific graph inside of a popup window.
Graphs are populated at run time, once the small version of a graph is populated it would only be a matter of changing size and copy canvas code inside of the popup window, but I have no idea on how to accomplish that so I'm asking for help.
Here's my plunker "http://plnkr.co/edit/EajX7NqwHmu7oBVI4u8b"
Source: (StackOverflow)