n3-charts / pie-chart Goto Github PK

Can the gauge chart have a changing color along the chart?

this commit 7d58ff5 created memory leak issue. When pie-chart has been removed from DOM listener to resize event is still exist and doesnt allow garbage collection to do its work.
I fixed it, but cant create pull request due to permissions restriction.

How to set the height of svg, when we add this
<pie-chart data="data" options="options" >
default height is considered, Is it possible to change the height

Might be helpful to try building your stuff on a fresh virtual machine or something. I didn't have grunt before so after:

henry@dev:~/test/pie-chart$ sudo npm install -g grunt-cli
henry@dev:~/test/pie-chart$ grunt

I was greeted by:

Loading "grunt-karma.js" tasks...ERROR
>> Error: Cannot find module 'karma'
Warning: Task "karma:continuous" not found. Use --force to continue.

And after

henry@dev:~/test/pie-chart$ npm install karma --save-dev
henry@dev:~/test/pie-chart$ npm install grunt-karma --save-dev
henry@dev:~/test/pie-chart$ grunt

I got this output:

Running "jshint:gruntfile" (jshint) task
>> 1 file lint free.

Running "jshint:test" (jshint) task
>> 1 file lint free.

Running "concat:utils" (concat) task
File "/tmp/utils.js" created.

Running "concat:js" (concat) task
File "dist/pie-chart.js" created.

Running "concat:test" (concat) task
File "dist/pie-chart.spec.js" created.

Running "uglify:js" (uglify) task
File "dist/pie-chart.min.js" created.

Running "karma:continuous" (karma) task
WARN `start` method is deprecated since 0.13. It will be removed in 0.14. Please use
  server = new Server(config, [done])
  server.start()
instead.
Warning: Invalid configuration: client.args must be an array of strings Use --force to continue.

Aborted due to warnings.

Since a full circle gauge can already be implemented, how about a half circle gauge with the following abilities?

• Min-Max value labeling.
• Negative range value handling.
• Range bound coloring.

When the qty is only 1, the pie chart shows a thin slice instead of 100% of the piechart.

If i use something like the following

<span ng-show="initiative.already_voted">
    <pie-chart data="piedata" options="pieoptions"></pie-chart>
</span>

the pie isn't rendered.
However a div works perfectly fine. It isn't a CSS issue.

<div ng-show="initiative.already_voted">
    <pie-chart data="piedata" options="pieoptions"></pie-chart>
</div>

I'm trying to use the gauge chart for showing upload percentage but the bar only flickers in place instead of showing the correct value. Only when the value reaches 100 the bar catches up.
You can see it here: http://jsfiddle.net/sab3woh7/2/
Just select a large image and the problem will show it self.

Realized that I could set duration to 0 in updatePaths but that removes the animation for all.

Hello,

i use n3-charts with Twitter Bootstrap, but the chart doesn't resize, when the window is resizing.

<div class="row">
    <div class="col-md-3">
        <pie-chart data="data" options="options"></pie-chart>
    </div>
</div>

When the element's parent's offset width and height aren't defined you default to 900x500px and there's no way to set that in the directive.

The offset widths of parent are 0 when the element is hidden with display:none. Which means if we want to hide the pie charts and then display them on some other event we're stuck with this size.

Can you make it so that the directive accepts width and height defaults or something?

Also, side note. I ran into this issue because I did a fresh install and you're version hasn't changed, so previous defaults 150x150 were changed, and we were using those dimensions.

Any interest in bumping this or making it a broader semver range?

Just trying to help here...

In the docs,

1. There is a spelling error wan should read want.
2. The sentence is confusing. The array can contain at least two rows, or only one probably means

The data must be in an array:

• If you want a Pie Chart, the array must contain at least two rows.
• if you want a gauge, the array should contain only one row.

-- Original text.
Data

Your data must be an array. Depending whether you wan a pie/donut or a gauge, the array can contain at least two rows, or only one.

If you'd like, I'd be happy to help out with the docs... let me know.

Thanks

Joe (CreativelyMe)

Is there any way to override the CSS for the legend so that it displays to the side or below the pie chart?

I was wondering if there's a way to represent a value as currency in the legend?

Just wanted to let you know that v1.0.0 available via bower is from 2013 and lacks some features like colorComplement.

Maybe it's time to tag another release? 😺

Getting below error for d3.js version 4.2.3

TypeError: Cannot read property 'arc' of undefined
at Object.getTools (pie-chart.min.js:5)
at Object.updatePaths (pie-chart.min.js:5)
at n (pie-chart.min.js:5)
at m (pie-chart.min.js:5)
at Object.fn (pie-chart.min.js:5)
at m.$digest (angular.min.js:sourcemap:132)
at m.$apply (angular.min.js:sourcemap:135)
at angular.min.js:sourcemap:19
at Object.e [as invoke] (angular.min.js:sourcemap:39)
at d (angular.min.js:sourcemap:19)

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js

Would you pick an license and indicate that in your docs? I'd like to use pie-chart but need to understand the licensing. Thanks!

I am using bootstrap with angular and when using this...

<div ng-show="settlementanalysis" class="row">
  <div class="col-md-12">
    <div style="height:300px ; width:300px">
      <pie-chart data="graph1data" options="graph1options" class="chart"></pie-chart>     
</div>
</div>
</div>

The chart size is always 900x500
Whenever i take away the ng-show attribute from the initial div it works ok, but since i am using tabs i need that attribute because the graphs won't be there all the time.
What can i do ?

Hi,

Thanks for this awesome easy to use charts.

I have a small enhancement request:
Showing label after clicking on the pie chart would be very useful.
There is no label in pie-chart, label is visible only in case of donut charts.

You list npm install but I cannot find an entry for it on npmjs?

On a page, I have two pies that are comparisons of two objects.

Problem, even if the legend is good, there is still the problem of the datas sorting.

Given those two datasets :

$scope.datas = {
    set: [
        {label: "Type 1", value: 17, color: "#1f77b4"},
        {label: "Type 2", value: 3, color: "#ff7f0e"},
        {label: "Type 3", value: 8, color: "#2ca02c"},
        {label: "Type 4", value: 1, color: "#000000"}
    ],
    sat: [
        {label: "Type 1", value: 5, color: "#1f77b4"},
        {label: "Type 2", value: 13, color: "#ff7f0e"},
        {label: "Type 3", value: 3, color: "#2ca02c"},
        {label: "Type 4", value: 6, color: "#000000"}
    ]
};

Colors are the same, objects order is exactly the same, just the valuethat change.
And the sorting will follow the descending order of each datasets following value.

That's not good, I'm using those to quickly generate images from those pies, and the order is really important for the client.

Any place/line where i can change that, or is there an option to modify to avoid that problematic automatic sorting ?

How to you change the size of the pie chart

I need to generate a number of pie charts dynamically based on data from a database. So I don't know how many pie charts I need to create so I need the data attribute to be string that is generated via string interpolation.

This way gives a syntax error:

I tried to modify the custom pie directive to something like this in the link function:

$parse(attrs.data)($scope.$parent);

But I get the following error:
TypeError: u.map is not a function
at Object.n as pie
at Object.updatePaths (pie-chart.js:100)
at draw (pie-chart.js:44)
at hard_update (pie-chart.js:30)
at Object.fn (pie-chart.js:56)
at n.$get.n.$digest (angular.js:14308)
at n.$get.n.$apply (angular.js:14571)
at l (angular.js:9698)
at M (angular.js:9888)
at XMLHttpRequest.F.onload (angular.js:9829)

Am I overlooking something simple or does the pie-chart directive not support this use case?

Anyways thanks for the help!

When changing the size of the window/container, the chart doesn't respond to the size change. This causes ugly overlaps. Is there any way to force the chart to refresh/render again?