willsoto/angular-chartist.js

Angular directive for Chartist.js

angular-chartist.js's Issues

Charts appear only on window resize

I'm sure this is an implementation problem in my code rather than with the library however I'm getting some trouble with responsive charts not appearing until a resize event is triggered (either manually or by triggering a resize in a setTimeout).

If I create a chart with hardcoded width/height then I don't get any problems.

My chart data is lazy loaded so I have an ng-if directive on the directive so it does not attempt to render data that is not available yet.

I've done some superficial debugging but nothing in depth yet. Before I got too far down the rabbit hole I wanted to check with you if this was a known issue (with a known workaround).

If you'd like, I can create a plunkr demonstrating the problem.

Add .npmignore

TypeError: Cannot read property 'Line' of undefined

Why am I always getting this?

chartist(class="ct-chart ct-golden-section" chartist-data="chartData" chartist-chart-type="Line" chartist-chart-options="chartOptions" chartist-responsive-options="barResponsiveOptions")

function dashboardController ($scope) {
    $scope.chartData = {
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
      series: [
          [0, 1, 2, 4, 7, 6, 9, 10, 8, 10, 14, 13, 16, 14, 17, 19, 20, 31, 32, 26, 36, 28, 31, 40, 26, 26, 43, 47, 55, 30],
          [0, 1, 2, 4, 4, 6, 6, 13, 9, 10, 16, 18, 21, 16, 16, 16, 31, 17, 27, 23, 31, 29, 35, 39, 30, 32, 26, 43, 51, 46],
          [0, 1, 3, 4, 6, 5, 11, 9, 11, 11, 13, 15, 14, 22, 20, 15, 31, 27, 25, 25, 36, 30, 37, 29, 29, 39, 40, 49, 34, 35],
          [0, 1, 3, 5, 7, 5, 9, 9, 10, 17, 13, 21, 14, 16, 23, 23, 25, 17, 24, 34, 27, 39, 33, 45, 47, 32, 40, 36, 49, 32],
          [0, 1, 3, 3, 7, 5, 8, 11, 12, 13, 16, 17, 20, 24, 27, 15, 22, 33, 35, 24, 32, 35, 41, 39, 24, 31, 51, 29, 45, 50]
      ]
    };

    $scope.chartOptions = {
      axisX: {
          labelInterpolationFnc: function(value) {
              return value;
          }
      }
    };
  }

Bower points to wrong main file.

"main": "dist/angular-chartist.js"

How to display the value on or above a bar?

I want to display the value of a bar permanently on the bar itself or on top. How can I achieve this? It should not interfere with the tool tip functionality. I am using a stacked bar, so this should work for each bar part.

Source Missing License Header

I noticed that the JavaScript file doesn't have a license header. This seems to be a common practice amongst JavaScript libraries.
Would it be possible to add the information to the file so users can easily adhere to the project's license?
Something like:
Licensed under the MIT License
Thanks!

Consider changing name of package to angular-chartist

I ran into small issue when running this against grunt build. The default config of many build tools to is to take files ending with ".js" and do something with them. Since this is a directory, I got a EISDIR issue with it.

I had to finally add an exception for angular-chartist.js . Would have been easier if it was named conventionally.

Change the module name to just Chartist

The ng prefix should be reserved for only Angular core things. I think Chartist would be sufficient.

Events not firing

I might be doing something wrong but I cannot get events to fire. I have

<chartist class="ct-chart" chartist-data="chartist.data" chartist-chart-type="Line" chartist-events="chartist.events">

and

$scope.chartist = {
    data : {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
        ]
    },
    events: {
        mousemove: function(obj) {
            window.alert('Mike!');
            console.log('MOUSE ENTER!');
        },
        mouseleave: function(obj) {
            window.alert('Mike!');
            console.log('MOUSE LEAVE!');
        },
        draw: function(obj) {
                    console.log(obj);
                }
    }
};

The data loads fine but the events mousemove and mouseleave do not fire when I try and interact with the graph. The 'draw' event works fine. What am I doing wrong?

What about chart options?

chartist-chart-options="{height: '380px'}" - it works
chartist-chart-options="myCtrl.chartOptions" - i dunno but it doesn't works

any ideas friends?

Support for plugins

I'm new to angularjs and chartist.js
It seems that angular-chartist doesn't have plugins chartist support
https://gionkunz.github.io/chartist-js/plugins.html

Doesn't work with pages that get data async

Is it possible to make this work with pages that don't have the data up front, i.e. when the data is retrieved async after page load? I think it's just a matter of checking if Ctrl.data is defined in the link function. If not don't render the chart until the watch callback gets data in newConfig.data.

Firefox Mozilla <chartist> element getting an NS_ERROR_FAILURE

In chrome it's like a Error: Invalid value for attribute d="MNaN,NaN"
Even i was trying to set ng-if element - it never been working =(

Refactor directive to support other options

Things like tooltips and some of the more jquery things being done are not really supported in an "angular way."

Opening up discussion on ways to achieve this.

How to do tooltips?

So far I'm really enjoying this directive, but I'm having a hard time figuring out how to add the tooltip events they describe on the Chartist Examples page.

Customize chart with default styles

Hi, my current project has a charting style guide which needs a lot of customization on every chart. Definitely I don't want to put a 'draw' event listener setting on every chart options, so I came up with an idea to add an additional directive for the default settings.

'use strict';

/**
 * @ngdoc directive
 * @name spotlightFeApp.directive:yChartist
 * @description
 * # yChartist
 */
angular.module('spotlightFeApp')
  .directive('yChartist', function ($parse) {
    return {
      priority: 100,
      restrict: 'A',
      compile: function (elem, attrs) {
          if (attrs.chartistEvents) {
            attrs.$set('yOriginalChartistEvents', attrs.chartistEvents);
          }

          attrs.$set('chartistEvents', 'yChartist.events');
      },
      controller: function($scope, $element, $attrs) {
        var cicleRadius = 3;

        var events = $parse($attrs.yOriginalChartistEvents);
        var yChartistEvents = {
            // Ref: http://gionkunz.github.io/chartist-js/examples.html#using-events-to-replace-graphics
            draw: function(data) {
                if (data.type === 'point') {
                    var circle = new Chartist.Svg('circle', {
                        cx: data.x,
                        cy: data.y,
                        r: cicleRadius
                    }, 'ct-area');

                    data.element.replace(circle);
                }
            }
        };

        $scope.yChartist = {
            events: angular.extend(yChartistEvents, events())
        };
      }
    };
  });

And the HTML is like this:

<chartist class="ct-chart ct-major-twelfth" chartist-data="chartist.lineData" chartist-chart-type="Line" chartist-chart-options="chartist.lineOptions" y-chartist></chartist>

I wonder if there is a better way to handle this kind of situation? In ng-chartist API level?

Update to babel 6

Auto-updating/binding

Hello,

I see a few issues here pertaining to having charts auto-redraw when the underlying data has changed. For example, #25. In this thread there is discussion about overriding the directive. Is this still necessary? I didn't spend a lot of time with the code on this page, but in what little time I spent I wasn't able to get it to work. I figured I would check with you to see if this is the best path to accomplish this?

Part of my other motivation here is also to learn more about why the watching/updating isn't a part of the directive in the first place, and/or whether this might be included in a future version?

gulp default tasks gives an error after a fresh install

/home/gkunz/WebstormProjects/ng-chartist.js/node_modules/del/node_modules/each-async/index.js:37
cb();
^
TypeError: boolean is not a function
at callback (/home/gkunz/WebstormProjects/ng-chartist.js/node_modules/del/node_modules/each-async/index.js:37:4)
at /home/gkunz/WebstormProjects/ng-chartist.js/node_modules/del/node_modules/each-async/node_modules/onetime/index.js:20:12
at CB (/home/gkunz/WebstormProjects/ng-chartist.js/node_modules/del/node_modules/rimraf/rimraf.js:68:5)
at Object.oncomplete (fs.js:107:15)

Watch chart type attribute?

What do you think about watching the chart type and rebuilding the chart if it changes?

angular and chartist are installed in subdirectory /node_modules upon npm install

When you have a project that depends on angular, chartist and angular-chartist, angular-chartist installs its own versions of angular and chartist in a subdirectory /node_modules, like this:

/your-project
  /node_modules
    /angular
    /chartist
    /other_modules
    /angular-chartist.js
      /node_modules
        /angular    <--again?
        /chartist   <--again?

• This makes it impossible to make angular-chartist rely on a different fork of chartist other than the official one
• This bundles angular right in a browserify bundle, even when you want it out of your bundle and loading through a CDN

Taking them out of dependencies in package.json and bower.json will solve this. (The versions of chartist are not even the same across these files)

Error if used with require.js

If I use this directives along with require.js i get

Uncaught Error: Mismatched anonymous define() module: function () ....

when show hiding the line chart not working as expected

Initially I will hide the chart, after based one condition I want to show the chart at that time its not showing .After increasing or decreasing the window size line chart will show.

Call detach on $destroy ?

Hi,

detach() should be call on $scope $destroy to avoid :
Error: Invalid value for <foreignObject> attribute height="NaN" on chartist.js:1363

Am I wrong ?

The new API and Events of Chartist 0.2.0 should be made available in ng-chartist

Enforce commit conventions

https://gist.github.com/johannestroeger/19183667fddcc6d091c0

https://github.com/angular/angular.js/blob/master/validate-commit-msg.js

Can't seem to get angular-chartist working - keeps complaining e[this.chartType] is undefined

Hi, I am trying out angular-chartist and am facing the following error:

8    345201   error    Error: undefined is not an object (evaluating 'e[this.chartType]')
renderChart@http://localhost:8100/lib/angular-chartist.js/dist/angular-chartist.min.js:1:868
link@http://localhost:8100/lib/angular-chartist.js/dist/angular-chartist.min.js:1:1222

My template code:

<chartist class="ct-chart" chartist-data="barData" chartist-chart-type="Bar"></chartist>

My controller code:

 $scope.barData=
    {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 
                     'Saturday', 'Sunday'],
            series: [
                        [5, 4, 3, 7, 5, 10, 3],
                        [3, 2, 9, 5, 4, 6, 4]
                    ]
    };

My index.html includes:

<link href="lib/chartist/dist/chartist.min.css" rel="stylesheet">
 <script src="lib/angular-chartist.js/dist/angular-chartist.min.js 
"></script>

Note that I am also using tc-chart-js (based on Chart.js) in the same application, if that makes a difference?

Events aren't loaded inside a directive

When I wrap the chartist directive inside the link of another directive, events are not called.
Here is a working plunker http://plnkr.co/edit/Z5yYElynZWI0MabZHK5c?p=preview

mydirective.js

'use strict';

angular.module('myApp')
.directive('widgetDirective', [function() {
  return {
    restrict: 'A',
    scope: true,
    templateUrl: 'tpl.html',
    link: function($scope, $element, $attrs) {
      $scope.chartistEvents = {
        draw: function(obj) {
          // Never here
          if(obj.type === 'bar') {
            obj.element.attr({
              style: 'stroke-width: 30px'
            });
          }
        }
      };
     $scope.barData = {
        labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
        series: [
          [5, 4, 3, 7, 5],
          [2, 1, 1, 0, 0],
          [0, 2, 1, 0, 0],
        ]
      };
      $scope.barDataOpts = {
        stackBars: true,
      };
    }
  };
}]);

tpl.html

<chartist class="ct-chart" chartist-data="barData" chartist-chart-type="Bar" chartist-chart-options="barDataOpts" chartist-events="chartistEvents"></chartist>

Add CONTRIBUTING.md

Update to the latest api

Add support for changing options

I noticed the chart doesn't redraw when changing the options (for example switching from a stacked to an unstacked bar chart through the stackBars option).

I modified AngularChartistCtrl.prototype.renderChart into

    AngularChartistCtrl.prototype.renderChart = function (element, chartType, chartOptions) {
        if (chartType) {
            this.chartType = chartType;
        }
        if (chartOptions) {
            this.chartOptions = chartOptions;
        }

        return Chartist[this.chartType](element, this.data, this.options, this.responsiveOptions);
    };

and the watch into

                scope.$watch(function () {
                    return {
                        data: scope.data(),
                        chartType: scope.chartType,
                        chartOptions: scope.chartOptions()
                    };
                }, function (newConfig, oldConfig) {
                    console.log('data changed into %o', newConfig);
                    var newData = newConfig.data;
                    var oldData = oldConfig.data;

                    var newChartType = newConfig.chartType;
                    var oldChartType = oldConfig.chartType;

                    var newChartOptions = newConfig.chartOptions;
                    var oldChartOptions = oldConfig.chartOptions;

                    if (newData !== oldData) {
                        chart.update(newData);
                    }

                    if (newChartType !== oldChartType || newChartOptions !== oldChartOptions) {
                        chart = Ctrl.renderChart(elm, newChartType, newChartOptions);
                    }

                }, true);

but now this error occurs sometimes:

TypeError: Cannot read property 'currentOptions' of undefined
    at Line.update (chartist.js:1085)
    at Object.fn (angular-chartist.js:80) —> this is chart.update(newData);
    at Scope.$get.Scope.$digest (angular.js:14225)
    at Scope.$get.Scope.$apply (angular.js:14488)

(which incidentally made me notice — because of the line numbers — that installing angular-chartist.js via npm creates a dependency on chartist 0.5.0 instead of the current 0.7.1)

Do you have any thoughts as to why this happens?

Add unit tests

Update documentation

To reflect the api changes

Updating chart data

I was wondering, could you show working example of this directive where chart data would be feeded via scope - and also where chart options could be changed live trough ng-model input box ?

<input ng-model="chartWidth" placeholder="Enter chart width">

var options = {
    width: $scope.chartWidth,
    height: 390,
    low:36.10,
    high:36.99,
    showArea: true,
}

How do i achieve options reload after ng-model gets changed ?

Update chartist to 0.8.0

Trigger an update

I'm trying to understand how I can trigger an update on a chart when becoming visible i a tab. How would I typically get a reference to that chart?

Remove '.js' from directory name

This confuses some build tools as they see something called .js and assume it's a file so throw an EISDIR error. For example this happens when using this with Angular Fullstack Generator (https://github.com/DaftMonk/generator-angular-fullstack).

Can we lose the .js from the project name? It's obviously javascript and it feels like bad practice to include dots in directory names.

[Bars Stacked] Visualization problem with firefox

I have problem with firefox and my chart with stacked bars.
I filled an issue on chartis-js repo (https://github.com/gionkunz/chartist-js/issues/580), but it turned out that using only javascript, with the same options and data, the charts works well also on firefox as you can see here
https://jsbin.com/wafeyu/edit?html,js,output
Any hint?

Npm install

I tried to install the directive with npm install, as per instructions, but realized it installs all the project instead of just the compiled code.

I would expect npm install to give me the "ready to use" code not the source code so I can add it as a dependency on my project. If I wanted the source code I could just make a fork of the git repo.

Binding events?

I'm confused about how to bind events to tho chart. For example, how would you bind a mouseover event to a bar chart to display a tooltip with the value of the bar?

After fresh bower install, receiving an error

bower resolved git://github.com/twbs/bootstrap.git#3.2.0
bower ENORESTARGET Tag/branch ~3.2.0+4 does not exist

package.json still refers to ng-chartist.js

This causes browserify to not be able to find the package

  "main": "dist/ng-chartist.js",

should be

  "main": "dist/angular-chartist.js",

jshint issues after fresh install

/home/gkunz/WebstormProjects/ng-chartist.js/src/ng-chartist.js
line 3 col 5 Redefinition of 'module'.
line 3 col 14 'angular' is not defined.
line 21 col 17 'Chartist' is not defined.

Update npm repo please

Current version on npm is 3.0.1

chart.update() instead of chart.detach() in watch?

I had some issues with rapidly updating charts (the watch updated them as soon as data from multiple http calls came in: gave an error Cannot read property 'removeMediaQueryListeners' of undefined, possibly related to this issue).

When I changed the code a bit to use chart.update(), the problem disappeared.

If the watch watches only the data, isn't it better te do a chart.update() instead of a complete chart recreation?

So

                // Deeply watch the data and create a new chart if data is updated
                scope.$watch(scope.data, function (newData, oldData) {
                    // Avoid initializing the chart twice
                    if (newData !== oldData) {
                        chart.detach();
                        chart = Ctrl.renderChart(elm);
                        Ctrl.bindEvents(chart);
                    }
                }, true);

becomes

                // Deeply watch the data and create a new chart if data is updated
                scope.$watch(scope.data, function (newData, oldData) {
                    // Avoid initializing the chart twice
                    if (newData !== oldData) {
                        chart.update(newData);
                    }
                }, true);

Add Plugins

Hi there,

How can I add plugins, I couldn't figure it out. It's not included in the example.

I have tried adding this attribute chartist-plugins="edDisposition1.plugin" but didn't work.

I want to add tootltip, aixs and fill donut plugins to my project.

On chartist website it looks pretty starightforward - https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin

Post install fails when Bower isn't used

Hi there,

How would you feel about removing the postinstall script from package.json?
If Bower isn't used in the project, the npm install will fail. Or am I using it wrong?
Maybe it's possible to check if Bower is installed before running the script...?

This isn't a big problem since you can always use npm -ignore-scripts, but I for one keep forgetting to do that and spend a few minutes debugging every time I try to install this package :)

Thanks!

Why the `chartist-chart-options` define to a function

chartist-chart-options as an Object type is easy to understand

Why only hard type => chartist-chart-type="Bar"

Using

// ctrl 
$scope.barType = "Bar";

// html
... chartist-chart-type="barType" ...

fails with

TypeError: e[this.chartType] is not a function
    at t.a.value (http://localhost:6040/bower_components/angular-chartist.js/dist/angular-chartist.min.js:1:1460)
    at new t (http://localhost:6040/bower_components/angular-chartist.js/dist/angular-chartist.min.js:1:1055)
    at Object.invoke (http://localhost:6040/bower_components/angular/angular.js:4452:17)
    at ident.$get.extend.instance (http://localhost:6040/bower_components/angular/angular.js:9001:34)
    at nodeLinkFn (http://localhost:6040/bower_components/angular/angular.js:8111:36)
    at compositeLinkFn (http://localhost:6040/bower_components/angular/angular.js:7543:13)
    at compositeLinkFn (http://localhost:6040/bower_components/angular/angular.js:7547:13)
    at compositeLinkFn (http://localhost:6040/bower_components/angular/angular.js:7547:13)
    at compositeLinkFn (http://localhost:6040/bower_components/angular/angular.js:7547:13)
    at publicLinkFn (http://localhost:6040/bower_components/angular/angular.js:7418:30) <div ui-view="" class="ng-scope">

A hook/callback method that returns the chart object after link

Hey,

I ran into a scenario where I needed to obtain a reference to the chartist object itself. Namely, I needed to call chartist functions (like detach) on the chart itself, so I would need to have the reference to the chart. So, basically I would need to define a hook on the chartist tag, which would return me the chart object and the element it was bound to. I thought something like this:

my tag would be <chartist on-link="handleLink" ...
my handleLink definition (for example in my controller) would be:

$scope.handleLink = function (element, chart) {
    console.log(element);
    console.log(chart);
 };

Then I think the directive could be modified something like this:
scope object:

scope: {
    // mandatory
    data: '&chartistData',
    chartType: '@chartistChartType',
    // optional
    events: '&chartistEvents',
    chartOptions: '&chartistChartOptions',
    responsiveOptions: '&chartistResponsiveOptions',
    onLink: "="
},

and the end of the link function:

link: function (scope, element, attrs, Ctrl) {
...
    if(angular.isDefined(scope.onLink)){
        scope.onLink(element, chart);
    }
}

Would that make sense?

Cheers,

J