Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample snippet demonstrating Chart.js in an AngularDart application
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2,
h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body,
input[text],
button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited,
a:link {
color: #607d8b;
}
nav a:hover {
color: #039be5;
background-color: #cfd8dc;
}
nav a.router-link-active {
color: #039be5;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #eee;
margin: 0.5em;
padding: 0.3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607d8b;
background-color: #ddd;
left: 0.1em;
}
.items li.selected:hover {
background-color: #bbd8dc;
color: white;
}
.items .text {
position: relative;
top: -3px;
}
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #eee;
margin: 0.5em;
padding: 0.3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607d8b;
background-color: #ddd;
left: 0.1em;
}
.items li.selected {
background-color: #cfd8dc;
color: white;
}
.items li.selected:hover {
background-color: #bbd8dc;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607d8b;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: 0.8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import 'dart:async';
import 'dart:html';
import 'dart:math';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:chart_example/chart_example.dart';
@Component(
selector: 'chart-display',
styleUrls: ['chart_display_component.css'],
directives: [
coreDirectives,
formDirectives,
NgZone,
],
templateUrl: 'chart_display_component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
)
class ChartDisplayComponent implements OnInit {
ChartDisplayComponent(this._ref, this._ngZone);
int numOfBars = 5;
@Input()
int y_clicked;
Timer timeoutId;
Chart chart;
final ChangeDetectorRef _ref;
final NgZone _ngZone;
@ViewChild('canvas')
CanvasElement canvas;
@override
Future<Null> ngOnInit() async {
chart = Chart(
canvas.getContext('2d'),
getChartConfig(),
);
}
ChartConfiguration getChartConfig() {
List<List<int>> dataSource = getRandomisedData(numOfBars);
return ChartConfiguration(
type: 'horizontalBar',
data: LinearChartData(
labels: dataSource.map((source) => source[0]).toList(),
datasets: [
ChartDataSets(
data: dataSource.map((source) => source[1]).toList(),
)
]),
options: ChartOptions(
legend: ChartLegendOptions(display: false),
title:
ChartTitleOptions(display: false, text: 'Random chart title'),
onClick: ([evt, bars]) => onChartClick([evt, bars])));
}
onChartClick([eventArgsList]) {
// If bar was clicked then do not proceed further
if (eventArgsList[1].length > 0) return;
var mouseY = getProperty(eventArgsList[0], 'y');
var scales = getProperty(chart, 'scales');
var yAxis = getProperty(scales, 'y-axis-0');
var getValueForPixel = getProperty(yAxis, 'getValueForPixel').bind(yAxis);
var clickY = getValueForPixel(mouseY);
_ngZone.runGuarded(() {
y_clicked = clickY - 1; // click event not defined by angular
_ref.markForCheck();
// Cancel any currently running timers
timeoutId?.cancel();
timeoutId = Timer(Duration(seconds: 2), resetYClicked);
});
}
resetYClicked() {
_ngZone.runGuarded(() {
y_clicked = null;
_ref.markForCheck();
});
}
rebuildChart() {
chart.config = getChartConfig();
chart.update();
}
getRandomisedData(int count) {
var rand = Random();
return List.generate(count, (int index) {
var nextInt = rand.nextInt(count);
return [index + 1, nextInt < 0.5 ? 0 : nextInt];
});
}
}
<div>
# of Bars to draw:
<input
type="number"
placeholder="# of bars"
[(ngModel)]="numOfBars"
(keydown.enter)="rebuildChart()"
/>
<button (click)="rebuildChart()">Rebuild Chart</button>
<span *ngIf="y_clicked != null">Y-axis click value = {{ y_clicked }}</span>
</div>
<hr />
<div>
<canvas #canvas></canvas>
</div>
@graphicbeacon

This comment has been minimized.

Copy link
Owner Author

graphicbeacon commented Mar 17, 2019

This uses the chartjs dart-to-js interop package along with AngularDart

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.