Awesome charts for AngularJS.

Overview

n3-line-chart v2 Build Status Coverage Status Join the chat at https://gitter.im/n3-charts/line-chart

n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of D3.js.

n3-charts lead image

Resource

Getting started

Please note: Currently, n3-line-chart works only with D3.js version 3! In D3.js version 4, the API changed and hence breaks compatibility with many 3rd party libaries such as n3-line-chart.

You can install n3-line-chart by using the npm package manager and running following command from the terminal.

npm install n3-charts

Alternatively you can download the latest release and place the line-chart.min.js wherever you want. Please note, that you need to also download D3.js and AngularJS when installing n3-line-chart manually!

Next, you need to reference LineChart.js and LineChart.css in your index.html file.

<script src="node_modules/n3-charts/build/LineChart.js"></script>
<link rel="stylesheet" href="node_modules/n3-charts/build/LineChart.css">

Finally, you need to reference the n3-line-chart module in your AngularJS application.

angular.module('app', ['n3-line-chart'])

Here is an example how your HTML file should look like.

<!doctype html>
<html ng-app="app">
  <head>
    <!-- Reference AngularJS and D3.js -->
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/d3/d3.min.js"></script>
    <!-- Reference n3-line-chart -->
    <script src="node_modules/n3-charts/build/LineChart.js"></script>
    <link rel="stylesheet" href="node_modules/n3-charts/build/LineChart.css">

    <script type="text/javascript">
      angular.module('app', ['n3-line-chart'])
    </script>
  </head>
  <body>
    <!-- Now you can use the n3-line-chart directive -->
  </body>
</html>

Now, you can go ahead and check the examples and the complete documentation!

Looking for the previous version 1? Try using bower install n3-line-chart#1.1.12

What's new in v2?

Good question. Not that we rebuilt this just because we like building things, right ? Seriously though, v2 right now is mostly about solving v1 problems, you know, extendability and maintenance. The chart's directive lifecycle has been thought of from the very beginning, which allows better transitions and full leverage of d3.js capabilities.

Also, we now use something we call... Shoot, we dont have a name for that. Well, imagine a cake. With a bunch of fruits in it. Everything is baked in. Remove a fruit and there's a hole in the cake. No one wants a cake with air in it. That was v1. Now, imagine a pile of pancakes. Delicious, banana flavoured pancakes. Pour some maple syrup on those godly pastries. The syrup goes from one pancake to another, nothing fancy in this. Now if you remove one or two pancake, the syrup probably won't even notice. That's v2. v2's components are organized in layers and talk to each other using two powerful singletons, eventManager and factoryManager. It makes it super easy to add stuff and extend the directive's features.

Okay seriously, what's new ?

  • CSS styling for the entire chart Elements naming across the chart is now consistent and easy to override

  • Pure-HTML legend and tooltip you can pimp as much as you want Way easier to implement !

  • D3.js transitions for data update In v1, the entire chart was redrawn each time the data changed. V2 knows better.

  • Better data format The dataset has a new, more versatile format that allow unsynced data to be plotted.

  • Better performance due to smarter algorithms Well, actually what we were doing previously was the dumb way, this one is just the correct one.

  • Better options format Still WIP, though !

Contribution and Help

You can easily reach us via Gitter for discussions and questions regarding development and usage. If you got stuck, found a bug or want to share some thoughts and improvements please file an issue.

If you want to contribute, please contact us via Gitter to discuss the changes. Make sure you checkout the contribution docs and developer guidelines before. And don't be shy, we are always glad to help you with your first contributions.

Authors

n3-line-chart v2 is made with love and care by Christoph Körner & Sébastien Fragnaud.

Comments
  • Support date extrema

    Support date extrema

    The current extrema validity checking code allows only numbers in, preventing a time series chart to provide extrema.

    This pull request brings support for date extrema, with the same level of validity check as for numbers.

    opened by MattiSG 25
  • Adding the ability to define the radius of the dots Resolves #485

    Adding the ability to define the radius of the dots Resolves #485

    The dot radius for both the path and the tooltip can be set via the options object with the following format:

    dots {
      pathRadius: 4,
      tooltipRadius: 6
    }
    

    If this is not set, it will default to 2 and 3 respectively

    opened by hambyiii 17
  • Is log scale supported ?

    Is log scale supported ?

    Before asking anything, please know that this lib has been central to serveral of my projects to create dashboard and internal reporting, which is awesome ! Thx !

    I can see in d3 source that you can do a log scale for wide ranges of data. How do we do that with your lib ? Is it possible with v1 ? v2 ?

    Thanks a lot !

    PR welcome 
    opened by HadrienPierart 17
  • RTL support for line chart

    RTL support for line chart

    Hi, First and foremost, great project. I'm writing a site in an rtl language, when setting the dir=rtl on the html the text on both the graph labels and the tool tip is not presented correctly. I currently have a workaround that I place dir=ltr on the div that hold the line-chart. Can you please take a look?

    bug 
    opened by HarelM 15
  • Dot Chart Issues

    Dot Chart Issues

    I wanted to display a scatter plot using the "dot" chart with zoom enabled. However, using the latest version of n3-charts, I was unable to get the zoom feature to work properly. I reverted back to an earlier version of n3-charts (v1.11) and was able to get the zoom feature functional but now there is a line being rendered between each of the dots which I cannot figure out how to remove. It's making my scatter plot look like a very interesting starburst. What confuses me even further is that the current version of n3-charts doesn't do this. Any help that can be provided with either resolving the lines issue or getting the most current version of n3-charts to work with the zoomable feature would be greatly appreciated.

    Note: I am getting a sample set of data from an Oracle database every time I load/reload the page as my data set for the chart. This being said, here is the $scope.options part of my code from my controller:

    $scope.options = { margin: { bottom: 80, right: 80 }, pan: { x: true, x2: false, y: true, y2: false }, series: [{ y: "y", dataset: "numerical", key: "x", label: "Test", color: "hsla(88, 48%, 48%, 1)", type: ["dot"], id: "mySeries0" }], axes: { x: { key: 'x', zoomable: true } }, hideOverflow: true, zoom: { x: true, y: true } };

    opened by skirscher 14
  • Added zooming and panning feature

    Added zooming and panning feature

    Hi Sebastien.

    I added zooming and panning support, that can be enabled with the zoomable property in the axes options. It's recommended to also set hideOverflow to true. Here is an example: http://plnkr.co/edit/ewHIITSFoHfIXDxEN7tp?p=preview

    Fixes #167

    Best, Christoph

    opened by chaosmail 13
  • How to combine two different series types in one chart in V2

    How to combine two different series types in one chart in V2

    Hi, there,

    in V2, I want to combine two different series types. I tried below code without success. could anyone share an example? by the way, the two y axis have different value (for example, one is to show price, and another is to show position).

    thanks!

    below is my controller:

                    $scope.combinoptions = {
    
                            series: [
                                {
                                    axis: "y",
                                    dataset: "dataset1",
                                    key: "price",
                                    label: "price series",
                                    color: "#1f77b4",
                                    type: ['line', 'dot'],
                                    id: 'mySeries0',
                                 },
                                {
                                    axis: "y",
                                    dataset: "dataset1",
                                    key: "position",
                                    label: "position series",
                                    color: "#d62728",
                                    type: ['line', 'dot'],
                                    id: 'mySeries1',
                                    interpolation: {mode: 'step-after'}
                                }
    
                            ],
                            margin: {
                                top: 40,
                                bottom: 40,
                                right: 80
                              },
                              hideOverflow: true,
    
                            axes: {x: {key: 'time', zoomable: true}}
    
                        };
    
    opened by samwzm 12
  • Extract and display values from nested objects

    Extract and display values from nested objects

    I have a data object that I want to use values nested within a field. This would mean that right now I am using x and my y variables are count and timer. I am trying to include a nested object called shifts and get data from there so the data object would look as follows.

    $scope.data = { count: 234, timer:222, shifts: { count:323443, timer: 234234 }}

    I am wanting one of the y values to be shifts.count. is this possible, if so how?

    Thanks,

    Greg

    opened by FragginWagon 12
  •  Proposed structure now executable typescript

    Proposed structure now executable typescript

    Hi Sébastien,

    first thanks for your awesome and super quick work to provide this awesome new infrastructure. I did my best to add the new proposed structure into this framework. Honestly, it is awesome working with so much cool stuff like gulp, node, typescript etc. it is motivating me a lot.

    Please mind, we need to check on the following things:

    • check names for angular services, modules and directives
    • unify file names for src/ and dirnames (lowercase, uppercase, ..)
    • check the module names, class names and interface names
    • check the structure (is BaseFactory in module utils, etc)
    • gulp tasks
    • how to provide a minified version

    I will add more useful tests soon; I just wanted to provide you early access to my code.

    Best, Christoph

    opened by chaosmail 12
  • Fixed columns creation and legend issue, now allows conditional coloring out-of-the-box

    Fixed columns creation and legend issue, now allows conditional coloring out-of-the-box

    Hi n3-charts team,

    I cleaned the columns code a little, in order to use the fill-attr (color option) directly on the rect node. This immediately allows conditional coloring by simply using a coloring function instead of a string as color value and fixes #217.

    var colorFn = function(d, i){
      return d && d.y > 10 ? 'red' : 'green';
    };
    
    $scope.options = {
      series: [
         {y: 'value', color: colorFn, type: 'column'}
      ]
    };
    

    Here is a demo: http://plnkr.co/edit/0vDTzF6mUfDr1Tbnjzvk

    This PR also fixes #202 some annoying bug where the legend labels are overlapping.

    Best, Christoph

    opened by chaosmail 12
  • Added custom events click, hover and focus

    Added custom events click, hover and focus

    Hi n3-chart team,

    I added 3 custom events to the chart directive. Due to the glass g-element displayed for the scrubber tooltip, I was not able to implement click and hover in scrubber mode.

    • click: the mouse clicks on a dot or column (tooltip modes: axes, none)
    • hover: the mouse hovers over a dot or column (tooltip modes: axes, none)
    • focus: an event that triggers the scrubber focus (tooltip mode: scrubber)

    Every event handler is called with the data element d and the position i in the array of values of a series.

    I used this syntax for now, let me know if we can find something better:

    <linechart data="data" options="options" click="onClick" hover="onHover" focus="onFocus"></linechart>
    
    $scope.onClick = function(d, i){ ... };
    $scope.onHover = function(d, i){ ... };
    $scope.onFocus = function(d, i){ ... };
    

    Here is an example for click and hover: http://plnkr.co/edit/PTxVo3qKEnooK1PcsXMX

    Here is an example for focus: http://plnkr.co/edit/vUOa1v4UFRlbPZINCZ6X

    Best, Christoph

    opened by chaosmail 12
  • mousemove event

    mousemove event

    I would like to be able to pull data from the chart on a mouse move to pass to a function for another control on my page. Is this possible? Can I call another function from within the tootiphook perhaps?

    opened by cscrum 0
  • Internationalization of date

    Internationalization of date

    I don't find way to change language of date on timed dataset. Is exist ?

    For exemple, angularjs-material give $mdDateLocalProvider, but Idon't found on source a way for that ?

    Regards,

    opened by Ricolo53 0
  • No wheel support for zoom in v2 ?

    No wheel support for zoom in v2 ?

    I didn't find a way to zoom with the mouse wheel. After some research I finally found how to make the zoom work with ctrl and alt key pressed.

    But in my opinion that method is not very practical/intuitive...

    Is there any chance that n3 chart v2 support mouse wheel one day ? It would be perfect as for now there is no way to zoom out without double clicking !

    Greetings ! :)

    opened by tnargib 0
  • Dot Appearance & Shape

    Dot Appearance & Shape

    Hi there,

    a small foreword first. From the values i fed my chart with, i'm calculating things like standard deviation, average and so on. I'm "drawing" these statistical quantities for the according interval i set (e.g. if the interval is set to month, there will be 12 horizontal lines representing 1 year, if interval set to weeks 52-53 lines will represent 1 year) Now i'm having 2 dots, 1 at the beginning and 1 at the end of each interval.

    What i'd like to have What i'd like to be able to do is hiding the dots at the beginning and the end and insert 1 in the middle of the interval.

    Also i'd like to be able to change the shape of these "special dots" i'm setting to like triangles or something like that.

    I don't want an additional series.

    How i tried to archieve this I was able to set a point in the middle by a bit hacky way. I insert a undefined value at the end of the main series and keep inserting value, undefined, value, undefined, value, .... This way im able to set an independent point at the exact location i want (in the middle of the line and not connected to other points) Here seems to be the problem to tell the chart when to show such a point when not. (cuz now i got 3 dots for each interval. 1 at the beginning, 1 in the middle and 1 at the end)

    capture

    Greetings :)

    opened by spliffie 0
  • Dot / column color with V2

    Dot / column color with V2

    I am currently trying perform conditional coloring of columns/dots. As far as I remember it was possible in V1. Is there any way to do it with V2?

    Thanks

    opened by ghost 0
Releases(1.1.12)
  • 1.1.12(Sep 12, 2015)

    Cool new stuff

    • Added zoomable option for axes to enable zooming and panning
    • Added series argument to all event handlers
    • Added mouseenter, mouseover and mouseout events
    • Added innerTicks option for axes
    • Added grid option for axes
    • Added date support for min and max options (thanks to @MattiSG)

    Fixes

    • Fixed min/max estimation for x-axis with type date for datasets that contain a single value
    • Fixed zoom icon for multiple charts
    • Fixed scroll listeners when zoomable is not set (thanks to @marshall007)
    • Removed resize event when directive is destroyed

    More

    Check out our new WIKI pages for options, attributes and events! https://github.com/n3-charts/line-chart/wiki/Options

    Source code(tar.gz)
    Source code(zip)
  • 1.1.11(Aug 1, 2015)

  • 1.1.10(Jul 3, 2015)

    • Fixed column width computation for invisible series
    • Excluded max value in range
    • Fixed column width computation
    • Added coveralls.io integration
    • Added hideOverflow option to clip the content area of the chart
    • Fixed endless digest bug
    • Added ticksRotation option to axes
    • Fixed the hidden scrubber labels as well as the NS_ERROR_FAILURE in Firefox
    • Added ticksInterval option
    Source code(tar.gz)
    Source code(zip)
  • 1.1.9(May 26, 2015)

  • 1.1.8(May 18, 2015)

    Special thanks to @chaosmail !

    • Added customizable margins
    • Better formatting functions for the tooltips and the tick labels (and better names, too !)
    • Added custom events on series : click, hover, focus
    • Fixed #223, #219, #218, #211, #199
    Source code(tar.gz)
    Source code(zip)
  • 1.1.6(Feb 4, 2015)

  • 1.1.4(Dec 4, 2014)

  • 1.1.3(Oct 17, 2014)

    • #121 added the ticks option for axes
    • #125 chart now updates when a series is shown/hidden
    • #129 people can now pimp dem charts with the new dotSize option yo
    • added min and max option for axes
    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Jul 12, 2014)

    • stacked series
    • scrubber tooltip mode made the default mode
    • drawDots is now a per-series options (thanks to @andygray)
    • columnsHGap options allows to pimp a little bit dem columns yo.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.1(Jul 2, 2014)

  • 1.0.9(Jun 26, 2014)

  • 1.0.8(Jun 18, 2014)

  • 1.0.7(Jun 7, 2014)

    • configurable min and max for vertical axes
    • configurable tooltip (thanks @domrein)
    • series can be hidden at startup
    • showing/hiding a series update the options object
    • super cool visual regression automated tests with Travis CI
    • bug fixes (#76, #83, #84)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.6(May 4, 2014)

  • 1.0.5(May 1, 2014)

  • 1.0.4(Mar 24, 2014)

    Au menu :

    • Configurable line thickness
    • Label function available for vertical axes too
    • Optional color setting for axes
    • Legend icons are now clipped
    • Demo page now uses APOJOP for pretty printing.
    • Upgraded to latest AngularJS (1.2.15) and D3 (3.4.3)
    • Minor bug fixes (#54, #55)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.3(Jan 23, 2014)

    • stripes for areas
    • better legend (with distinct symbols for series types)
    • better thumbnail mode (no dots, less margins, more sparklines-like result)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0-beta(Oct 11, 2013)

Owner
Making AngularJS charts as easy as pie.
null
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 5.9k Dec 22, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Charts for Raphaël

g.Raphaël - Official charting plugin for Raphaël For more information, see: http://g.raphaeljs.com/ Changelog v0.51 Fixed issues with piechart related

Dmitry Baranovskiy 1.5k Dec 31, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
A friendly reusable charts DSL for D3

D4 D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the intern

Mark Daggett 429 Dec 5, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.8k Jan 9, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023