n3-charts / line-chart Goto Github PK

I think it could be great to allow users to configure the way the tooltip shows up.

The default mode would be the current one, i.e. the tooltips show up on their respective axis. Another mode could be the two labels sticking to the hovered point, for instance. This could allow the charts to be displayed in small sizes.

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.

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

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.

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.

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)

It would be nice to be able to use things other than numbers in the x axis, like for example times.

This lib is awesome though!

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.

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 ?

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.

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.

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

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

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

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

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

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

Thumbnail mode is broken and I need it.

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 white background on the fancy legends are bleeding through. Adding a circular clip path around the element will solve this.

For two series with the same color but different representation types, it is hard to tell which is which on the chart.

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.

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

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 option for coloring the area under the chart called showArea:(boolean)

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.

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

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.

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.

Can we put string values on x axis? It seems we could only use number or date type. Thanks.

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

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

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

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.

The demo page in the readme currently returns a 404.

It is hard to tell whether a series is on the left axis or on the right one. The legend should provide a way to do that without hovering a dot (the tooltip, then, shows up on the proper axis).

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

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.