Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
By Sarah Gooding - Dec 03, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ng6-udm-chart
Advanced tools
ng6-udm-chart
[](LICENSE)
- 0.5.0
- latest
- npm
udm-chart Chart Library for Angular6 by TypeScript2
udm-chart is a chart library using d3.js (version 4) for Angular6 written by TypeScript2.
Test Project for This Library, https://github.com/Ohtsu/UdmChartTest/
Video Explanation (English), https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
Video Explanation (Japanese), https://www.udemy.com/angular5-l/
Overview
- udm-chart is a wrapper library of d3.js (version 4) for Angular6
- 12 main charts are supported
(Line,Bar,Pie,ScatterPlot,Histogram,Stack Bar, Geo Map, Geo Orthographic, Tree, Pack Layout, Choropleth,Force)
- Axis
You can include axis automatically by the configuration file.
- Legend
You can include legend automatically by the configuration file.
- Animation
You can animate such charts as Bar, Pie, Histogram, Stack Bar,Geo Orthographic and Pack Layout charts by the configuration file.
Prerequisite
- node.js
- Typescript2
- Angular6
Installation
To install this consumer project, run simply:
$ npm install
Start project
If you start local server as follows, you can get many kinds of charts in your browser.
$ ng serve -o
Version
- udm-chart-test : 0.5
- ng6-udm-chart : 0.5
- Angular6 : 6.0.0
- TypeScript : 2.7.2
- d3.js : 4.3.0
Reference
-
"Angular 5, Angular 6 Custom Library: Step-by-step guide", https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
-
"Discount Coupon Code (until 2018.7.12)", https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/?couponCode=CUSTLIB-EN-20180713
-
"Angular 5, Angular 6用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", https://www.udemy.com/angular5-l/
-
"ディスカウント・クーポン(2018.7.12まで)", https://www.udemy.com/angular5-l/?couponCode=NG5-CUSLIB-JA-0712
-
"データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方",2014/6/6,by 古籏 一浩, http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=ISBN978-4-7973-6886-4&rh=i%3Aaps%2Ck%3AISBN978-4-7973-6886-4
-
"D3.js by Example",2015/12/29,by Michael Heydt http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=ISBN978-1-78528-008-5&rh=i%3Aaps%2Ck%3AISBN978-1-78528-008-5
-
"Mastering D3.js",2014/8/25,by Pablo Navarro, http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=ISBN978-1-78328-627-0&rh=i%3Aaps%2Ck%3AISBN978-1-78328-627-0
-
"Data Visualization With D3 and Angularjs",2015/4/27,by Christoph Korner, http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=ISBN978-1-78439-848-4&rh=i%3Aaps%2Ck%3AISBN978-1-78439-848-4
-
"Mastering TypeScript",2015/4/23,by Nathan Rozentals, http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=ISBN978-1-78439-966-5&rh=i%3Aaps%2Ck%3AISBN978-1-78439-966-5
-
"D3 Tips and Tricks v4.x",by Malcolm Maclean,Leanpub, https://leanpub.com/d3-t-and-t-v4/read
Change Log
- 2018.6.20 version 0.3 uploaded
Copyright
copyright 2018 by Shuichi Ohtsu (DigiPub Japan)
License
MIT © Shuichi Ohtsu
Step by Step Intallation of udm-chart
Video Explanation (English), https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
Video Explanation (Japanese), https://www.udemy.com/angular5-l/
Install @angular/cli
$ npm install -g @angular/cli
Create New Project
$ ng new sample-chart (Your project name)
$ cd sample-chart
Check Your Program
If you start local server as follows, you can get the first page in your browser by accessing http://localhost:4200.
$ ng serve -o
- First Page
Stop Local Server
Input Ctrl+C and y+Return to stop the local server.
Install d3.js and ng6-udm-chart
$ npm install d3@4.3.0 --save
$ npm install ng6-udm-chart --save
Modify app.module.ts
$ cd src/app
Change directory to "src/app", you will find app.module.ts. Modify this file as follows.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Ng6UdmChartModule } from 'ng6-udm-chart'; // <= Add
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng6UdmChartModule // <= Add
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Modify app.component.ts
In the same directory, modify app.component.ts as follows.
import { Ng6UdmChartModule } from 'ng6-udm-chart';
import { Component } from '@angular/core';
import * as ChartConst from 'ng6-udm-chart';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
// Add Start --------------------------------------------
chartType:string;
configData:any;
barDataJson:any;
geoMapDataJson:any;
geoOrthographicDataJson:any;
choroplethDataJson:any;
scatterPlotDataJson:any;
lineDataJson:any;
histogramDataJson:any;
pieDataJson:any;
packLayoutDataJson:any;
treeMapDataJson:any;
stackBarDataJson:any;
treeDataJson:any;
forceDataJson:any;
DataSetJson:string;
lineTypeName:string;
barTypeName: string;
pieTypeName:string;
scatterPlotTypeName:string;
histogramTypeName:string;
stackBarTypeName:string;
geoMapTypeName:string;
geoOrthographicTypeName:string;
treeMapTypeName:string;
packLayoutTypeName:string;
choroplethTypeName:string;
treeTypeName:string;
forceTypeName:string;
constructor() {
this.barTypeName = ChartConst.LINE_CHART_TYPE_NAME;
this.lineTypeName = ChartConst.LINE_CHART_TYPE_NAME;
this.barTypeName = ChartConst.BAR_CHART_TYPE_NAME;
this.pieTypeName = ChartConst.PIE_CHART_TYPE_NAME;
this.scatterPlotTypeName = ChartConst.SCATTER_PLOT_CHART_TYPE_NAME;
this.histogramTypeName = ChartConst.HISTOGRAM_CHART_TYPE_NAME;
this.stackBarTypeName = ChartConst.STACK_BAR_CHART_TYPE_NAME;
this.geoMapTypeName = ChartConst.GEO_MAP_CHART_TYPE_NAME;
this.geoOrthographicTypeName= ChartConst.GEO_ORTHOGRAPHIC_CHART_TYPE_NAME;
this.treeMapTypeName = ChartConst.TREE_MAP_CHART_TYPE_NAME;
this.packLayoutTypeName = ChartConst.PACK_LAYOUT_CHART_TYPE_NAME;
this.choroplethTypeName = ChartConst.CHOROPLETH_CHART_TYPE_NAME;
this.treeTypeName = ChartConst.TREE_CHART_TYPE_NAME;
this.forceTypeName = ChartConst.FORCE_CHART_TYPE_NAME;
this.initilizeData();
}
private initilizeData() {
// ConfigData = this.httpClient.get('assets/json/ConfigData.json');
this.configData = {
// tslint:disable-next-line:quotemark
"className": {
'axis': 'axis',
'axisXBorder': 'axis_x',
'axisXText': 'axis-x-text',
'bar': 'bar',
'barValue': 'bar-value',
'line': 'line',
'multiLinePrefix': 'line-',
'grid': 'grid',
'pie': 'pie',
'pieInnerTitle': 'pie-inner-title',
'pieInnerRadius': 'total',
'histogram': 'histogram',
'histogramBar': 'histogram-bar',
'treemap': 'treemap',
'treemapLabel': 'treemap-label',
'packlayout': 'packlayout',
'packlayoutLabel': 'packlayout-label',
},
'label': {
'display': true,
},
'title': {
'display': true,
'name': 'Title',
'className': 'chart-title',
'height': 30,
'leftMargin': -20,
'bottomMargin': 10
},
'maxValue': {
'auto': true,
'x': 100,
'y': 100,
},
'legend': {
'display': true,
'position': 'right',
'totalWidth': 80,
'initXPos': 5,
'initYPos': 10,
'rectWidth': 10,
'rectHeight': 10,
'xSpacing': 2,
'ySpacing': 2
},
'color': {
'auto': true, //
'defaultColorNumber': 10,
'opacity': 1.0,
'userColors': [
'blue',
'red',
'green',
'yellow',
'PaleGoldenrod',
'Khaki',
'DarkKhaki',
'Gold',
'Cornsilk',
'BlanchedAlmond',
'Bisque',
'NavajoWhite',
'Wheat',
'BurlyWood',
'Tan',
'RosyBrown',
'SandyBrown',
'Goldenrod',
'DarkGoldenrod',
'Peru',
'Chocolate'
],
'focusColor': 'red',
},
'pie': {
'innerRadius': {
'percent': 20,
'title': 'Total'
},
'value': {
'display': true,
},
'percent':{
'display': false,
}
},
'line': {
'legend': 'lineEnd',
'interpolate' : 'linear',
},
'grid': {
'x': {
'display': true,
},
'y':{
'display': true,
},
},
'margin': {
'top': 30,
'left': 30,
'right': 10,
'bottom': 20,
'between': 5
},
'axis': {
'rotation': 0,
'borderLineWidth': 1,
'xLabel': {
'leftMargin': 0,
'bottomMargin': 5
},
'yLabel':{
'leftMargin': 0,
'bottomMargin': 0
},
},
'animation':{
'enable':true,
'duration':4000,
},
};
this.barDataJson =
{
'series':[
'English',
'Math'
],
'data':[
{
'x': 'suzuki',
'y': [92,73],
},
{
'x': 'inoue',
'y': [69,45],
},
{
'x': 'sato',
'y': [70,100],
},
{
'x': 'tanaka',
'y': [43,66],
},
{
'x': 'ida',
'y': [60,70],
},
{
'x': 'kato',
'y': [55,63],
},
],
};
this.lineDataJson = {
'series':[
'year',
'sell',
],
'data':[
{
'name': 'software',
'value':[
{
'x':'2010',
'y':18
},
{
'x':'2011',
'y':22
},
{
'x':'2012',
'y':30
},
{
'x':'2013',
'y':31
},
]
},
{
'name': 'hardware',
'value':[
{
'x':'2010',
'y':15
},
{
'x':'2011',
'y':16
},
{
'x':'2012',
'y':10
},
{
'x':'2013',
'y':21
},
]
},
{
'name': 'device',
'value':[
{
'x':'2010',
'y':25
},
{
'x':'2011',
'y':26
},
{
'x':'2012',
'y':30
},
{
'x':'2013',
'y':31
},
]
},
{
'name': 'others',
'value':[
{
'x':'2010',
'y':100
},
{
'x':'2011',
'y':16
},
{
'x':'2012',
'y':20
},
{
'x':'2013',
'y':41
},
]
},
],
};
this.geoOrthographicDataJson =
{
'map':{
'baseGeoDataUrl': 'https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson',
'keyDataName':'features',
'targetPropertyName':'properties.name',
'scale':160,
'colorNumber':10,
'rotate':{
'horizontal':210,
'vertical':5
},
'clipAngle':90,
'oceanColor':'navy',
'antarcticaColor':'white',
},
'data':[
{
'name':'Australia',
'color':'red'
},
{
'name':'Antarctica',
'color':'white'
},
{
'name':'Japan',
'color':'teal'
},
]
}
this.geoMapDataJson =
{
'map':{
'baseGeoDataUrl':'https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson',
'scale':75,
'keyDataName':'features',
'targetPropertyName':'properties.name',
},
'data':[
{
'name':'Australia',
'color':'red'
},
{
'name':'Antarctica',
'color':'white'
},
{
'name':'Japan',
'color':'blue'
},
],
};
this.stackBarDataJson =
{
'config':{
'timeFormat':'%Y',
},
'series':[
'year',
'sell',
],
'data':[
{
'name': 'software',
'value':[
{
'x':'2010',
'y':18
},
{
'x':'2011',
'y':22
},
{
'x':'2012',
'y':30
},
{
'x':'2013',
'y':31
},
]
},
{
'name': 'hardware',
'value':[
{
'x':'2010',
'y':15
},
{
'x':'2011',
'y':16
},
{
'x':'2012',
'y':10
},
{
'x':'2013',
'y':21
},
]
},
{
'name': 'device',
'value':[
{
'x':'2010',
'y':25
},
{
'x':'2011',
'y':26
},
{
'x':'2012',
'y':30
},
{
'x':'2013',
'y':31
},
]
},
{
'name': 'others',
'value':[
{
'x':'2010',
'y':5
},
{
'x':'2011',
'y':16
},
{
'x':'2012',
'y':20
},
{
'x':'2013',
'y':41
},
]
},
],
};
this.scatterPlotDataJson =
{
'series':[
'seriesA',
'seriesB',
'seriesC'
],
'data':[
{
'name': 'suzuki',
'value':[
{'x':30,'y':40,'r':5},
{'x':120,'y':115,'r':10},
{'x':125,'y':90,'r':2},
{'x':150,'y':160,'r':1},
{'x':150,'y':160,'r':3},
{'x':128,'y':215,'r':5},
{'x':130,'y':40,'r':15},
{'x':220,'y':115,'r':25},
]
},
{
'name': 'inoue',
'value':[
{'x':130,'y':140,'r':5},
{'x':20,'y':15,'r':10},
{'x':25,'y':190,'r':2},
{'x':250,'y':60,'r':1},
{'x':50,'y':60,'r':3},
{'x':28,'y':15,'r':5},
{'x':230,'y':140,'r':15},
{'x':20,'y':215,'r':25},
]
},
],
};
this.histogramDataJson =
{
'range':[0,100],
'bins': [0,10,20,30,40,50,60,70,80,90,100],
'data':[
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
],
};
this.packLayoutDataJson = {
'name':'United States', 'value' :281421906,
'children' : [
{'name':'California', 'value' :33871648},
{'name':'Texas', 'value' :20851820},
{'name':'New York', 'value' :18976457},
{'name':'Florida', 'value' :15982378},
{'name':'Illinois', 'value' :12419293},
{'name':'Pennsylvania', 'value' :12281054},
{'name':'Ohio', 'value' :11353140},
]
}
this.treeDataJson =
{
'name': 'Eve',
'children': [
{ 'name': 'Cain'
},
{
'name': 'Seth',
'children': [
{ 'name': 'Enos' },
{ 'name': 'Noam' }
]
},
{ 'name': 'Abel'
},
{
'name': 'Awan',
'children': [
{ 'name': 'Enoch' }
]
},
{ 'name': 'Azura'
},
]
};
this.treeMapDataJson = {
'name': 'Root',
'children': [
{ 'name': 'Dir1', 'children': [
{ 'name': 'Dir2', 'children': [
{ 'name': 'FileA', value: 5000 },
{ 'name': 'FileB', value: 3000 },
{ 'name': 'Dir3', 'children': [
{ 'name': 'FileC', value: 2000 },
{ 'name': 'Dir4', 'children': [
{ 'name': 'FileD', value: 1000 },
{ 'name': 'FileE', value: 1500 }
]
}
]
}
]
}
]
}
]
}
this.choroplethDataJson = {
'map':{
'baseGeoDataUrl':'https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/japan.geojson',
'scale':900,
'center':[137.571,37.500],
'startColor':'blue',
'endColor':'red',
'colorNumber':10,
'keyDataName':'features',
'targetPropertyName':'properties.id'
},
'data':
[
{
'id':1,
'value':7.12
},
{
'id':2,
'value':8.97
},
{
'id':3,
'value':7.07
},
{
'id':4,
'value':7.78
},
{
'id':5,
'value':6.97
},
{
'id':6,
'value':5.79
},
{
'id':7,
'value':7.14
},
{
'id':8,
'value':6.68
},
{
'id':9,
'value':6.28
},
{
'id':10,
'value':6.32
},
{
'id':11,
'value':6.29
},
{
'id':12,
'value':6.14
},
{
'id':13,
'value':5.87
},
{
'id':14,
'value':5.75
},
{
'id':15,
'value':5.50
},
{
'id':16,
'value':5.21
},
{
'id':17,
'value':5.37
},
{
'id':18,
'value':5.23
},
{
'id':19,
'value':6.18
},
{
'id':20,
'value':5.44
},
{
'id':21,
'value':5.57
},
{
'id':22,
'value':5.81
},
{
'id':23,
'value':5.09
},
{
'id':24,
'value':5.08
},
{
'id':25,
'value':5.07
},
{
'id':26,
'value':6.21
},
{
'id':27,
'value':7.97
},
{
'id':28,
'value':6.54
},
{
'id':29,
'value':7.41
},
{
'id':30,
'value':6.74
},
{
'id':31,
'value':5.90
},
{
'id':32,
'value':4.55
},
{
'id':33,
'value':7.24
},
{
'id':34,
'value':5.35
},
{
'id':35,
'value':5.93
},
{
'id':36,
'value':7.62
},
{
'id':37,
'value':6.25
},
{
'id':38,
'value':7.26
},
{
'id':39,
'value':7.70
},
{
'id':40,
'value':7.84
},
{
'id':41,
'value':6.32
},
{
'id':42,
'value':6.64
},
{
'id':43,
'value':6.67
},
{
'id':44,
'value':7.07
},
{
'id':45,
'value':7.01
},
{
'id':46,
'value':6.84
},
{
'id':47,
'value':11.0
}
]
};
this.pieDataJson =
{
'data':[
{
'name': 'software',
'value':30,
},
{
'name': 'hardware',
'value':25
},
{
'name': 'device',
'value':16
},
{
'name': 'others',
'value':4
},
],
};
this.forceDataJson =
{
'groups': [
{'id': 1, 'name': 'Hokkaido'},
{'id': 2, 'name': 'Tohoku'},
{'id': 3, 'name': 'Kanto'},
{'id': 4, 'name': 'Chubu'},
{'id': 5, 'name': 'kinki'},
{'id': 6, 'name': 'Chugoku'},
{'id': 7, 'name': 'Shikoku'},
{'id': 8, 'name': 'Kyushu'},
],
'nodes': [
{'id': 'Sapporo', 'group': 1},
{'id': 'Sendai', 'group': 2},
{'id': 'Morioka', 'group': 2},
{'id': 'Akita', 'group': 2},
{'id': 'Fukushima', 'group': 2},
{'id': 'Mito', 'group': 3},
{'id': 'Utsunomiya', 'group': 3},
{'id': 'Saitama', 'group': 3},
{'id': 'Chiba', 'group': 3},
{'id': 'Tokyo', 'group': 3},
{'id': 'Kofu', 'group': 4},
{'id': 'Nagano', 'group': 4},
{'id': 'Niigata', 'group': 4},
{'id': 'Toyama', 'group': 4},
{'id': 'Kanazawa', 'group': 4},
{'id': 'Fukui', 'group': 4},
{'id': 'Shizuoka', 'group': 4},
{'id': 'Nagoya', 'group': 4},
{'id': 'Gifu', 'group': 4},
{'id': 'Otsu', 'group': 5},
{'id': 'Kyoto', 'group': 5},
{'id': 'Osaka', 'group': 5},
{'id': 'Kobe', 'group': 5},
{'id': 'Nara', 'group': 5},
{'id': 'Kyoto', 'group': 5},
{'id': 'Tottori', 'group': 6},
{'id': 'Hiroshima', 'group': 6},
{'id': 'Matsue', 'group': 6},
{'id': 'Matsuyama', 'group': 7},
{'id': 'Tokushima', 'group': 7},
{'id': 'Kochi', 'group': 7},
{'id': 'Fukuoka', 'group': 8},
{'id': 'Nagasaki', 'group': 8},
{'id': 'Kumamoto', 'group': 8},
{'id': 'Naha', 'group': 8},
],
'links': [
{'source': 'Sendai', 'target': 'Sapporo', 'value': 1},
{'source': 'Morioka', 'target': 'Sapporo', 'value': 1},
{'source': 'Akita', 'target': 'Sapporo', 'value': 1},
{'source': 'Fukushima', 'target': 'Sapporo', 'value': 1},
{'source': 'Morioka', 'target': 'Sendai', 'value': 10},
{'source': 'Akita', 'target': 'Sendai', 'value': 10},
{'source': 'Fukushima', 'target': 'Sendai', 'value': 10},
{'source': 'Chiba', 'target': 'Tokyo', 'value': 20},
{'source': 'Utsunomiya', 'target': 'Tokyo', 'value': 20},
{'source': 'Mito', 'target': 'Tokyo', 'value': 20},
{'source': 'Saitama', 'target': 'Tokyo', 'value': 30},
{'source': 'Kofu', 'target': 'Tokyo', 'value': 30},
{'source': 'Nagano', 'target': 'Tokyo', 'value': 30},
{'source': 'Naha', 'target': 'Tokyo', 'value': 30},
{'source': 'Osaka', 'target': 'Tokyo', 'value': 40},
{'source': 'Sendai', 'target': 'Tokyo', 'value': 40},
{'source': 'Hiroshima', 'target': 'Tokyo', 'value': 20},
{'source': 'Shizuoka', 'target': 'Nagoya', 'value': 10},
{'source': 'Tokyo', 'target': 'Nagoya', 'value': 40},
{'source': 'Osaka', 'target': 'Nagoya', 'value': 40},
{'source': 'Kyoto', 'target': 'Nagoya', 'value': 40},
{'source': 'Kyoto', 'target': 'Osaka', 'value': 30},
{'source': 'Hiroshima', 'target': 'Osaka', 'value': 20},
{'source': 'Toyama', 'target': 'Kanazawa', 'value': 10},
{'source': 'Fukui', 'target': 'Kanazawa', 'value': 10},
{'source': 'Niigata', 'target': 'Kanazawa', 'value': 10},
{'source': 'Tottori', 'target': 'Kobe', 'value': 10},
{'source': 'Tottori', 'target': 'Hiroshima', 'value': 10},
{'source': 'Matsue', 'target': 'Hiroshima', 'value': 10},
{'source': 'Matsuyama', 'target': 'Hiroshima', 'value': 10},
{'source': 'Tokushima', 'target': 'Kochi', 'value': 10},
{'source': 'Matsuyama', 'target': 'Kochi', 'value': 10},
{'source': 'Nagasaki', 'target': 'Fukuoka', 'value': 10},
{'source': 'Kumamoto', 'target': 'Fukuoka', 'value': 10},
{'source': 'Naha', 'target': 'Fukuoka', 'value': 10},
]
};
}
// Add End --------------------------------------------
}
Modify app.component.html
In the same directory, modify app.component.html as follows.
<div style="text-align:center">
<hr>
<h2>GeoOrthographic</h2>
<lib-Ng6UdmChart [chartType]="geoOrthographicTypeName" [configData]="configData" [graphData]="geoOrthographicDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Bar</h2>
<lib-Ng6UdmChart [chartType]="barTypeName" [configData]="configData" [graphData]="barDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Pie</h2>
<lib-Ng6UdmChart [chartType]="pieTypeName" [configData]="configData" [graphData]="pieDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>ScatterPlot</h2>
<lib-Ng6UdmChart [chartType]="scatterPlotTypeName" [configData]="configData" [graphData]="scatterPlotDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Histogram</h2>
<lib-Ng6UdmChart [chartType]="histogramTypeName" [configData]="configData" [graphData]="histogramDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>PackLayout</h2>
<lib-Ng6UdmChart [chartType]="packLayoutTypeName" [configData]="configData" [graphData]="packLayoutDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Tree</h2>
<lib-Ng6UdmChart [chartType]="treeTypeName" [configData]="configData" [graphData]="treeDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Line</h2>
<lib-Ng6UdmChart [chartType]="lineTypeName" [configData]="configData" [graphData]="lineDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>GeoMap</h2>
<lib-Ng6UdmChart [chartType]="geoMapTypeName" [configData]="configData" [graphData]="geoMapDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>StackBar</h2>
<lib-Ng6UdmChart [chartType]="stackBarTypeName" [configData]="configData" [graphData]="stackBarDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Choropleth</h2>
<lib-Ng6UdmChart [chartType]="choroplethTypeName" [configData]="configData" [graphData]="choroplethDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
<hr>
<h2>Force</h2>
<lib-Ng6UdmChart [chartType]="forceTypeName" [configData]="configData" [graphData]="forceDataJson" [svgWidth]="'600'" [svgHeight]="'400'"></lib-Ng6UdmChart>
</div>
Modify styles.css
Change to the parent directory, you will find styles.css. Modify the file as follows.
$ cd ..
.line {fill:none; stroke:black;stroke-width: 1.5;}
.line-0 {fill:none; stroke:#1f77b4;stroke-width: 1.5;stroke-dasharray:4,10;}
.line-1 {fill:none; stroke:#ff7f0e;stroke-width: 1.5;stroke-dasharray:2,5.10;}
.line-2 {fill:none; stroke:#2ca02c;stroke-width: 1.5;}
.line-3 {fill:none; stroke:#d62728;stroke-width: 1.5;}
.line-4 {fill:none; stroke:#9467bd;stroke-width: 1.5;}
.line-5 {fill:none; stroke:#8c564b;stroke-width: 1.5;}
.line-6 {fill:none; stroke:#e377c2;stroke-width: 1.5;}
.line-7 {fill:none; stroke:#7f7f7f;stroke-width: 1.5;}
.line-8 {fill:none; stroke:#bcbd22;stroke-width: 1.5;}
.line-9 {fill:none; stroke:b#17becf;stroke-width: 1.5;}
.bar { fill:#aaa; stroke:white;stroke-width: 1;}
.bar-value { fill:black;font-size: 8pt;}
.name { font-size: 10pt;text-anchor: middle}
path {fill:white;stroke:black;stroke-width:0.5;}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
}
.axis_x line {
fill: none;
stroke: black;
}
.chart-title { fill:red;font-size: 18pt;text-anchor: middle;}
.histogram-bar{fill:blue; stroke:white;stroke-width: 1;}
.axis-x-text{ fill:blue;font-size: 12pt;}
.treemap { stroke:black;fill:#777}
.treemap-label { font-size: 10pt;text-anchor: middle}
.packlayout{ stroke:black;}
.packlayout-label{ font-size: 10pt;text-anchor: middle}
.pie-inner-title {font-size:9pt;text-anchor:middle;}
.pieNum {font-size:10pt;text-anchor:middle;}
.grid {stroke:gray;stroke-dasharray: 4,2;shape-rendering:crispEdges}
.tree-node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.tree-node text {
font: 12px sans-serif;
}
.tree-node-internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.tree-node-link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.force-links line {
stroke: #999;
stroke-opacity: 0.6;
}
.force-nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
Restart local server
Restart the local server as follows.
$ ng serve -o
And you will get many charts in your browser.
- First Chart (GeoOrthographic)
Chart Data
There are two types of data:configData,graphData.
- configData
This is a common setting data of all charts. In this file, you can set info as follows.
-Class name defined by "html" file
-Title Name
-Legend (display or not, position, size)
-Color (Auto color number: 10 or 20, Opacity)
-Line (interpolate)
-Grid (display or not, position, size)
-Animation (enable or not, duration)
-Margin (top, left, right,bottom,between)
-Axis (left margin, bottom mergin)
- Sample configData
configData ={
"className":{
"axis":"axis",
"axisXBorder":"axis_x",
"axisXText":"axis-x-text",
"bar":"bar",
"barValue":"bar-value",
"line":"line",
"multiLinePrefix":"line-",
"grid":"grid",
"pie":"pie",
"pieInnerTitle": "pie-inner-title",
"pieInnerRadius":"total",
"histogram":"histogram",
"histogramBar":"histogram-bar",
"treemap":"treemap",
"treemapLabel":"treemap-label",
"packlayout":"packlayout",
"packlayoutLabel":"packlayout-label",
},
"label": {
"display":true,
},
"title": {
"display": true,
"name":"Title",
"className":"chart-title",
"height":30,
"leftMargin":-20,
"bottomMargin":10
},
"maxValue":{
"auto":true,
"x":100,
"y":100,
},
"legend": {
"display": true,
"position": "right",
"totalWidth":80,
"initXPos":5,
"initYPos":10,
"rectWidth":10,
"rectHeight":10,
"xSpacing":2,
"ySpacing":2
},
"color":{
"auto":true, //
"defaultColorNumber":10,
"opacity":1.0,
"userColors":[
"blue",
"red",
"green",
"yellow",
"PaleGoldenrod",
"Khaki",
"DarkKhaki",
"Gold",
"Cornsilk",
"BlanchedAlmond",
"Bisque",
"NavajoWhite",
"Wheat",
"BurlyWood",
"Tan",
"RosyBrown",
"SandyBrown",
"Goldenrod",
"DarkGoldenrod",
"Peru",
"Chocolate"
],
"focusColor":"red",
},
"pie":{
"innerRadius": {
"percent":20,
"title":"Total"
},
"value":{
"display":true,
},
"percent":{
"display":false,
}
},
"line": {
"legend":"lineEnd",
"interpolate" :"linear",
},
"grid":{
"x":{
"display":true,
},
"y":{
"display":true,
},
},
"margin":{
"top":30,
"left":30,
"right":10,
"bottom":20,
"between":5
},
"axis":{
"rotation":0,
"borderLineWidth":1,
"xLabel":{
"leftMargin":0,
"bottomMargin":5
},
"yLabel":{
"leftMargin":0,
"bottomMargin":0
},
},
"animation":{
"enable":true,
"duration":4000,
},
};
- graphData
Each chart needs its own data in Json format.
- Sample GraphData for Line
lineDataJson =
{
"series":[
"year",
"sell",
],
"data":[
{
"name": "software",
"value":[
{
"x":"2010",
"y":18
},
{
"x":"2011",
"y":22
},
{
"x":"2012",
"y":30
},
{
"x":"2013",
"y":31
},
]
},
{
"name": "hardware",
"value":[
{
"x":"2010",
"y":15
},
{
"x":"2011",
"y":16
},
{
"x":"2012",
"y":10
},
{
"x":"2013",
"y":21
},
]
},
{
"name": "device",
"value":[
{
"x":"2010",
"y":25
},
{
"x":"2011",
"y":26
},
{
"x":"2012",
"y":30
},
{
"x":"2013",
"y":31
},
]
},
{
"name": "others",
"value":[
{
"x":"2010",
"y":100
},
{
"x":"2011",
"y":16
},
{
"x":"2012",
"y":20
},
{
"x":"2013",
"y":41
},
]
},
],
};
- Sample for Line
- Sample GraphData for Bar
barDataJson =
{
"series":[
"English",
"Math"
],
"data":[
{
"x": "suzuki",
"y": [92,73],
},
{
"x": "inoue",
"y": [69,45],
},
{
"x": "sato",
"y": [70,100],
},
{
"x": "tanaka",
"y": [43,66],
},
{
"x": "ida",
"y": [60,70],
},
{
"x": "kato",
"y": [55,63],
},
],
};
- Sample for Bar
- Sample GraphData for Pie
pieDataJson =
{
"data":[
{
"name": "software",
"value":30,
},
{
"name": "hardware",
"value":25
},
{
"name": "device",
"value":16
},
{
"name": "others",
"value":4
},
],
};
- Sample for Pie
- Sample GraphData for ScatterPlot
scatterPlotDataJson =
{
"series":[
"seriesA",
"seriesB",
"seriesC"
],
"data":[
{
"name": "suzuki",
"value":[
{"x":30,"y":40,"r":5},
{"x":120,"y":115,"r":10},
{"x":125,"y":90,"r":2},
{"x":150,"y":160,"r":1},
{"x":150,"y":160,"r":3},
{"x":128,"y":215,"r":5},
{"x":130,"y":40,"r":15},
{"x":220,"y":115,"r":25},
]
},
{
"name": "inoue",
"value":[
{"x":130,"y":140,"r":5},
{"x":20,"y":15,"r":10},
{"x":25,"y":190,"r":2},
{"x":250,"y":60,"r":1},
{"x":50,"y":60,"r":3},
{"x":28,"y":15,"r":5},
{"x":230,"y":140,"r":15},
{"x":20,"y":215,"r":25},
]
},
],
};
- Sample for ScatterPlot
- Sample GraphData for Histogram
histogramDataJson =
{
"range":[0,100],
"bins": [0,10,20,30,40,50,60,70,80,90,100],
"data":[
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
50,95,60,44,60,50,35,20,10,8,
56,70,65,42,22,33,40,53,52,89,
90,55,50,55,65,72,45,35,15,45,
],
};
- Sample for Histogram
- Sample GraphData for StackBar
stackBarDataJson =
{
"config":{
"timeFormat":"%Y",
},
"series":[
"year",
"sell",
],
"data":[
{
"name": "software",
"value":[
{
"x":"2010",
"y":18
},
{
"x":"2011",
"y":22
},
{
"x":"2012",
"y":30
},
{
"x":"2013",
"y":31
},
]
},
{
"name": "hardware",
"value":[
{
"x":"2010",
"y":15
},
{
"x":"2011",
"y":16
},
{
"x":"2012",
"y":10
},
{
"x":"2013",
"y":21
},
]
},
{
"name": "device",
"value":[
{
"x":"2010",
"y":25
},
{
"x":"2011",
"y":26
},
{
"x":"2012",
"y":30
},
{
"x":"2013",
"y":31
},
]
},
{
"name": "others",
"value":[
{
"x":"2010",
"y":5
},
{
"x":"2011",
"y":16
},
{
"x":"2012",
"y":20
},
{
"x":"2013",
"y":41
},
]
},
],
};
- Sample for StackBar
- Sample GraphData for GeoMap
geoMapDataJson =
{
"map":{
"baseGeoDataUrl":"https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson",
"scale":75,
"keyDataName":"features",
"targetPropertyName":"properties.name",
},
"data":[
{
"name":"Australia",
"color":"red"
},
{
"name":"Antarctica",
"color":"white"
},
{
"name":"Japan",
"color":"blue"
},
],
};
- Sample for GeoMap
- Sample GraphData for GeoOrthographic
geoOrthographicDataJson =
{
"map":{
"baseGeoDataUrl":"https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/world.geojson",
"keyDataName":"features",
"targetPropertyName":"properties.name",
"scale":160,
"colorNumber":10,
"rotate":{
"horizontal":210,
"vertical":5
},
"clipAngle":90,
"oceanColor":"navy",
"antarcticaColor":"white",
},
"data":[
{
"name":"Australia",
"color":"red"
},
{
"name":"Antarctica",
"color":"white"
},
{
"name":"Japan",
"color":"teal"
},
]
}
- Sample for GeoOrthographic
- Sample GraphData for Tree
treeDataJson =
{
"name": "Eve",
"children": [
{ "name": "Cain"
},
{
"name": "Seth",
"children": [
{ "name": "Enos" },
{ "name": "Noam" }
]
},
{ "name": "Abel"
},
{
"name": "Awan",
"children": [
{ "name": "Enoch" }
]
},
{ "name": "Azura"
},
]
};
- Sample for Tree
- Sample GraphData for PackLayout
packLayoutDataJson = {
"name":"United States", "value" :281421906,
"children" : [
{"name":"California", "value" :33871648},
{"name":"Texas", "value" :20851820},
{"name":"New York", "value" :18976457},
{"name":"Florida", "value" :15982378},
{"name":"Illinois", "value" :12419293},
{"name":"Pennsylvania", "value" :12281054},
{"name":"Ohio", "value" :11353140},
]
}
- Sample for PackLayout
- Sample GraphData for Choropleth
choroplethDataJson = {
"map":{
"baseGeoDataUrl":"https://raw.githubusercontent.com/Ohtsu/data/master/o2-chart/japan.geojson",
"scale":900,
"center":[137.571,37.500],
"startColor":"blue",
"endColor":"red",
"colorNumber":10,
"keyDataName":"features",
"targetPropertyName":"properties.id"
},
"data":
[
{
"id":1,
"value":7.12
},
{
"id":2,
"value":8.97
},
{
"id":3,
"value":7.07
},
{
"id":4,
"value":7.78
},
{
"id":5,
"value":6.97
},
{
"id":6,
"value":5.79
},
{
"id":7,
"value":7.14
},
{
"id":8,
"value":6.68
},
{
"id":9,
"value":6.28
},
{
"id":10,
"value":6.32
},
{
"id":11,
"value":6.29
},
{
"id":12,
"value":6.14
},
{
"id":13,
"value":5.87
},
{
"id":14,
"value":5.75
},
{
"id":15,
"value":5.50
},
{
"id":16,
"value":5.21
},
{
"id":17,
"value":5.37
},
{
"id":18,
"value":5.23
},
{
"id":19,
"value":6.18
},
{
"id":20,
"value":5.44
},
{
"id":21,
"value":5.57
},
{
"id":22,
"value":5.81
},
{
"id":23,
"value":5.09
},
{
"id":24,
"value":5.08
},
{
"id":25,
"value":5.07
},
{
"id":26,
"value":6.21
},
{
"id":27,
"value":7.97
},
{
"id":28,
"value":6.54
},
{
"id":29,
"value":7.41
},
{
"id":30,
"value":6.74
},
{
"id":31,
"value":5.90
},
{
"id":32,
"value":4.55
},
{
"id":33,
"value":7.24
},
{
"id":34,
"value":5.35
},
{
"id":35,
"value":5.93
},
{
"id":36,
"value":7.62
},
{
"id":37,
"value":6.25
},
{
"id":38,
"value":7.26
},
{
"id":39,
"value":7.70
},
{
"id":40,
"value":7.84
},
{
"id":41,
"value":6.32
},
{
"id":42,
"value":6.64
},
{
"id":43,
"value":6.67
},
{
"id":44,
"value":7.07
},
{
"id":45,
"value":7.01
},
{
"id":46,
"value":6.84
},
{
"id":47,
"value":11.0
}
]
};
- Sample for Choropleth
- Sample GraphData for Force
forceDataJson =
{
"groups": [
{"id": 1, "name": "Hokkaido"},
{"id": 2, "name": "Tohoku"},
{"id": 3, "name": "Kanto"},
{"id": 4, "name": "Chubu"},
{"id": 5, "name": "kinki"},
{"id": 6, "name": "Chugoku"},
{"id": 7, "name": "Shikoku"},
{"id": 8, "name": "Kyushu"},
],
"nodes": [
{"id": "Sapporo", "group": 1},
{"id": "Sendai", "group": 2},
{"id": "Morioka", "group": 2},
{"id": "Akita", "group": 2},
{"id": "Fukushima", "group": 2},
{"id": "Mito", "group": 3},
{"id": "Utsunomiya", "group": 3},
{"id": "Saitama", "group": 3},
{"id": "Chiba", "group": 3},
{"id": "Tokyo", "group": 3},
{"id": "Kofu", "group": 4},
{"id": "Nagano", "group": 4},
{"id": "Niigata", "group": 4},
{"id": "Toyama", "group": 4},
{"id": "Kanazawa", "group": 4},
{"id": "Fukui", "group": 4},
{"id": "Shizuoka", "group": 4},
{"id": "Nagoya", "group": 4},
{"id": "Gifu", "group": 4},
{"id": "Otsu", "group": 5},
{"id": "Kyoto", "group": 5},
{"id": "Osaka", "group": 5},
{"id": "Kobe", "group": 5},
{"id": "Nara", "group": 5},
{"id": "Kyoto", "group": 5},
{"id": "Tottori", "group": 6},
{"id": "Hiroshima", "group": 6},
{"id": "Matsue", "group": 6},
{"id": "Matsuyama", "group": 7},
{"id": "Tokushima", "group": 7},
{"id": "Kochi", "group": 7},
{"id": "Fukuoka", "group": 8},
{"id": "Nagasaki", "group": 8},
{"id": "Kumamoto", "group": 8},
{"id": "Naha", "group": 8},
],
"links": [
{"source": "Sendai", "target": "Sapporo", "value": 1},
{"source": "Morioka", "target": "Sapporo", "value": 1},
{"source": "Akita", "target": "Sapporo", "value": 1},
{"source": "Fukushima", "target": "Sapporo", "value": 1},
{"source": "Morioka", "target": "Sendai", "value": 10},
{"source": "Akita", "target": "Sendai", "value": 10},
{"source": "Fukushima", "target": "Sendai", "value": 10},
{"source": "Chiba", "target": "Tokyo", "value": 20},
{"source": "Utsunomiya", "target": "Tokyo", "value": 20},
{"source": "Mito", "target": "Tokyo", "value": 20},
{"source": "Saitama", "target": "Tokyo", "value": 30},
{"source": "Kofu", "target": "Tokyo", "value": 30},
{"source": "Nagano", "target": "Tokyo", "value": 30},
{"source": "Naha", "target": "Tokyo", "value": 30},
{"source": "Osaka", "target": "Tokyo", "value": 40},
{"source": "Sendai", "target": "Tokyo", "value": 40},
{"source": "Hiroshima", "target": "Tokyo", "value": 20},
{"source": "Shizuoka", "target": "Nagoya", "value": 10},
{"source": "Tokyo", "target": "Nagoya", "value": 40},
{"source": "Osaka", "target": "Nagoya", "value": 40},
{"source": "Kyoto", "target": "Nagoya", "value": 40},
{"source": "Kyoto", "target": "Osaka", "value": 30},
{"source": "Hiroshima", "target": "Osaka", "value": 20},
{"source": "Toyama", "target": "Kanazawa", "value": 10},
{"source": "Fukui", "target": "Kanazawa", "value": 10},
{"source": "Niigata", "target": "Kanazawa", "value": 10},
{"source": "Tottori", "target": "Kobe", "value": 10},
{"source": "Tottori", "target": "Hiroshima", "value": 10},
{"source": "Matsue", "target": "Hiroshima", "value": 10},
{"source": "Matsuyama", "target": "Hiroshima", "value": 10},
{"source": "Tokushima", "target": "Kochi", "value": 10},
{"source": "Matsuyama", "target": "Kochi", "value": 10},
{"source": "Nagasaki", "target": "Fukuoka", "value": 10},
{"source": "Kumamoto", "target": "Fukuoka", "value": 10},
{"source": "Naha", "target": "Fukuoka", "value": 10},
]
};
- Sample for Force
FAQs
[](LICENSE)
We found that ng6-udm-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 24 Jun 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024