grafiddle / angular-chart

AngularJS directive for adjustable dynamically updating c3 charts

graFiddle

Share and collaborate on visualizations using graFiddle.it

Setup

• $ npm install
• $ bower install
• $ sudo gem install compass
• Create project on Google App Engine and setup your machine for deployment

Build

• $ gulp build

Deploy

• $ cd server
• $ appcfg.py -A grafiddle update app

angular-chart's Issues

How do I use grouping to do a stacked bar?

It's not clear to me how to use the grouping feature of the API. The documentation points towards the C3 example, but that uses the columns field as the data orientation, whereas angular-chart doesn't seem to support the columns field, but it is still possible to specify orientation. The two APIs seem to be slightly different in this case, and I've not been able to get grouping working in angular-chart.

It would be really helpful to see a grouping, stacked-bar example of the angular-chart API, and how the orientation property works. Aside from this, I've been impressed with angular-chart and found it useful and easy use and integrate.

many thanks in advance

Usage of scope.apply() on onselect()

Hi,

I'm not completely sure about this, but as far as I understand we have to call scope.apply() before executing functions like onselect.

My Problem: I'm triggering some scope variable change with onSelect and it is not applied. When i change
https://github.com/maxklenk/angular-chart/blob/master/src/chart.js#L616

if (scope.options.selection.onselected) {
      scope.options.selection.onselected();
}

to

 if (scope.options.selection.onselected) {
       scope.$apply(function(){
           scope.options.selection.onselected();
       });
 }

It works.

Is is a problem in my application code or in the directive?

Add zoom to canvas

To explore the data it should be possible to zoom in the data in the xAxis.

fix dataset watchers for promises or other objects

I have set dataset properly in my controller but in the directive 'angularchart' scope has dataset,options etc are coming undefined.
Dataset is accessible in ng-repeat function in the same view.

My controller:

var SearchAppController = angular.module('SearchAppController', ['angularChart']);

SearchAppController.controller('ItemDetailController',function($scope,$http,$location,$routeParams){

    var itemID = $routeParams.itemID;
    var completeURL = "/search/price/"+itemID;
    var responsePromise = $http.get(completeURL);
    responsePromise.success(function(data, status, headers, config) {
        var historyList = data[0].history;
        $scope.dataset = historyList;
                        $scope.schema = {
                          time: {
                            type: 'datetime',
                            format: '%Y-%m-%d %H:%M:%S',
                            name: 'Date'
                          }
                        };

                        $scope.options = {
                          rows: [{
                            key: 'lowestNewPrice',
                            type: 'bar'
                          }, {
                            key: 'time'
                          }],
                          xAxis: {
                            key: 'time',
                            displayFormat: '%Y-%m-%d %H:%M:%S'
                          }
                        };


});

});

My view:

Thanks in advance!

Avoid overlapping circular navigation

X Axis Tick Count

Is it possible to set the x-axis tick count ?

Example: http://c3js.org/samples/axes_x_tick_count.html

Add optional Grid Lines and Regions

Sample:

• http://c3js.org/samples/grid_x_lines.html
• http://c3js.org/samples/grid_y_lines.html
• http://c3js.org/samples/region.html

ToDo:

• add lines to options
• add regions to options
• add line by clicking the axis
• add region by grabbing the axis

Synchronizing "options" property

Hi Max,

I tried your directive - but got some trouble when trying to dynamically modify the selections of a graph.

When selecting any point, it is added to the selections object of options. (sync c3 --> angular) but when I try to modify those selections in angular, they are not synced back. (e.g. removing an entry in the selections array)

I for example would expect this code to remove one element:

$scope.$watch('options.selection.selected', function (newVal, oldVal) {
      if (newVal.length > 2) {
        console.log('more than two values selected', $scope.options.selection.selected);
        $scope.options.selection.selected.shift(); 
       console.log('more than two values selected', $scope.options.selection.selected);
      }
    }, true);

Is there yet any possibility to achieve this?

Padding is not implemented

Hello Max--first of all, thanks for the awesome project! Secondly, I noticed padding didn't seem to be implemented and the only way I could figure a way around it was to implement it like so:

// Padding
//
if (scope.options.padding) {
  scope.configuration.padding = scope.options.padding;
} else {
  scope.configuration.padding = {};
}

Which seemed to work simply enough when I specified padding in my options like so:

$scope.options = {
  padding: {
    bottom: 20
  }
};

C3 instance's destroy method does not get called when directive's scope is destroyed

The situation where this is most apparent is this: if charts are created and destroyed many times, window resize event listeners get left hanging, which causes resizing browser window to get progressively slower.

Show units on axis (based on schema)

Register on directive on http://ngmodules.org/

Export charts as png/svg/pdf

Discussed here: c3js/c3#313
Working solution: https://github.com/times/axisJS

Misplaced Tooltip

In the screenshot below, I hover on bottom right chart, however, the tooltip shown at the top left

I fixed it by giving angularchart directive a position: relative style.

Shouldn't angularchart directive have position: relative style by default?

Highlight row when opening legend circle

Problems adding charts to columns with bootstrap.

Hello as seen in the image I can not make the graphic fits the frame, for the portion of styles 'm using bootstratp, I tested several sizes of al - MD- (number ) without getting fit.

yAxis min/max options does not work

Here's an example options input:

    $scope.options = {
      rows: [{
        key: 'one',
        type: 'bar'
      }, {
        key: 'two',
        type: 'bar'
      }, {
        key: 'three',
        type: 'bar'
      }],
      xAxis: {
        key: 'atTime',
        displayFormat: '%Y-%m-%d %H:%M:%S'
      },
      yAxis: {
        max: 400,
        min: -400,
        label: "Number of contributions"
      }
    }

everything works correctly except min / max.

The docs also state that the value for yAxis' min/max is a string. Shouldn't those be number?

Commented out $watch for dataset ?

Change c4edf65 commented out lines 695-697 in angular-chart.js which means that there's no watcher for the dataset.

Was this an error ?

In my testing the lack of watcher means that if I update the dataset after fetching data the chart is not updated. Restoring the $watch fixes this - but am I missing an alternative or better way to update the chart?

Edit Rows

Add options to edit which and how rows are displayed in the visualization.

ToDo:

• add optional enable row edit flag
• add custom legend
• add option to hide/show (remove/add?) rows
• add function to hide/show (remove/add?) rows
• add function to change row display (line,bar,area,scatter) 'only for multi chart'
• add option to change the color of a row
• add function to change the color of a row
• add hover highlighting for rows
• add option to align row to y2-Axis
• add function to change y-Axis

Add parallel Coordinates

See

• http://bl.ocks.org/jasondavies/1341281
• https://syntagmatic.github.io/parallel-coordinates/

write detailed documentation for dataset

Can't create chart from within another Directive as throws "No Data Provided"

I'm trying to use the chart from within another directive. In this directive the scope where I set the data is created in local scope of my directive's link function. However the link function for the chart has already ran and thrown a fail on this line:

https://github.com/maxklenk/angular-chart/blob/develop/src/chart.js#L120

The watcher's are then never set after this is thrown in the rest of the link function below. The chart data is determined from within my directive so it appears I'm stuck? Am I missing something or how do I deal with this before I fork the project? I've never had a similar issue with other directives.

Do not expose dataAttributeChartID in options

The attribute dataAttributeChartID in the options of the directive is just for internal use (C3 requires it to refer the DOM nodes). Generate the ID inside of the directive. Do not expose it to the outside world.

Use the chart.transform() API C3.js offers

To add animations and to not require a full rendering of the chart:
http://c3js.org/samples/transform_line.html

Add architectural stack on demo page

Tooltip is displayed far too below when using <angularchart> as an element

When you angularchart like this sample:

<angularchart dataset="chartData" options="chartOptions"></angularchart>

and you put you mouse on a data point, the tooltip is displayed at least 200px below the cursor. This doesn't happen when you use:

<div angularchart dataset="chartData" options="chartOptions"></div>

Hence, the problem is that <angularchart> acts like a span instead of a <div> used by c3.js.

responsive custom Legend

Add subchart zoom to canvas

To explore the data it should be possible to zoom in the data in the xAxis using a subchart.

See: http://c3js.org/samples/options_subchart.html

ToDo

• add a toggle switch to show/hide a subchart
• get zoom level on change
• set zoom level

Add css to bower main files

and fonts

make demo examples linkable

To be able to link to a specifc example in the demo, ngRouter has to be added to the demo page.

Throws error if loaded in a requireJS+AngularJS project.

If used in an Angular Project in combination with RequireJS, error is thrown since c3 is defined as an AMD module and not binded to the window object.
Please add support for that case as well.

Update to c3 Version 0.4.0

Remove circular-navigation from dependencies

Chart not rendering on IE 8/7

I have added angularJS1.2.28 instead of angularJS 1.3.x. Chart is working fine till IE 9 but It is not support for IE 8/7. Is there any pollyfill for supporting chart on IE 8/7?

Add repository to npm

Agenda for angular-chart 0.3.0

Version 0.3.0 will contain some structural changes to separate functions and to be able to keep up with the development of c3.js.

Tasks

• adjust angular-chart options to c3.js configuration to allow an easier transition from c3.js to angular-chart
• find a way to set/update all simple c3.js configuration parameters at once (#53, #54)
• define how the schema object sets config parameters (set postfix, displayFormat, ...)
• extract in-place editor features from core file

Render tooltip in front of custom navigation

Change chart type when changing one row to line in a pie chart

write detailed documentation for options

register on bower.io

http://bower.io/docs/creating-packages/#register

Add new Icons for row editing

http://www.flaticon.com/collection/546f26cd4982f6657f8b4594

make chart-type switch optional

Create demo site using github.io

https://pages.github.com/

Plots don't show up but data set is there

Can't see the actual plots but mouse over shows the data is there and correct

Add tooltips for interactions

Extend presentation about angular-chart

Update the existing presentation about angular-chart to make is usable by the public:

• Add visible notes
• add notes in English
• add links in presentation
• add links to presentation (http://maxklenk.github.io/angular-chart-presentation)

Show post-/prefixes on Axis

Add .editorconfig

As pointed out in #34, an .editorconfig file has to be added to define indentation. http://editorconfig.org/

Is there a way to integrate this with cross filter

I am trying to integrate this with crossfilter for large data sets. Is there a directive for that ?

Show post-/prefixes in Tooltips