Giter Club home page Giter Club logo

angular-dygraphs's Introduction

angular-dygraphs

AngularJS directive for dygraphs. (http://dygraphs.com/).

This project aims to add to the excellent dygraphs library by adding extra features such as a more functional legend, and LESS styling. The styling is designed to align the colours with the bootstrap themes.

Example -:

<ng-dygraphs ng-if="graph.data.length"
  data="graph.data"
  options="graph.options"
  legend="graph.legend"
  >
</ng-dygraphs>

Installation

bower install angular-dygraphs --save

Then add angular-dygraphs as a module dependency.

Note that currently this uses a number of dependancies -: jquery, moment and angular-sanitize. They should automatically be installed through bower. Feel free to remove them if there's a better way to perform the various functions - for my project I already use them, but I'm happy to accept a PR for alternative solutions if they provide the functionality.

Legend

The directive adds an external legend (as shown in the directive above). Add the legend in a similar way to the dygraphs series -: legend[key = {label: "..."}

This sets the label which doesnt have to be the same as the dygraphs label. The dygraphs label needs to be unique or strange things happen. This option allows any label to be set independant of the axes references within dygraphs.

If the legend is set in this way, the directive will disable the internal dygraphs legend.

Popover

The directive also adds a popover that displays the same information as the dygraphs legend when it displays value data except it is displayed next to the mouse pointer.

angular-dygraphs's People

Contributors

cdjackson avatar cesarandreu avatar greggroth avatar xelhark avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.