Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jan 30 2019 22:34
    SteveCapetta opened #3482
  • Nov 08 2018 23:28
    leemi edited #3481
  • Nov 08 2018 23:28
    leemi opened #3481
  • Oct 27 2018 00:40
    rstarkov edited #3480
  • Oct 27 2018 00:40
    rstarkov edited #3480
  • Oct 27 2018 00:34
    rstarkov opened #3480
  • Oct 19 2018 14:59
    stephanwlee opened #3479
  • Oct 14 2018 14:15
    waltonseymour opened #3478
  • Oct 04 2018 09:20
    VasylKoretskyy closed #3477
  • Oct 04 2018 09:19
    VasylKoretskyy opened #3477
  • Oct 01 2018 00:47
    waltonseymour opened #3476
  • Sep 21 2018 20:22
    pastewka edited #3475
  • Sep 21 2018 20:21
    pastewka synchronize #3475
  • Sep 21 2018 20:11
    pastewka synchronize #3475
  • Sep 21 2018 18:38
    pastewka opened #3475
  • Sep 13 2018 11:21
    Fatou1993 opened #3474
  • Jul 20 2018 19:41
    riley-steele-parsons opened #3473
  • Jun 28 2018 15:32
    reckoner opened #3472
  • Jun 04 2018 23:01

    themadcreator on v3.8.3


  • Jun 04 2018 23:00

    themadcreator on 3.8.3


Scott Gerlach
@marcozanghi I didn't have time to work it all out, but I would probably do something like this (and fix the not displaying issue) https://jsfiddle.net/gt6j6oLj/
Tim Wisniewski
Here's a demo of that .entitiesIn() issue -- if you watch the console.log, you'll notice that your selection excludes the month you started on, unless you start your drag slightly before that month.
Any idea why?
Tim Wisniewski
I posted the issue palantir/plottable#3428 - I don't suppose anyone's active in here today? :-/ bit of a blocker
Tim Wisniewski
@bluong sorry to bug you, but is there any chance you might be able to help? i love the concept behind plottable, but i've run into a wall here and I'm not sure what to do.
Nick Dodd
Hi. I am looking to plot some time based financial data as an area plot. For this I need the area to change color when a negative value is plotted (positive will be blue, negative will be red). Whats the best way of achieving this? I have tried 2 different plots for positive and negative, but the areas don't align.
Fleming Tech
I'm just getting started with this cool library, and I'm trying to replicate a donut chart I had in nv3d. I can set the inner radius in what appears to be pixels, but I actually would like a percentage of outer radius; something like 75%. That way as the chart resizes, it still maintains an aspect ratio of the outer diameter. Is this possible currently?
Eugene Grigorevskiy

Hello there. Currently stack with a strange requirement using Plottable JS and not sure if its possible with current API (or at least haven't found the appropriate API for that).

  • I need to display a horizontal time axis with relative time labels (now / 1h ago / etc..).

The best I found for me is to use the categorical axis as I haven't found how to force time axis make for example 1h step from the maxDomain value.
But can someone help me and say how can I limit the number of ticks for categorical axis?...

Daniel Sjölie
Hi all. Just a note, that as a newcomer looking at Plottable it looks very interesting as a D3 v4 non-react chart library but two things that make me hesitant at this stage are: 1) Documentation online not updated for last major version. 2) Unpkg link from github does not work. Seems this works if I just remove the .min part of the link though.
Fleming Tech
I agree it's got short comings in the docs department. But I have to it's one of the best organized/written charting libraries in typescript that I've seen to date. I think that's the key, out side of some really good examples, the code is actually an easy way to understand if something has an feature or not. I was able to add features to the code on my first day.
Hi guys, I am trying to create a mini chart slider using xdragbox, however I want the selector to have fixed width and the selector should only be movable but not be recreated again in the chart i.e. when I move the pointer to any point in the chart and drag it shouldn’t be allowed. Also, I want the selector to select only a single bar at a time and not be allowed to select multiple bars at a same time
Screen Shot 2018-01-30 at 3.09.48 AM.png
something like above
Screen Shot 2018-01-30 at 3.13.14 AM.png
And the above one shouldn’t be allowed, i.e. multiple bar is being selected at the same time
Brian Hulette
hey everyone, I was just curious if anyone could give me any insight into how you're using typedoc to generate your API docs. I like the way the plottable docs are organized and I'd like to replicate it, but it doesn't look like any typedoc configuration or script is committed to the repo.

Hi folks! I'm new to Plottable and JS. I'm trying to figure out the best way to implement a dynamically updated chart. (scenario: every second my script would query the database, and add new timeline results to an existing dataset). I can see that I can update the ENTIRE dataset with the new values pushed into the array, but is there a better way of doing this, just by adding the new values to the dataset. <body>
<svg id="example"></svg>
<script type="text/javascript">
var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();
var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
{ x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];

var plot = new Plottable.Plots.Line()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return Math.sqrt(d.y); }, yScale)

window.addEventListener("resize", function() {

var xx = 6;
$('#example').ready(function() {
setInterval(function() {
data.push({x: ++xx, y: (Math.random() * 10 - 5)});
// need: plot.addLatestValuesToDataset(my_new_values);
plot.addDataset(new Plottable.Dataset(data));
}, 2000);


@Bob12345 I think I have figured it out-- you can access the datasets' data array and push new values onto it. Adding a dataset every time actually adds whole new set of data and is not something you'd want to do.
var xx= 0;
$('#content').ready(function() { 
    setInterval(function() {
        var myData0 = plotGroupTop.components()[0].datasets()[0].data();
        var myData1 = plotGroupBottom.components()[0].datasets()[0].data();
        var t = (myData0 === plotGroupTop.components()[0].datasets()[0].data());
                    "output: <p>" + " 0:" + myData0.length+ "  1:" + myData1.length + " ===" + t            
        var mydate = new Date(myData0[myData0.length - 1].date);
        mydate = mydate.setHours(mydate.getHours()+ (++xx ));        
        myData0.push({date: mydate, value: 
        myData0[myData0.length - 1].value + Math.random() * 2 - 1
        myData1.push({date: mydate, value: 
        myData1[myData1.length - 1].value + Math.random() * 2 - 1
    }, 200);
Sacha Zvetelman
Hey everyone, does someone have a working example of Plottable being used with Aurelia? Cheers!
Samuel Mburu
hi all, it's been awhile since I've been here (when 2.9.1 was the hot newness haha), I'm upgrading and wondering to myself will plottable v4 depend on d3v5 if so, when will that happen?
just some backround -- I decided to go with d3v3 and plottableV2.x, but now after missing out on so many perf updates I wonder if it was a mistake to not go with d3v4 and plottableV3... I'm trying not to do the same again. Any thoughts, words of wisdom?
@Bob12345 if i recall properly you can add the new data to the array data object under the dataset and then tell the plot to redraw itself and that will get you there (I did this with plottableV2.9.1) This should still work if dataset is constructed the same way as in v2, but I haven't read 3.X docs so i'm not sure --- good luck
Samuel Mburu

@SachaZvetelman how do you mean? plottable and aurelia are just javascript can you explain in more detail what you are trying to do with aurelia?

i work with angular + plottableV2.9.1 to display visualizations on my company website. the basic idea is create your plottable chart and then layer on anything extra in either d3(svg things) or with angular(data from server type of things). When it comes to interacting with angular(or insert framework of choice here) you'll have to incorporate plottable chart creation into the angular event/dispatch loop so that when any data changes your chart changes accordingly. I can go into more detail, but let me know if what i say makes sense

Hey there, I have a question about switching to a newer version of Plottable as well. I'm still on version 2.5 and have build pretty complex plots with lots of different charts. Can I expect the chart update to be noticeable faster when switching to a newer version?
@samuelmburu thanks for your reply. I think I have figured it out. took a little head-scratching since I'm new to js and plottable. it's plotting!!!! :smile:

@karolinkas using

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js" charset="utf-8"></script>

<script src="http://unpkg.com/plottable@3.6.1/plottable.js" charset="utf-8"></script>
I think d3 has some breaking/migration pages on github

jack fuller
Screen Shot 2018-05-16 at 14.19.00.png
Hi All, I'm using a Segment plot to overlay a Line plot ad have a couple of questions. 1. Is this good prcactive or should I be using GuideLineLayer? Secondly, can I add labels to the top of the Segment lines, as above? Thanks!
Luke LaFountaine

I am just starting to play around with Plottable and am having trouble even creating a simple segment graph like the one here: http://plottablejs.org/components/plots/segment/

I am using version 3.8.3

var Plottable = require("plottable");

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();

var plot = new Plottable.Plots.Segment()

The last line is erroring out: Uncaught TypeError: Cannot read property 'style' of null.

Any thoughts as to what is going on?

Hi, I'm reading tutorial and made the first basic chart with React.
But it doesn't work. There's no chart properly drawn.
Of course I once have stopped using React (i.e., make chart draw on div element directly) but it showed the same result. Anyone has an idea about this?
Anyone experience with localizing dates on an axis?
@lukelafountaine It would help to see you code rather than a link to your documentation. Could you copy it to a JSFiddle?
@ghost~5b46fd5bd73408ce4fa08cae We have used moment.js to localise dates.
@knjname I think to would be better to pass in a className or id to the renderTo() method. At least from what I know about React you don't use refs for this.
And now my question: we have a service sending us data to be visualised which is taking quite some time, that will not get improved performance right now. So what happens is that the axis is being drawn first with an initial date of 1970 and only later when the actually data comes in the line chart is being drawn and the axis get initialised with the correct dates. Do I have to write promises manually for the order of drawing axis first and then the lineChart later, when the data is ready?
Dominic Wörner
Hi! I'm experimenting with Plottable, but I'm having issues with plotting more than one plot using Plottable.Components.Group(). Both plots end up in the DOM but only the last one is visible.
Dominic Wörner
any advice? :)
Dominic Wörner
solved it. Reason was I used a class called "content" on my site
Another quick question: I'm using a time scale. What would be the suggested way to add a button that sets the scale back to default (init), because pan zoom can mess up the chart
Romit Khanal
I want to resize a component according my given height and width instead of Plottable automatically setting them. How can I do that?
Romit Khanal
For an interpolated color legend, how do I set the height, width for the component?
Kyle Bedell
Hi, how do I render a line chart with holes in the dataset? I don't want the line to go to zero where I don't have data. I want the line to stop and start again where there is actually is data.
Also, on a separate note, I had to add his bit of CSS to prevent the chart from positioning itself along the right edge of the page.
.plottable .background-container, .plottable .content, .plottable .foreground-container { left: 0; }
Kyle Bedell
I imagine I'd have to create two datasets if I want to split the line.
Would be nice if nullin y direction handled this.
Kyle Bedell
Uh-oh, big red flag, is there no way of making a bezier curved line? The examples with the oscillating line chart is faked with tons of little straight line segments.
Kyle Bedell
Oh, phew! Had to dig through the code, but plot.curve('cardinal') fixes that.
Tsion Behailu
Hey all! I'm new to plottable and looking for some advice on changing the styles of the StackedBar plot. Is it possible to change the shape of the bars to a different shape? I'm interested in creating bars with rounded tops (image attached
Screen Shot 2018-12-04 at 11.49.52 AM.png