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)
.renderTo("svg#example");
window.addEventListener("resize", function() {
plot.redraw();
});
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);
});
</script>
</body>
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').html(
"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
});
plotGroupTop.components()[0]._onDatasetUpdate();
plotGroupBottom.components()[0]._onDatasetUpdate();
}, 200);
});
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?
@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
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?
https://github.com/knjname/2018-07_plottablePlaygroud/blob/master/src/App.tsx
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?
.plottable .background-container, .plottable .content, .plottable .foreground-container {
left: 0;
}
nullin y direction handled this.
Hi. First of all I want to say thank you for creating such a useful module.
I have a question about the selection colour for the XDragBoxLayer. It appears as a washed out grey colour and I need it to be a bit more obvious, however the XDragBoxLayer doesn't seem to support attr or have an obvious way of changing the background colour.
I'm obviously missing something here but I just can't seem to spot it. So when I drag an area, how do I specify the colour that the area is drawn in?
@ismith78 Found the issue - the colour is controlled by css and there was a definition that was pulled in elsewhere in the code that set the opacity to 0.03. After changing that the box is more visible.
If anyone else gets stuck, the css that I ended up using was
.plottable .selection-box-layer .selection-area {
fill: black;
fill-opacity: 0.3;
stroke: #CCC;
}
What is the best way of disposing of a graph when leaving a page? I have registered a ngOnDestroy which I use to make a call to the plottable destroy method. However there appears to be something trying to make a call inside plottable on mouse movement as I see the following crash
core.js:15714 ERROR TypeError: Cannot read property 'node' of undefined
at Function.../../node_modules/plottable/build/src/utils/transformAwareTranslator.js.Translator.isEventInside (transformAwareTranslator.js:56)
at Mouse.../../node_modules/plottable/build/src/dispatchers/mouseDispatcher.js.Mouse.eventInside (mouseDispatcher.js:167)
at Pointer.../../node_modules/plottable/build/src/interactions/pointerInteraction.js.Pointer._handleMouseEvent (pointerInteraction.js:38)
at CallbackSet.Pointer._this._mouseMoveCallback (pointerInteraction.js:19)
at callbackSet.js:26
at callbackWrapper (set.js:56)
at Set.forEach (<anonymous>)
at CallbackSet.../../node_modules/plottable/build/src/utils/set.js.Set.forEach (set.js:57)
at CallbackSet.../../node_modules/plottable/build/src/utils/callbackSet.js.CallbackSet.callCallbacks (callbackSet.js:25)
at Mouse.../../node_modules/plottable/build/src/dispatchers/dispatcher.js.Dispatcher._callCallbacksForEvent (dispatcher.js:80)
at Mouse.../../node_modules/plottable/build/src/dispatchers/mouseDispatcher.js.Mouse._measureAndDispatch (mouseDispatcher.js:163)
at HTMLDocument.processMoveCallback (mouseDispatcher.js:21)
I had been trapping on Interact onPointerMove and onPointerExit, but made sure that these events were cleared before the call to destroy method and that makes no difference
Is there any way to dynamically define if a GuideLineLayer text is aligned to the left or right of the guideline? I'm seeing the same issue as can be seen with the example at http://plottablejs.org/examples/spacerace/.
If I hover the mouse on the far right data point (First Man on Moon 1969) then the text at the bottom is lost as the text cannot fit from the left of the gridline. It should be displayed to the right of the gridline (i.e. if the gridline is more to the right the label should switch).
However I have not been able to find anything in the API that controls this behaviour - is this something controlled in the CSS somewhere?
Hi,
Is it possible to create multi level charts.
For example Continent wise, Country wise, State wise sales.
Hence on the X axis there is a grouping happening at continent wise, then within that countrywise and then within that we should see state wise actual bars with values??
Something like below
https://i.stack.imgur.com/CYp8Y.jpg