Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dot Chart Issues #532

Closed
skirscher opened this issue Nov 8, 2016 · 14 comments
Closed

Dot Chart Issues #532

skirscher opened this issue Nov 8, 2016 · 14 comments

Comments

@skirscher
Copy link

skirscher commented Nov 8, 2016

I wanted to display a scatter plot using the "dot" chart with zoom enabled. However, using the latest version of n3-charts, I was unable to get the zoom feature to work properly. I reverted back to an earlier version of n3-charts (v1.11) and was able to get the zoom feature functional but now there is a line being rendered between each of the dots which I cannot figure out how to remove. It's making my scatter plot look like a very interesting starburst. What confuses me even further is that the current version of n3-charts doesn't do this. Any help that can be provided with either resolving the lines issue or getting the most current version of n3-charts to work with the zoomable feature would be greatly appreciated.

Note: I am getting a sample set of data from an Oracle database every time I load/reload the page as my data set for the chart. This being said, here is the $scope.options part of my code from my controller:

$scope.options = { margin: { bottom: 80, right: 80 }, pan: { x: true, x2: false, y: true, y2: false }, series: [{ y: "y", dataset: "numerical", key: "x", label: "Test", color: "hsla(88, 48%, 48%, 1)", type: ["dot"], id: "mySeries0" }], axes: { x: { key: 'x', zoomable: true } }, hideOverflow: true, zoom: { x: true, y: true } };

@lorem--ipsum
Copy link
Member

Hi ! What do you mean by "work properly" ?

@skirscher
Copy link
Author

skirscher commented Nov 8, 2016

The zoom was not working with the current version...at all.

@skirscher
Copy link
Author

It also isn't working in one of the codepen examples I found through this GitHub:
http://codepen.io/anon/pen/JXWavo

@lorem--ipsum
Copy link
Member

This is something we should totally communicate more about : zooming works by pressing alt and clicking. Simple click and drag is dedicated to panning. Let me know if that helps :)

@skirscher
Copy link
Author

That does help. Definitely needs to be documented better, I had been double clicking all this time... 0_o

@skirscher
Copy link
Author

skirscher commented Nov 8, 2016

Okay so when I stated it helped, I was only looking at the codepen project. When I went to replace the older versions of n3-chart's library files on my server with the newest/latest version (still keeping d3.js version 3.5); it broke my chart. Now it is giving me a the following error:

TypeError: this.sets[t.dataset] is undefined
e</e.prototype.getDatasetValues() line-chart.min.js:1
n</i.prototype.updateData() line-chart.min.js:2
i</e.prototype.updateSeries/<() line-chart.min.js:2
Co.each/<() d3.v3.min.js:3
Y() d3.v3.min.js:1
Co.each() d3.v3.min.js:3
i</e.prototype.updateSeries() line-chart.min.js:2
i</e.prototype.updateSeriesContainer() line-chart.min.js:2
i</e.prototype.softUpdate() line-chart.min.js:2
bound () self-hosted
t() d3.v3.min.js:1
e</t.prototype.trigger() line-chart.min.js:1
e/this.link/d<() line-chart.min.js:2
e</t.debounce/</n<() line-chart.min.js:1

Currently I am setting the $scope.data to a hard coded array. Here is my $scope.data and $scope.options;

$scope.data = [{ x: 262, y: 4198 },{ x: 729, y: 2300 },{ x: 608, y: 717 },{ x: 150, y: 84 },{ x: 229, y: 357 },{ x: 149, y: 95 },{ x: 849, y: 986 }, { x: 74, y: 325 },{ x: 129, y: 239 },{ x: 198, y: 469 },{ x: 367, y: 586 },{ x: 236, y: 360 },{ x: 182, y: 260 },{ x: 101, y: 144 },{ x: 505, y: 4287 }, { x: 183, y: 779 },{ x: 340, y: 683 },{ x: 184, y: 94 },{ x: 475, y: 408 },{ x: 345, y: 797 },{ x: 236, y: 613 },{ x: 205, y: 409 },{ x: 242, y: 402 }, { x: 395, y: 678 },{ x: 371, y: 645 },{ x: 494, y: 648 },{ x: 314, y: 1848 },{ x: 842, y: 216 },{ x: 35, y: 212 },{ x: 378, y: 819 },{ x: 212, y: 307 }, { x: 344, y: 284 },{ x: 191, y: 412 },{ x: 110, y: 345 },{ x: 332, y: 177 },{ x: 361, y: 427 },{ x: 382, y: 1381 },{ x: 98, y: 142 },{ x: 409, y: 484 }, { x: 324, y: 964 },{ x: 567, y: 837 },{ x: 265, y: 357 },{ x: 269, y: 440 },{ x: 168, y: 273 },{ x: 165, y: 451 },{ x: 136, y: 570 },{ x: 508, y: 500 }, { x: 421, y: 605 },{ x: 208, y: 419 },{ x: 233, y: 1459 },{ x: 215, y: 83 },{ x: 488, y: 1167 },{ x: 394, y: 372 },{ x: 102, y: 377 },{ x: 460, y: 839 }, { x: 223, y: 664 },{ x: 180, y: 16026 },{ x: 119, y: 287 },{ x: 324, y: 528 },{ x: 320, y: 453 },{ x: 194, y: 1187 },{ x: 208, y: 443 },{ x: 204, y: 230 }, { x: 205, y: 381 },{ x: 290, y: 946 },{ x: 294, y: 483 },{ x: 238, y: 1778 },{ x: 532, y: 1274 },{ x: 651, y: 1441 },{ x: 515, y: 451 },{ x: 229, y: 307 }, { x: 340, y: 758 },{ x: 342, y: 2503 },{ x: 189, y: 236 },{ x: 172, y: 67 },{ x: 52, y: 65 },{ x: 415, y: 1605 },{ x: 319, y: 488 },{ x: 591, y: 1311 }, { x: 281, y: 326 },{ x: 527, y: 416 },{ x: 209, y: 339 },{ x: 99, y: 140 },{ x: 307, y: 433 },{ x: 910, y: 708 },{ x: 255703, y: 52063 },{ x: 23, y: 213 }, { x: 809, y: 1387 },{ x: 246, y: 198 },{ x: 193, y: 515 },{ x: 366, y: 172 },{ x: 547, y: 903 },{ x: 282, y: 414 },{ x: 98, y: 100 },{ x: 267, y: 161 }, { x: 366, y: 1051 },{ x: 423, y: 334 },{ x: 356, y: 1517 },{ x: 97, y: 106 },{ x: 293, y: 1275 },{ x: 433, y: 331 },{ x: 194, y: 85 },{ x: 408, y: 552 }, { x: 174, y: 2515 },{ x: 684, y: 706 },{ x: 166, y: 198 },{ x: 395, y: 331 },{ x: 256, y: 265 },{ x: 138, y: 632 },{ x: 565, y: 582 },{ x: 271, y: 446 }, { x: 320, y: 299 },{ x: 92, y: 165 },{ x: 280, y: 771 },{ x: 243, y: 280 },{ x: 398, y: 84 },{ x: 791, y: 2276 },{ x: 308, y: 499 },{ x: 164, y: 357 }, { x: 416, y: 424 },{ x: 113, y: 256 },{ x: 261, y: 165 },{ x: 31, y: 54 },{ x: 365, y: 765 },{ x: 118, y: 159 },{ x: 49, y: 279 },{ x: 125, y: 321 }, { x: 63, y: 246 },{ x: 406, y: 415 },{ x: 296, y: 286 },{ x: 377, y: 285 },{ x: 536, y: 1246 },{ x: 113, y: 188 },{ x: 300, y: 407 },{ x: 195, y: 188 }, { x: 259, y: 264 },{ x: 335, y: 445 },{ x: 354, y: 556 },{ x: 515, y: 300 },{ x: 414, y: 454 },{ x: 323, y: 399 },{ x: 206, y: 518 },{ x: 157, y: 209 }, { x: 226, y: 324 },{ x: 205, y: 1082 },{ x: 523, y: 566 },{ x: 287, y: 78 },{ x: 122, y: 409 },{ x: 199, y: 396 },{ x: 370, y: 631 },{ x: 212, y: 940 }, { x: 494, y: 319 },{ x: 264, y: 1741 },{ x: 379, y: 2310 },{ x: 339, y: 1599 },{ x: 316, y: 378 },{ x: 187, y: 353 },{ x: 289, y: 1922 },{ x: 217, y: 345 }, { x: 12, y: 37 },{ x: 153, y: 83 },{ x: 408, y: 1115 },{ x: 520, y: 380 },{ x: 211, y: 348 },{ x: 200, y: 185 },{ x: 461, y: 263 },{ x: 522, y: 457 }, { x: 496, y: 391 },{ x: 98, y: 93 },{ x: 131, y: 449 },{ x: 386, y: 1459 },{ x: 552, y: 822 },{ x: 100, y: 458 },{ x: 306, y: 415 },{ x: 726, y: 587 }, { x: 357, y: 264 },{ x: 140, y: 536 },{ x: 349, y: 314 },{ x: 388, y: 743 },{ x: 368, y: 425 },{ x: 216, y: 1510 },{ x: 155, y: 324 }];

$scope.options = { margin: { bottom: 80, right: 80 }, series: [ { y: "y", dataset: "numerical", key: "x", label: "Test", color: "hsla(88, 48%, 48%, 1)", type: ["dot"], id: "mySeries0" }], axes: { x: { key: 'x', zoomable: true } }, hideOverflow: true };

Any suggestions?

@lorem--ipsum
Copy link
Member

Hm. Any chance you could post a CodePen that replicates the issue ? That'd help tremendously

@skirscher
Copy link
Author

I will see what I can do...

@skirscher
Copy link
Author

skirscher commented Nov 8, 2016

I was able to get a plunkr together recreating the errors. Hope this helps:
http://plnkr.co/edit/TR5mmmI0hQpSL0dkwGcX?p=preview

Suggestions?

@lorem--ipsum
Copy link
Member

lorem--ipsum commented Nov 9, 2016

Okay here's a working version.

You forgot a couple of things :

  1. the options were missing some stuff (the options structure changed from v1 to v2, I think you had v1 options especially regarding the series key)
  2. the data structure wasn't right (again, probably v1 data — we now use an object that contains datasets)
  3. the LineChart's CSS file wasn't linked
  4. the data wasn't sorted on the abscissas and contained an extreme point (see the comment in the code)

Hope that helps. You might wanna give a height and a width to your chart, otherwise it'll get its dimensions wrong (useful for tooltip positioning as well I think). Also, LineChart's default style is more suitable for display on a light background, so you might wanna change that as well (but that's more of a personal opinion ^^).

@skirscher
Copy link
Author

Thanks for your help. I was able to get things working by switching up the options and fixing how I was creating my data. The color scheme is actually something that was decided upon by the project lead so don't think that will be changed. However, I will most likely be setting the height/width of chart. In doing so, would this affect the scale? Also, the higher numbers are going to end up in our data because it's related to job file count averages among other stats we are reporting upon. I will bring up considering the removal of really high counts that wouldn't correlate to the rest of the data and just be a random spike, thanks for your input.

@skirscher
Copy link
Author

One other question, any way to adjust the scale? Would like to be able to keep it smaller so that it shows the correlation better, even when there are the huge spikes.

@lorem--ipsum
Copy link
Member

Yeah, you can use min and max on the axes in the options to customize the chart.
Take a look at the documentation for moar.

@skirscher
Copy link
Author

skirscher commented Nov 9, 2016

*more
K, thanks! ^_^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants