n3-charts / line-chart Goto Github PK

Awesome charts for AngularJS.

Home Page: http://n3-charts.github.io/line-chart/

License: MIT License

JavaScript 20.44% HTML 2.75% Shell 0.88% TypeScript 73.76% CSS 2.15%

line-chart's Introduction

n3-line-chart v2

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.

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.

line-chart's People

Contributors

Stargazers

Watchers

Forkers

mtho11 wrobstory ojacquemart tagazok sstodghill negatratoron priyajayaram gskielian pjerem wengcan lymanlai chri5b hillstub kidliang docalytics jhidalgo3 sqrrrl vineelal benaghaeipour paivacampos fbeauchamp bengwinter billthornton lidoma takenorikimura teamoore artyom4d domrein tyrfingmjolnir mpmedia alanwong22 aviscatanius ravivit9 tanbamboo junzhusecurity sillysachin lorem--ipsum stanleygu andygray leeavital saadeez chensheng1357 basudevsahu pablod quytx berenjb rarojas britztownriots britztopher lukasz-karolewski mbxsystems battlecow rajukanumuri web-dave frankeymen andreasloukakis marufsiddiqui yurneroma althafhussain1 hichnik huachangzha nirajbhutada tetralon ryan-pek arumry jaka891 cjpak nvdnkpr ibardak lcaprini konkko cmsdesigner gianmarcotoso eddywashere giblets2570 developersri vijaythecoder bitamar alejo2995 raysearchlabs avien magicbash chaosmail jitnut oooh-name gitter-badger jmuet solversa rbonillaalivebox kvindascr nmakrisru vibhatha patrickroumanoff mattisg preferd029 marshall007 shettyjm fragginwagon mypersonalforks josephcardwell

line-chart's Issues

deep watch on the options object.

Hello. this is a great project.

I was wondering what you thought about doing a JSON.stringify on scope.data and scope.options when watching them, that way if they are large the digest cycle will still be very fast.

Make the margins configurable

The chart's margins are hard-coded. For some dirty data (such as 0.1456461542156115646), the y tooltip is cropped. Changing the margins causes some tests to break, so it has to be a parameter or something.

I'm not sure if putting it into the options is a good idea, since the user should not have to worry about that. Maybe something that loops over the data and computes the best margin ?

Chart slowly zooms in on Y axis as it is updated with new data

I modified app.js in the "Plunker" demo page. I've got an application where I'm trying to let a chart scroll by the last 30 seconds of data. So I modified app.js to look like this:

app.controller('MainCtrl', function($scope) {
  //$scope.data = [{x: 0, value: 12}, {x: 1, value: 4}, {x: 2, value: 7}, {x: 3, value: 0}];

  var my_data = [];
  for(i = 0; i < 100; i++)
  {
    my_data.push({x: i, value: i % 20});
  }

  $scope.data = my_data;

  setInterval(updateGraph, 100);

  function updateGraph()
  {
    var new_array = $scope.data.slice(1);
    var index = new_array.length-1;
    var last_element = new_array[index];
    var newdata = {x: last_element.x+1, value: (last_element.value + 1) % 20};
    new_array.push(newdata);
    $scope.data = new_array;
    $scope.$apply();
  }

  // Line
  //$scope.options = {series: [{y: 'value', color: 'steelblue'}]};

  // Area
  //$scope.options = {series: [{y: 'value', type: 'area', color: 'steelblue'}]};

  // Column
  //$scope.options = {series: [{y: 'value', type: 'column', color: 'steelblue'}]};

  // Interpolation
  $scope.options = {lineMode: 'cardinal', series: [{y: 'value', color: 'steelblue'}]};

});

It's a sawtooth wave and it slowly scrolls by. What I've found is that the Y axis slowly zooms in. It starts out showing 0-20 and that slowly creeps up to 2-20, 4-20, 10-20, all the way up to showing 19-20 or even smaller range. The only thing that fixes it is changing the source code so that the Plunker will re-load.

I do realize that I'm probably abusing your code a bit (it jitters on updates rather than scrolling) so I don't necessarily expect that I can use this for production. I thought I should pass the information on in case it's useful.

How can i change the way Time is displayed on the xAxis?

I want to show time-information on the xAxis in 24hrs-format and not in am/pm. How can I do this?
Thanks for your help.

Make the chart resizable

Width and height should not be hardcoded. NVD3 handles this by redrawing the chart each time the container is resized.

Redraw line chart

Apologies i am relatively new to Angularjs.
I can't seem to get the chart to redraw the data when using the http service. I am simply updating the $scope.data (this is being used as the data for the chart) but it doesn't seem to update the chart?

I am calling the service from a button, this calls the following :
$scope.searchMonthlyTransactions = function () {
$http.get('http://sas-laptop9/CashFlowService/Service1.svc/MovementTransactions/).success(function (data) {
$scope.data = data.MovementTransactionsResult;
});
}

Am i doing something stupid? Or should it update the chart with my data?
I know the data returned is ok, as if i call it "on load" the graph plots ok.

Any help would be great

Test the lineMode option

Make the chart handles second y-axis

Test the lineMode option

Line Chart doesn't resize correctly

When resizing the chart verticaly, awesome holy s... happens.

Apply formats to labels

I apologize if this is possible already and I'm too dense to figure it out. My X-axis consists of unix-epoch time and I'd like the chart to display dates instead of the epoch values. I converted to readable dates prior to populating the data array, but it threw everything out of order. Is there a way to let the chart draw using epoch, but tell it to display with a date mask?

BTW, I've looked at a lot of implementations so far and yours feels like the most elegant.

What's the direction for angular-d3/n3-charts vs x-charts, etc.

We're using AngularJS and need D3 charts for time series data (both simple and complex like http://bl.ocks.org/mbostock/1667367). We're debating on creating custom AngularJS directives in D3 or helping enhance an existing repo like line-chart.

line-chart can create bar charts, but there's also an (empty) bar-charts repo. I also saw the x-charts repo with some of the same contributors.

Is x-charts dead and n3-charts is the new direction?

Add dots to the line

The line by its own is not sufficient. Dot should be drawn for each datum. These dots will later handle mouseover and mouseout events to display a tooltip.

Add optional color setting for axis

Title says it all. I added this feature to a local set of the code, however not really able to create a pull-request for it in its current state. I am going to try and work some this weekend and create an official pull request.

Explanation: The background of my graphs are a non-white color and the black axis' are hard to read. Adding a configurable color option that defaults to black would be a nice enhancement.

Line renders strangely when there are "holes" in data

Add interpolation

The chart should take an option to enable/disable interpolation of line drawing.

The interpolation should preserve y-values (otherwise the dots will be drawn outside of the lines).

The chart should, by default, not interpolate.

Remove unused zoom code from line-chart.js

This code is no longer valid, thus it should be removed and annihilated by unicorns and dragons and raptors. Or a developer. A developer will be fine.

Monitor test coverage

Add the relevant configuration stuff in karma-conf.js to monitor test coverage.

Add a legend

Chart should support abscissas key configuration

One must be able to configure under which key the chart looks for abscissas values in data. Default would, of course, be 'x'

Add support for n Y axis

I would be nice to have several y axis, each axis would be of a certain color for better visualization.

I've been doing a proof of concept with your base code over the weekend and looks promising.

I'll be probably using a lot his library so I'll propably do some pull requests over the next few weeks.

Regards

Add optional labelFunction setting for y-axis

Y axis should support logarithmic mode

Using the d3.js d3.scale.log(), the y axes should support logarithmic mode. We shoudl also use the clamp(true) function to avoir zero values in the input domain of the scale.

Demo page returns 404

The demo page in the readme currently returns a 404.

Make colors automatic

The chart should set an arbitrary color if none is given in options.

Make the tooltip tests pass

The tooltip tests are not properly implemented : they don't pass but the tooltip actually works.

Make it possible to configure lineMode per line.

It should be possible to configure the lineMode on per line basis (e.g. together within the axis-configuration)

Undefined data should not be treated as valid data

When a data series is missing data, the chart should ignore it.

Add gh-pages

Add a gh-pages branch and put it the demo app files.

Thumbnail mode is broken

Thumbnail mode is broken and I need it.

The tooltip should be in front of the legend

Change the way to set up data for multiple lines / columns in one chart

At the moment it es something like this:
data = [{x: ts0 , y: value1, y2: value2},{x: ts1 , y: value1, y2: value2},{x: ts2 , y: value1, y2: value2} ...];

something like this would be better:
data = {dataset1:[{x: ts0 , y: value1},{x: ts1 , y: value1},{x: ts2 , y: value1}], dataset2:[{x: ts0 , y: value1},{x: ts1 , y: value},{x: ts2 , y: value1}] ...};

mainly if you have a spatial resolution in minutes in dataset1 and one in hours in dataset2, you will not have to multiply the values to get the lines drawn.

regards
Sascha

Legend Icon Clipping

Explanation: The background of my graphs are a non-white color and the white background on the fancy legends are bleeding through. Adding a circular clip path around the element will solve this.

Custom abscissas field gets ignored for columns

Columns make the abscissas axis to resize. It fails when the abscissas key is not 'x'.

Improve the gh-pages branch so it doesn't shit in the fan with small width screens.

Cut into parts the main .js file.

The main (the only) JavaScript file starts to be huge. Using Grunt.js, it is possible to cut it into several parts. We should do that.

Initialize some series as "disabled"

When defining the series, add an optional variable enabled (defaults: true). This will determine whether the series is currently displayed or not.

Currently all series are enabled / displayed and when you click on the label it toggles it off / disables it. Adding a variable to the series definition could be a nice enhancement.

My Current Use Case: I have a report / graph that displays 7 different series. All of which are related, but having the graph initially display all 7 series can be a bit daunting. Ideally i would like to display 3 or 4 of the more prominent ones and then allow the user to enable / disable the others.

Test the showArea option

Use apojop instead of pretty.js

In the gh-pages branch, we currently use a home-made prettifier for JavaScript objects. This should be avoided since it is now a separated library called apojop.

remove pretty.js
add bower dependency to apojop
enjoy kittens and unicorns (optional)