chinmaymk / angular-charts Goto Github PK

Hey,

I have a little issue with the tooltip of a chart while I'm using angular-charts becuase the tooltip-position is fixed to the lower left corner. The X and Y value of the tooltip is set correctly from line 760 in the file angular-charts.js (version 0.2.0).

Does anyone know this problem or have a hint to solve it?

Thank you! :-)
Andy

I was using angular-charts for a month when I needed a resize function to change the width of the graph dynamically. I downloaded the new version today which has this functionality (thank you), but I got an error when the page loads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mdsApp due to:
Error: [$injector:modulerr] Failed to instantiate module angularCharts due to:
Error: [$injector:modulerr] Failed to instantiate module angularChartsTemplates due to:
......7).
Am I missing something? Looks like there is no template. But I also put the "template" folder and I get the same error. Or maybe some directives have changed..

As for now, I solved the resize problem merging the specific code to the older version of angular-charts I had.

Please add a started template to codepen.io, I tried but failed!

Its not like I didn't try to do this myself ... could you just try to fork and fix that.
http://codepen.io/pulkitsinghal/pen/qitGI

It would be very cool if the charts were able to properly respond to the element the directive is applied to changing its height or width. This is (as far as I can see) currently not happening. It seems to me this is because the totalWidth and totalHeight are fixed from the moment the directive is compiled.

It may be possible for the height and width to be undefined initially by design waiting for some data so the element should be able to handle those cases as well (So not as in #12)

Im needing to be able to add mini graphs in a table/ list -- the idea is that the graph should not take more space than a 1.5 line height, and hence I would want to suppress the labels on the x and y-axis, as well as suppressing the axies.

Some setting like:
$scope.config = {
labels:false,
axis: {
x: "none", // or 'lineonly', 'labels'(default)
y: "none" // or 'lineonly', 'labels'(default)
}

There is an issue on jsfiddle where $rootElement is body so https://github.com/chinmaymk/angular-charts/blob/master/src/angular-charts.js#L887 fail finding body into body 😑.

Any idea on how to fix this on a clean way?

Events mentioned in config are as follows:

var config = {
  mouseover: function() {},
  mouseout: function() {},
  click: function() {},
}

whereas what is actually expected using pie chart is onmouseover and onmouseout instead of mouseover and mouseout respectively:
https://github.com/chinmaymk/angular-charts/blob/master/src/angular-charts.js#L623
https://github.com/chinmaymk/angular-charts/blob/master/src/angular-charts.js#L634

click seems to work just fine:
https://github.com/chinmaymk/angular-charts/blob/master/src/angular-charts.js#L641

I do not see tooltips when using ac-charts in a modal window. Do you know if this is a known issue. I see that my HTML is trying to render the tooltip I just do not see it. Any tips?

When all the data is 0, I get the following error:

Error: Invalid value for <path> attribute d="M0,-177.5A177.5,177.5 0 1,1 NaN,NaNL0,0Z"

I've replicated the issue here: http://plnkr.co/edit/7kRfHHSyC7QtaFHsjkYh?p=preview

Is there something I am doing wrong?

Directive scope binding fails on AngularJS v1.2.2.

Scope.acData, scope.acChart and scope.acConfig are all undefined

Been reading about the failures and looks to be an async issue due to promise returned instead of actual data.

Html:-

Controller:-

function TestController($scope, $http) {
$scope.chart = {
series: ['Sales', 'Income', 'Expense'],
data: [{
x: "Jack",
y: [100, 210, 384],
tooltip: "this is tooltip"
},
{
x: "John",
y: [300, 289, 456]
},
{
x: "Stacy",
y: [351, 170, 255]
},
{
x: "Luke",
y: [54, 341, 879]
}]
};
$scope.config = {
labels: false,
title: "Savings",
legend: {
display: true,
position: 'right'
},
};

Hi,
I'm trying to use angular-charts, but I keep running into the following error: Error: [$rootScope:infdig]. What I've noticed is that configuration is being called a lot of times, triggering the error every 5 times it is called. (Due to the $digest cycle).

The graph gets drawn without a problem, might I be doing something wrong?

The javascript I'm using is:

orderprices.map(function (item) {
    var dataItems = [];

    var targetProduct = $scope.products.filter(function (p) {
        return p.productNo === Number(item.productNo);
    })[0];

    if (!targetProduct.graphData) {
        targetProduct.graphData = {
            series: [],
            data: []
        };

        targetProduct.lineConfig = {
            chartType: 'line',
            title: targetProduct.name,
            tooltips: true,
            labels: false,
            legend: {
                display: true,
                position: 'left'
            }
        };
        $scope.targetProducts.push(targetProduct);
    }

    if (targetProduct.graphData.series.indexOf(item.supplier.name) == -1) {
        targetProduct.graphData.series.push(item.supplier.name);
    }

    dataItems = targetProduct.graphData.data.filter(function (d) {
        return d.x === moment(item.quoteDatetime);
    });

    if (dataItems.length == 0) {
        dataItems = {
            x: moment(item.quoteDatetime),
            y: [ item.avRate ]
        };
        targetProduct.graphData.data.push(dataItems);
    }
    else {
        dataItems[0].y.push(item.avRate);
    }
});

The view logic is:

<^div class="row">
    <^div data-ng-repeat="product in targetProducts" data-ac-chart="chartType" 
            data-ac-data="product.graphData" data-ac-config="product.lineConfig"  class='chart hide-x-axis'><^/div>
<^/div>

The hide-x-axis class sets the opacity of the titles on the x-axis to 0.

I tried the demos in IE 11, which is my default browser, and many other's as well. The legend colors aren't rendering.

This isn't your fault, but it's frustrating to see how many people don't test their code against IE versions. I know it's not fun, but IE has a huge part of the market, and needs to be treated as a first class citizen. Of course, I'm sure I'll lose cool points for saying that :).

Other than that, nice work!

I'm not sure what structural changes bower (or another processor?) is doing to the source file, but I can't run my page against the source file, only the /dist files. Should I even be able to?

As a result of this, changes I'm making are directly in the /dist files. When/if I pull it back into the source file, I'm not sure how to make sure it works, unless I setup the compiler.

Hopefully there's a simple answer and I'm just way off base.

Looks like a very promising project and I would love to use it. However, the most recent commit was 3 months ago, @chinmaymk is the project still active? If not, we may want to seek another maintainer to keep up the dev efforts, a number of pending pull requests that will be make the project better and someone should step up if @chinmaymk has no time/interest to continue.

Thoughts?

Hi,

I personally would like to use angular.js without jQuery.
How does it sound comfortable to make angular-chart.js independent from jQuery?

As I looked at the code, it does not seem too difficult to code without jQuery.
So, unless you need legacy browser support, it may make sense.

Trying to plot numbers from a dice, i.e. 1 to 6. The bar chart ranges all the way up to 10. This should be configurable.

Also when plotting 4 dice throws: 1,3,5,2. The bar chart scale rescales to steps ranging up to max 60. The max value of the chart should be configurable

.

In case chart height is not set, it is very easy to end up with this D3 error:

Error: Invalid negative value for <svg> attribute height="-18" 

You might want to add a warning there to make the library nicer to use.

I'd like to plot a line graph and a bar chart in the same chart with 2 different ordinate axis. It looks like it's not possible with this directive. Does anyone knows if such a directive exists?

Cheers,
Maxime

This is caused by the following lines in prepareData function:

angular.extend(config, scope.acConfig);
config.colors = config.colors.concat(defaultColors);

Every time the chart refresh config.colors = config.colors + default colors
After 4 chart refresh config.colors equal to (Notice the multiple repeats) -

["steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)", "steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)", "steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)", "steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)", "steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)", "steelBlue", "rgb(255,153,0)", "rgb(220,57,18)", "rgb(70,132,238)", "rgb(73,66,204)", "rgb(0,128,0)"] 

and it keep growing every refresh...

I fixed it by changing the lines to -

angular.extend(config, scope.acConfig);
if (scope.acConfig.colors) {
      config.colors = config.colors.concat(defaultColors);
}

This allows PRs to not include the /dist folder that's a mess to merge.

When we're releasing a new version we simply do a git add --force dist and tag the version of the release.

Seems like an side effect of removing jquery

No matter what I give for the 'tooltip' property in 'data', I always get the 'y' value of the bar as the tooltip. Not sure what gives...

Thanks

• ashok

Line Chart

When the data array is empty (no points in series)

$scope.data = {
    series: ["My Series"],
    data: []
};

there are exceptions thrown:

TypeError: Cannot read property 'x' of undefined
    at lineChart (http://localhost:3001/bower_components/angular-charts/dist/angular-charts.js:377:84)
    at init (http://localhost:3001/bower_components/angular-charts/dist/angular-charts.js:90:9)
    at Object.fn (http://localhost:3001/bower_components/angular-charts/dist/angular-charts.js:796:9)
    at Scope.$digest (http://localhost:3001/bower_components/angular/angular.js:12251:29)
    at Scope.$apply (http://localhost:3001/bower_components/angular/angular.js:12516:24)
    at http://localhost:3001/bower_components/angular/angular.js:1382:15
    at Object.invoke (http://localhost:3001/bower_components/angular/angular.js:3869:17)
    at doBootstrap (http://localhost:3001/bower_components/angular/angular.js:1380:14)
    at bootstrap (http://localhost:3001/bower_components/angular/angular.js:1394:12)
    at angularInit (http://localhost:3001/bower_components/angular/angular.js:1307:5) 

Expected behaviour

Empty chart is rendered

Thanks you

The ref to http://chinmaymk.github.io/angular-charts/ is 404'ing off of the github page. Can you relink to a bit of a walkthrough?

Thanks

This error occurs when chart type is pie

I'm using jQuery 1.11.0 with AngularJS 1.3.0
I'm guessing something in this version of Angular has changed... When I run the exact example, I get an error in angular-charts on line 48 (initially) about the fact that .width() does not exist on the "element" variable passed to .link()

I took a guess that .width() was expected to be coming from jQuery and wrapped "element" with $(element) to get it to return a jQuery element and it worked. I had to do this for every .width() and .find() call on the "element" variable. After doing so, everything worked and my chart displayed beautifully.

For very small chart having the axis graduation makes it useless because impossible to read. Is it possible to hide the axis?

At the moment I'm doing it in CSS with the following code:

#chart .y.axis .tick,
#chart .x.axis .tick {
    display: none !important;
}

But it's just hiding the ticks and there is now a blank section where the axis tick label should be.

Dunno if this is a stupid question, but if I choose the pie chart from:

http://chinmaymk.github.io/angular-charts/

And i move my mouse in the pie-chart while it is drawing the animation. The chart will get some nasty gaps and break. This will only happen if the user is moving the mouse within the graph.

Screenshot from 2014-05-08 16:53:35.png | uploaded via ZenHub

Great work!
This is my first issue raised on Github, so let me know if the protocol is right.

The return values from the click method for bar charts seems to be off.

note on line 282

.on("click", function(d) {
    config.click.call(d, d3.event);
    scope.$apply();
 });

there is an extra protoype call I think, that is consuming the first value.

everywhere else it is

 .on("click", function(d) {
      config.click(d, d3.event);
      scope.$apply();
 });

See plunker

Thanks

When using simple x - y values to display on the bar chart, it will always use the same color. Which makes sense, because of the way the json for angular-charts is built. Would it be possible to use different colors per bar when there's only one series? Or perhaps give the option in config?

Hello,

I have tried to use it with promises but it won't work (exemple: http://plnkr.co/edit/qzZd7tHAIeXRZg4YyzQB?p=preview).
I'm not sure this library is able to work with promises or not, if it is I don't see my mistake, if it's not, did anyone find a work around to have such behavior ?

I have been developing with ionic framework (http://ionicframework.com/) v0.9.17 and angular-charts worked inside a tag.

Today I migrated to Ionic, v0.9.21 and angular-charts thows an error: TypeError: Object [object Object] has no method 'width'
at e (http://localhost/MP2JSMobile/Ionic2/lib/js/angular-charts.min.js:1:10690)

Any idea what's happening?

Regards,

Andrés

Resulting in TypeError: event is undefined on hover of a pie chart...

The ac-data object accepts and invalid JSON object structure. The example below comes from your example, but this is not properly formatted JSON object notation.

{
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data : [{
x : "Sales",
y: [100,500, 0],
tooltip:"this is tooltip"
},
{
x : "Not Sales",
y: [300, 100, 100]
},
{
x : "Tax",
y: [351]
},
{
x : "Not Tax",
y: [54, 0, 879]
}]
}

When I implemented innerRadius semantic from the #31 I used most of the code from the pr. Now I ended using it in a project and stayed in doubt on the semantics, right now the value you define for innerRadius means the value of the "dough" part of the pie chart. At first I was confused and assumed it would be the radius of the donut hole. What do you guys think?

One way or another, i end up with huge spaces that I don't know where they come from. There is a huge margin between the container of the pie chart and the pie chart itself

In a responsive/fluid width layout it does not rescale itself

I want do a stacked bar chart like below, is there a way to do that?
http://strongriley.github.io/d3/ex/stack.html

I want to hide the x and y axis in line chart and just display the chart like a sparkline. Let me know how to do it?

Hi,
The file angular-charts.js is missing the definition of angularChartsTemplates module,
and because of that the browser throw the following error :

Uncaught Error: [$injector:modulerr] Failed to instantiate module cloudshareApp due to:
Error: [$injector:modulerr] Failed to instantiate module angularCharts due to:
Error: [$injector:modulerr] Failed to instantiate module angularChartsTemplates d......1)

Need to add release notes for 0.1.0 release

Hi,

I load data dynamically, your code was causing issues when I initiate it without data. So I added a check for undefined params and returned if they are not defined in the "init()" function.

Adi

ReferenceError: event is not defined @ http://chinmaymk.github.io/angular-charts/js/angular-charts.min.js:1

This error is raised whenever an event callback is called, like:

config.mouseover(d, event);

You can see it in action on example page:
http://chinmaymk.github.io/angular-charts/
just hover over bar in a bar chart displayed by default.

Hi!
It would be nice if your library was available in bower :-)
http://bower.io/#registering-packages

Is there a way to config this behavior?

Please see:
http://plnkr.co/edit/xXODpR?p=preview

The update button just adds 1 to Laptops data series.
This triggers a complete repaint

I really think this project should have unit tests!