Search Posts

Category: charts

AngularJS Pie Chart not displaying

I have the following Index.html: <!DOCTYPE> <html> <head> <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js”></script> <script src=”chart-module.js”></script> </head> <body> <canvas id=”pie” class=”chart chart-pie” chart-data=”data” chart-labels=”labels” chart-options=”options”></canvas> </body> </html> And the following chart-module.js: angular.module(“app”, [“chart.js”]).controller(“PieCtrl”, function ($scope) { $scope.labels = [“Download Sales”, “In-Store Sales”, “Mail-Order Sales”]; $scope.data = [300, 500, 100]; }); When I run the Index.html on chrome, the pie chart is not displayed. I have tried and searched for solutions but none are working for […]

not showing the label information completely on the chart when there is no enough space show full text

I am working on angularjs google chart API timeline chart. Please find the demo https://plnkr.co/edit/Krrz1uCeNlvl849E1P1x?p=preview I am showing multiple rows information in a single row as shown in the demo. when there are multiple rows information shown in a single row as shown in the demo plunker above, it is not showing the label information on the chart When there is no enough place to show the label. The text “first row label” is not […]

Dynamic add charts based on a factory pattern

I want to add dynamically charts to a widget from a combobox. I have used the factory pattern to achieve this. This is the code for the backend: public interface ICharts { string chartType (); } public class ChartsFactory { public ICharts GraphType(ChartsType chartype) { switch (chartype) { case ChartsType.AREA: return new Area(); case ChartsType.BAR: return new Bar(); case ChartsType.HORIZONBAR: return new HorizonBar(); case ChartsType.HEATMAP: return new Heatmap(); case ChartsType.PIE: return new Pie(); default: throw […]

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 […]

What is a most efficient way to implement Gantt Chart in Angular js application?

I am working on a Hotel Management application in which I am using Angular Gantt chart to manage rates of rooms. My hotel has large number of rooms and each room has different rate plans, so to manage all that in Angular Gantt chart is not possible. (loading large amount of data in a chart at once hangs the system.) So, in order to manage that, I added lazy loading in it and loads only […]

Not able to bind Amchart piechart Legend outside the div and also help me for Custom legend as given in discription

I was working on Amcharts PIE chart, and i got problem in binding legend outside div and also i need custom Legend for Pie chart Here i Have updated code working of PIE chart CODE PEN and I am not able bind as per given style in the ID #PieDivID ” ,as soon as i remove this style, Legend will appear but not in a right place `#PieDivID { position: absolute; right:0px; top:25px; }` and […]

How to change Label color in Donut Morris Chart , (customised label colors)

I want to change Label Color in Morris Donut chart , For BusStop Label Color should be Red For Fence – Label Color should be Blue For Route – Label Color Should be Yellow or anything… Code Pen Example i tried by doing data: [ { label: ‘BusStop’, value:5, labelColor:”#EC407A”, }, { label: ‘Fence’, value: 6, labelColor:”#00897B”, }, { label: ‘Route’, value: 2, labelColor:”#C0CA33″, }], labelColor:”#9CC4E4″, //this is Constant for all label but i need […]

Dynamically set chart type with AngularJS and chart.js

I want to write an AngularJS component which uses a template and a controller to display a chart.js chart that has a dynamic type (bar, line, pie, …) I use angular-chart.js to combine angular and chart.js My template looks like this: <div class=”card”> <div class=”card-body”> <h4 class=”card-title”>{{$ctrl.name}}</h4> Type is set to: {{$ctrl.type ? $ctrl.type : ‘pie’}} <div id=”container” class=”container” style=”width:100%”> <div class=”panel-body”> <canvas id=”chart_test” class=”chart chart-{{$ctrl.type ? $ctrl.type : ‘pie’}}” chart-data=”data” chart-labels=”labels” chart-series=”series” chart-options=”options” chart-dataset-override=”datasetOverride”></canvas> […]

Google visualisation charts

I have a problem with position of my chart, I want to put chart a 100% width from begin to end. my code test.controller(‘testCtrl’, [‘$scope’, function ($scope) { console.log(‘test chart’); var data = google.visualization.arrayToDataTable([ [‘Minute’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’], [‘0 min’, 0.72, 0.64, 0.55, 0.47, 0.68, 0.39], [”, 0.62, 0.69, 0.65, 0.51, 0.66, 0.37], [’45 min’, 0.69, 0.51, 0.55, 0.43, 0.54, 0.44], [”, 0.79, 0.68, 0.70, 0.57, 0.59, 0.41], [’90 min’, 0.66, 0.71, […]