angular-d3-graph
Component for rendering a line graph or bar graph.
Last updated 2 years ago by laneolson .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install angular-d3-graph 
SYNC missed versions from official npm registry.

Angular D3 Graph

Component for rendering a line graph or bar graph.

Usage

npm install angular-d3-graph

Import it into app.module.ts (or whichever module you want to use)

import { GraphModule } from 'angular-d3-graph/module';

@NgModule({
  ...
  imports: [
    ...
    GraphModule
    ...
  ],
  ...
})

Add it into your component template:

  <app-graph 
    [data]="data" 
    [settings]="settings"
    [x1]="start"
    [x2]="end"
    (activeValuesChanged)="logEvent($event)"
  ></app-graph>

Inputs

Data

Data can be formatted in two ways, one for line graphs and one for bar graphs.

Line Graph:

[{
    "id": string // each line has an ID so updates apply correctly
    "data": [
        ...
        { "x": number, "y": number } // array of data objects with X and Y values
        ...
    ]
}]

Bar Graph:

[{
    "id": string // each line has an ID so updates apply correctly
    "data": [{ "x": string, "y": number }] // data array has only one value for bar graphs
}]

Settings

You can provide your own settings object overrides to the settings input on the component.

Default settings are as follows:

{
    props: { 
        x: 'x', // the name of the X property in the data objects
        y: 'y' // the name of the Y property in the data objects
    },
    margin: { left: 40, right: 10, top: 10, bottom: 40 }, // margins around the graph space
    axis: {
        x: {
            position: 'bottom', // controls if the x axis appears on the top or bottom of the graph
            label: 'x', // the label for the x axis
            ticks: 5,  // number of ticks on the x axis
            tickSize: 5, // how long the ticks are for the x axis
            tickFormat: ',.0f', // formating for the tick labels
            invert: false // reverse the x axis
        },
        y: { 
            position: 'left', // controls if the y axis appears on the left or right of the graph
            label: 'y', // the label for the y axis
            ticks: 5, // number of ticks on the y axis
            tickSize: 5, // how long the ticks are for the y axis 
            tickFormat: ',.0f', // formating for the Y tick labels
            invert: false // reverse the Y axis
        }
    },
    transition: { 
        ease: easePoly, // ease function to use for transitions
        duration: 1000 // amount of time in milliseconds for transitions between data
    },
    zoom: { 
        enabled: false, // enables scroll / pinch to zoom x axis
        min: 1, // minimum allowed zoom level
        max: 10 // maximum allowed zoom level
    }
};

x1 and x2

The x1 and x2 inputs are used for adjusting the view of the line graph to show from x1 to x2.

Outputs

activeValuesChanged

$event contains an array of all of the lines, or the selected bar and their x / y values based on the mouse position on hover, the touch location, or the positon navigated to by keyboard.

Current Tags

  • 2.0.23                                ...           add-ci (a month ago)
  • 2.0.25                                ...           feature/bar-ci-pattern (20 days ago)
  • 2.0.16                                ...           latest (2 years ago)

38 Versions

  • 2.0.25                                ...           20 days ago
  • 2.0.24                                ...           20 days ago
  • 2.0.23                                ...           a month ago
  • 2.0.22                                ...           a month ago
  • 2.0.21                                ...           a month ago
  • 2.0.20                                ...           a month ago
  • 2.0.18                                ...           a month ago
  • 2.0.17                                ...           a month ago
  • 2.0.16                                ...           2 years ago
  • 2.0.15                                ...           2 years ago
  • 2.0.14                                ...           2 years ago
  • 2.0.13                                ...           2 years ago
  • 2.0.12                                ...           2 years ago
  • 2.0.11                                ...           2 years ago
  • 2.0.10                                ...           2 years ago
  • 2.0.9                                ...           2 years ago
  • 2.0.8                                ...           2 years ago
  • 2.0.7                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 0.1.93                                ...           2 years ago
  • 0.1.92                                ...           2 years ago
  • 0.1.91                                ...           2 years ago
  • 0.1.9                                ...           2 years ago
  • 0.1.8                                ...           2 years ago
  • 0.1.7                                ...           2 years ago
  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 38
Last Day 0
Last Week 38
Last Month 143
Dependencies (27)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |