score:0
you can use chart.js
with angular by injecting it.
if you want to change the type just set the type on the html
demo
angular.module("app", ["chart.js"])
.controller("barctrl", function($scope) {
$scope.commonestimationstats = {
rates: [{
"direction": {
"id": 13,
"month": "2016",
"type": 1
},
"points": 5
}, {
"direction": {
"id": 14,
"month": "2017",
"type": 1
},
"points": 3
}]
};
$scope.labels = [];
$scope.data = [];
angular.foreach($scope.commonestimationstats.rates, function(key, value) {
$scope.labels.push(key.direction.month);
$scope.data.push(key.points);
})
$scope.datasetoverride = [{
fill: true,
backgroundcolor: [
"#66ff33",
"#36a2eb",
"#ffce56"
]
}, {
fill: true,
backgroundcolor: [
"#ffff00",
"#46bfbd",
"#fdb45c"
]
}];
});
<!doctype html>
<html ng-app="app">
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.0/chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body>
<div ng-controller="barctrl">
<canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetoverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas>
</div>
</body>
</html>
Source: stackoverflow.com
Related Query
- data representation using charts
- Visualization of charts using real time data from MSSQL with node.js webserver
- Get data from SQLite as an array and generate charts with the data using Chart.js in an HTML
- How to run Chart.js samples using source code
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to add images as labels to Canvas Charts using chart.js
- using array values in chart.js data and label field
- How to zoom charts in chart.js using angular 7
- Chart.js - displaying multiple line charts using multiple labels
- Exporting chart.js charts to svg using canvas2svg.js
- Chart.js - Getting data from database using mysql and php
- Charts js only showing 2 data points on sparkline
- Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels
- Want to draw data using chartjs in django
- Why chart.js charts are not plotting data in Safari (works in Chrome)
- Switching between Charts with chart.js using Buttons
- Filter ChartJS using data from PHP
- Using data from API with Chart JS
- Display multiple chart.js charts using for loop in Django template
- Using JSON file data in Chart.js
- How to achieve the best possible performance with mutable data and real-time charts in React?
- how to show data label on barchart using chart.js in Angular10 project?
- Multipe doughnut charts on one page with text in center using Chart.js
- Using chart js version 3, how to add custom data to external tooltip?
- Missing Tooltip for some data points using chartjs
- Add data to line chart using chart.js
- How to use chartjs-plugin-datalabels for specific charts using vue-chart.js
- chart data on 24hr X axis using recharts, chart.js, I don't mind what
- Beginner using chart.js: having trouble display state full of data into a column chart using variables
- Using data from model in Chart.js MVC c#
More Query from same tag
- How to show 2 populations types in one bar using chartjs?
- Using Createjs and Chartjs
- chart.js draw custom grid lines
- how can I add a django array element into a js array using an if condition
- Chartjs different row background colors according to Y axis values
- Separating results in chartjs line chart
- Extending Line Chart with custom line
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Chart.js color is not getting changed
- How to display certain part of chart.js as dotted while rest as bold?
- Chart.js - Plot line graph with X , Y coordinates
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Show nested objects in Chart.js
- Two Y-axis not aligning correctly
- How to make labels clickable in angular-chart
- Displaying data from simple html form to display in chartjs
- Mapping issue on Chart Js Bar Chart
- How to create vertical arbitrary line in financial chart?
- Chart.js how to use scriptable options
- php/laravel: Creating chartdata, return 0 if no data is being submitted to database
- How to set responsive width and height of canvas?
- Change tooltips title at chart.js?
- Chartjs - Set start and end value into a Bar Chart
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- Chart.js Multiple charts with one common legend
- Styling problems with Chart.Js
- How to add custom tooltips to only one label in Chart.js?
- How to add a vertical line on the end of the chart.js scatter graph
- Chart.js chart won't animate inside of bootstrap carousel