Search Posts

Category: chart.js

How to export chartjs data to Excel?

I am working on a project where I need to show data in table and in chart. for chart I am using chartjs. I am able to export table data with below code. function($http, $cookies, $window, $rootScope, $timeout, globalurlsetting) { var uri=’data:application/;base64,’, template='<html xmlns:o=”urn:schemas-microsoft-com:office:office” xmlns:x=”urn:schemas-microsoft-com:office:excel” xmlns=”″><head><!–[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]–></head><body><table>{table}</table></body></html>’, base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));}, format=function(s,c){return s.replace(/{(w+)}/g,function(m,p){return c[p];})}; return { tableToExcel:function(tableId,worksheetName){ var table=$(tableId), ctx={worksheet:worksheetName,table:table.html()}, href=uri+base64(format(template,ctx)); return href; } }; I have got stuck in exporting chart data to excel. […]

Display data labels on a pie chart in angular-chart.js

I have created a pie chart using angular-chart.js and it works perfectly fine. Now I need to display the data value on each section of the pie which does not work. I tried using Chart.PieceLabel.js and added the following piece of code in the option section. It didn’t work. I am not sure how to use it with angular-chart.js because it was originally written for chart.js pieceLabel: { render: ‘label’ } I have used the […]

How to get the angularjs scope variable data to the chartjs data

I am trying to pass the value from the scope variable of the angularjs controller to the chartjs data. this is my master.controller.js – The chartjs is inside the master.controller.js file: /** * Master Controller */ // Global variables for chart.js var totalTripsCompleted = ”; var TruckTripsFortheDay = []; var totalTrucks = []; var totalNumberofTripsCompleted = ”; var numberoftrucks = []; angular.module(‘App’) .controller(‘MasterCtrl’, [‘$scope’,’$http’,’StorageService’,’PagingUtil’,’$state’,’$rootScope’, function ($scope, $http, StorageService, PagingUtil, $state, $rootScope) { $scope.client = false; […]

Overiding all data set in angular chartjs not working

So I used angular-chart-js for my charts and i want to remove all of the border in my chart the problem is only the first one is affected the rest are not. chart <canvas id=”doughnut” class=”chart chart-doughnut” chart-data=”” chart-labels=”vm.labels” chart-colors=”vm.chart1Color” chart-dataset-override=”override”></canvas> controller $scope.override = { borderWidth: [0, 0] }; Any Suggestion is highly appreciated. Thank you. Source: AngularJS

Element occurrences AngularJs Chart.js

I am quite stuck here, I am fetching a json into a smart table and generating charts from that table, I want to have cross filtering so when a filter is applied the chart updates according to the data visible on the table. The chart should represents the status of order, The status can be : “Work in progress” “Pending” “Approved” … I tried to write different functions to count every element occurences but none […]

Angularjs line chart get data from sql

I have an angularjs line chart in my page. I am using chart.js as my chart. The data that I have at first is fake and I want to get the true data from the database. I have created a query that can get the date and the total number of members on that specific date. The query goes like this: SELECT distinct a.time, COUNT(b.member_id) AS Members FROM b Inner JOIN a ON b.mir_id = […]

How to customize tooltip on mouse hover of a polar area chart of Angular Charts

I have a polar area chart built with Angular Chart, as it follows: I need to customize what’s written in the tooltip mouse hover (Right now it shows [label: value], or [MBA010: 98.69], as in the image), or remove that option completely. I have tried applying the options as shown in this plunker, supplied by a similar question: // Controller $scope.chart_options = { tooltipTemplate: function(label) { return label.label + ‘:’ + label.value; } }; <!– […]

Chart.js hover on chart => div animation

I have a pie chart (via chart.js) with a custom legend. The chart is on the right of the screen and my legend is on the left side of the screen. I got a query from the client that when a user hovers over a slice, that specific part on the legend must ‘stand out’. So I am thinking maybe adding a css transition or whatever. The css part I can do, that is not […]

Next Page »