Has any one used dc.js with Angular2+ application. Any help or pointers will be appreciated.
I am able to make my application running on normal html/java-script. Now I need to implement the same in Angular 2+ application.
dc.js charts with Angular2+
Asked Answered
I don't know much Angular, but a few people I've talked to just leave their dc.js / d3 stuff in plain Javascript. (That's how I did it the one time I worked with Angular.) Frameworks like angular-dc are impressive but that's for Angular 1 and it doesn't seem like a perfect mapping. –
Crier
You can use library such as github.com/tomwanzek/d3-ng2-service an typings such as npmjs.com/package/@types/dc to import d3/dc in your Angular project and replicate the features in typescript. It takes some times to learn the types but is feasible –
Zoara
Edit: A couple of weeks later I have a much better understanding and can maybe give some better instructions, so here It goes:
After generating the angular project, install dc, its typefiles, and all needed dependencies like this:
npm i --save dc @types/dc crossfilter2 d3 @types/d3
Note that @types/crossfilter is not needed since crossfilter started to supply their own typefile directly inside their package. After that you can import dc, crossfilter, and d3 by importing them in the component and use them like this:
component.html:
<div #nameOfDiv></div>
component.ts
import * as d3 from 'd3';
import * as dc from 'dc';
import * as crossfilter from 'crossfilter2';
import {Dimension} from 'crossfilter2';
export class Graph {
@ViewChild('nameOfDiv') chartDiv: ElementRef;
private ndx: Dimension<T> = crossfilter<T>([{...}, {...}]);
[...]
paint() {
let chart = dc.scatterPlot(this.chartDiv.nativeElement);
chart.render();
}
}
In the end do not forget to include the dcjs css stylesheet, either in the index.html as written in the old answer or wherever you'd like.
Old answer: I'm currently at the same point, have some limited experience with dc.js, d3.js, and crossfilter2 in plain html and js. Now I want to use dcjs in Angular 5.
I just painted the first mock example in a component by installing the @types files for dc, d3, and crossfilter and including the actual libraries in the index.html header.
index.html
<head>
[...]
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.5/crossfilter.js" rel="script"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.css" />
</head>
ng installs
ng install --save @types/dc
ng install --save @types/d3
ng install --save @types/crossfilter
component.ts
import * as dc from 'dc';
import * as CrossFilter from 'crossfilter';
interface Data {
date: string;
quantity: number;
[...]
}
export class GraphComponent {
private chart: dc.PieChart;
private ndx: CrossFilter.CrossFilter<Data> = crossfilter<Data>([{ date: '2011-11-14T16:17:54Z', quantity: 2, total: 190, tip: 100, type: 'tab' }, {...}])
paintChart(): void {
this.chart = dc.pieChart('#id__html_div');
let dim = this.data.dimension((d) => d.date);
let group = dim.group().reduceCount();
this.chart.width(200).height(200).dimension(dim).group(group);
dc.renderAll();
}
}
Hope this helps a little. All of this is just what I did in the last few hours, this does not mean this is the intended way or the best way. I'm new to Angular and dcjs as well..
© 2022 - 2024 — McMap. All rights reserved.