Search Posts

Category: chart.js

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

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