Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

graphly

graphly is a library for helping plot 1D data as interactive graph with multitude of configuration options for rendering. Additionally it allows integrating 2D data which can be rendered in the background

Installation

Installation with Bower:

bower install --save eox-a/graphly

Installation with npm:

npm install graphly --save

Docs

http://eox-a.github.io/graphly/

Usage

Just include script to site and add a div element where you want to render the data. You can also use the filtermanager with it by providing another div where the filters panel should be managed. The d3 dependency is not included in the build, so you will also need to include it.

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="dist/graphly.min.js"></script>
</head>
<body>
    <div id="graph"></div>
    <div id="filters"></div>
</body>

and render using predefined settings:

var filterManager = new FilterManager({
    el:'#filters',
    filterSettings: {
        visibleFilters: ['parameter1', 'parameter2']
    },
});
var graph = new graphly.graphly({
    el: '#graph',
    renderSettings: {
        xAxis: 'parameter1',
        yAxis: ['parameter2', 'parameter3'],
        y2Axis: ['parameter4']
    },
    filterManager: filterManager
});

graph.loadData({
    parameter1: [1, 2, 3, 4],
    parameter2: [0.1, 0.2, 0.3, 0.4],
    parameter3: [0.4, 0.3, 0.2, 0.1],
    parameter4: [150, 100, 120, 130]
});

About

Library for creating interactive configurable graphs

Resources

License

Packages

No packages published