@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
well i took the longer route and used the attribute projector for barWidth, and then x1 position of my first datapoint from the first dataset, then the x position of the first datapoint from my second dataset of then the math is like this
bar2Xpos - (bar1Xpos + barWidth). <- that gives the spacing between bars -- hope that helps someone else
I have something like:
<div className="chartItem" width="150" height="100">Chart Test</div>
then inside componentDidMount in react I do the normal plottable stuff then
chart.renderTo(".chartItem");
but it does not draw properly
this is what I've been using. I'm not a pro in this field, but it's been working fine thus far.
<div class="panel">
<div id="content" style="width: 1400px; height: 3800px;"></div>
</div>
......
var table = new Plottable.Components.Table(tableArray)
table.renderTo("#content");
.......
$('#content').ready(function() {
ccc1 = document.getElementsByClassName(xtimeclass);
ccc2 = document.getElementsByClassName(compgroup);
//setTimeout
setInterval
(function() {
$.ajax({
url: "/",
type: "POST",
contentType: "application/json",
processData: false,
data: JSON.stringify(
{
chartQuery: myQuery,
.........................
}, 4500);
});var tableArray = [];
for (let i = 0, len = plotGroups.length; i < len; i++){
var xAxis = new Plottable.Axes.Time(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScales[i], "left")
.xAlignment("right");
var ar = [];
ar.push(new Plottable.Components.Table([
[yAxis, plotGroups[i]],
[null, xAxis]])
);
tableArray.push(
ar
);
}var xtimeclass = "component axis x-axis time-axis";
var compgroup = "component component-group";
var tickcontainer = "content component-overflow-visible";
var ccc1 = null;
var ccc2 = null;
..................
$('#content').ready(function() {
ccc1 = document.getElementsByClassName(xtimeclass);
ccc2 = document.getElementsByClassName(compgroup);
..........................................
for (let c = 0; c < ccc1.length; c++) {
ccc1[c].style["left"] = "80px";
}
for (let c = 0; c < ccc2.length; c++) {
ccc2[c].style["left"] = "80px";
}var strictIsoParse = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");
var myParse = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
var myFormat = d3.timeFormat("%Y-%m-%d %H:%M:%S.%L");
I'm experimenting with Plottable in React and I'm looking for help on adding a tooltip on my charts.
I made a sample project with create-react-app: https://github.com/adrienrenaud/react-plottable.
So far, I'm able to render plots with data update and interactions but I'm struggling to get a tooltip working. Any help would be most welcomed!
Thanks a lot
