I have a chart with a trace that is updated frequently in reactjs. I want to install a SeriesMarker on this trace.
first series
The problem is that when updating a trace, the SeriesMarker does not bind to the new trace.
update series
How to make the marker follow the track?
I thought that this might be due to the fact that I clear the series before recording a new one.
series.clear().addArraysXY(updateTrace.x, updateTrace.y)
And the marker is added separately in another component
const seriesMarker = Series
.addMarker(SeriesMarkerBuilder)
.setPosition({ x: 105000000 });
if anything sorry this is my first question on stackoverflow)
Related
I have Single dashboard with multiple charts.And each chart have multiple series.
Let us say chart1 and chart2
Now is there anyway to move all series and data from one chart to another ? I want to move all the series (lines and scatters) from chart1 to chart2 , And I want to clear the series in chart1 , which I can do with .dispose method.
lightningChart().Dashboard({
container: container,
numberOfRows: 2,
numberOfColumns: 1,
theme: theme,
});
there is no utility for this kind of application, so you'll have to go with the simple solution of removing the moved series and recreating them from scratch in the other chart.
The dispose approach for removing the moved series is correct.
For implementation, I'd advise to maintain some data structure for every series and the data it contains. Then you can recreate it and show the same data relatively simply.
A seemingly simple question,
How can I plot the "score" in the "Pac-Man" model in NetLogo
I have tried the obvious approaches (adding a Plot to the interface, telling it to "plot score").
The problem I seem to be having is that the variable for “score” in the Pac-Man game isn’t returning a value to the plot - however it is returning a value elsewhere in the program (the "Score" monitor at the top of the model.
More info available here: https://ccl.northwestern.edu/netlogo/models/Pac-Man
(though you won't be able to add the new Plot)
Short answer: after adding your plot, add update-plots to the top of the play procedure. Like this:
to play ;; Observer Forever Button
update-plots
;; Only true at this point if you died and are trying to continue
if dead?
...
Normally in NetLogo plotting seems to happen automatically because most models are tick-based, and they rely on calling tick in a go procedure to update the plots. This model is not tick-based, which is perfectly fine, but then we have to add the call to update-plots explicitly while it runs to get our plots updating.
UPDATE 25-09-2018
In a bid to create a simpler demo (posted here: http://jsfiddle.net/bLgj4vc7/3/) for this question, I finally discovered the root cause of the problem. I have also managed to work around it, which I have posted as an answer.
I am using standalone bokehjs in my webapp. My problem is that the renderer is not updating its line glyph with updated datasource (or at least this is what the problem looks like to me).
This jsfiddle: http://jsfiddle.net/uwnqcotg/8/ demonstrates the problem. Please ignore any bad coding conventions in it; its a quick, one-off demo.
In the fiddle, the plot is loaded with a dataseries which is rendered fine and dandy. The plot can be updated in two ways:
Update Plot Once By Overwriting CDS.data Object overwrites the ColumnDataSource.data object at one-go, thus adhering to the bokeh principle of maintaining same column lengths.
Start Stream With CDS.stream employs the ColumnDataSource.stream() and updates the plot at a regular interval with randomly generated, but incremental dataseries.
In the first approach, it looks like the glyph is being updated - the axes sure are updated in accordance with the dataseries printed in the console for reference. But, the plotted glyph and the dataseries show a mismatch. To me, it looks like the glyph plotted when the plot initialized simply re-adjusted to the new axes, though I cannot be sure.
In the second approach, again, the axes are updated, but the glyph isn't. Again, the originally plotted glyph seem to re-adjust to the new axes ranges. Moreover, the rollover attr seems to be ignored as the renderer simply keeps accumulating data.
Overall, my observation is that any data provided to the renderer during its initialization is plotted correctly, but any subsequent streamed update or even an overwrite are not. Though I may be wrong here.
On the other hand, between me and bokeh, I am inclined to believe I am doing something wrong or am missing something. So what is it?
As updated in the question, in a bid to create a simpler demo posted here http://jsfiddle.net/bLgj4vc7/3/, I ran across the root cause of this problem:
It looks like bokehjs has a bug where a renderer, once initialized with a certain length of dataset, sticks to that length even for subsequent updates in dataset. In other words,
If a renderer was initialized with an empty dataset {x:[], y:[]}, even if the renderer.data_source is updated with a populated dataset later on, the renderer sticks to the zero length and nothing is drawn on the plot.
For an initial dataset of length 5, only first 5 points will be read from any subsequent updates and the glyph will be updated accordinly. Rest of the points are not acknowledged.
I don't know whether the problem is whether renderer doesn't read beyond the initial length or whether it does but fails to redraw the glyph on the plot. The ColumnDataSource sure is updated correctly.
The fiddle linked in this answer best demonstrates the problem.
So what is the solution? At the moment, this workaround: initialize the renderer with a dataset filled with NaNs, which has a length equal or more than the maximum number of datapoints you want to plot for a single dataseries.
So, if in a line glyph, I wish to plot maximum 100 datapoints, then:
const plot = Bokeh.Plotting.figure()
const maxDataPoints = 100 // maximum number of points I want for this glyph
const emptyData = Array().fill().map(_ => NaN)
const cds = new Bokeh.ColumnDataSource({x: emptyData, y: emptyData})
const renderer = plot.line({field: 'x'}, {field: 'y'}, {source: cds, line_width: 2})
// now any subsequent updates to datasource of renderer will update its glyph on the plot.
renderer.data_source.data = {
x: dataLengthLessOrEqualToMaxDataPoints.x,
y: dataLengthLessOrEqualToMaxDataPoints.y
}
Of course, I think this behaviour of bokehjs is either a bug or I am missing an undocumented step in initialization. Either way, its worth creating an issue on github: https://github.com/bokeh/bokeh/issues/8277
This is a follow up to this question which has to that day still 0 answers.
What I really want to do is having in a tableview, a column that has the symbol for the plotted data corresponding to the objects in the table view row. I have managed to generate the colours supposedly followed by the JavaFX chart. The issue I have of course is that my own colour generation works (it goes back to the first colour without fail after 8 elements), when the one from the chart has the issue outlined in my unanswered question.
So.
I would like now to try to pick up the style actually applied to each series of the chart independently from pre-supposed rule about the default order of colours. How do I do that?
This way I could apply those to my table view and even if the colours randomly change upon reloading then at least I will know what I am looking at.
Thanks in advance for your help.
After a bit of research I found that the following code allows me to get what I want, supposing I am interested in the series at index intitem:
plotswingschart.getData().get(intitem).getNode().getStyleClass();
This will produce a ObservableList containing the following string values (here example for the series at index 8 (9th series)):
chart-series-line
series8
default-color2
From this I can then get the information that I need. that is the colour actually applied to that curve. I can then generate a symbol to be used in my tableview.
I would still be interested in an answer to the question linked, which prompted the present question...
The subject of this question might not give the true scenario, please read all below, thanks.
I am developing a Scatter Plot based on following data (JSON - in a file simple.json):
{
"docs":
[
{"timestamp":"01","id":"100","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"02","id":"200","quantity":"10","pay":"100","bp":"50","city":"Lahore"},
{"timestamp":"03","id":"300","quantity":"3","pay":"30","bp":"15","city":"Multan"},
{"timestamp":"04","id":"400","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"05","id":"500","quantity":"6","pay":"60","bp":"30","city":"Lahore"},
{"timestamp":"06","id":"600","quantity":"15","pay":"150","bp":"75","city":"Islamabad"},
{"timestamp":"07","id":"700","quantity":"14","pay":"140","bp":"70","city":"Islamabad"},
{"timestamp":"08","id":"800","quantity":"18","pay":"180","bp":"90","city":"Islamabad"},
{"timestamp":"09","id":"900","quantity":"7","pay":"70","bp":"35","city":"Lahore"},
{"timestamp":"10","id":"1000","quantity":"20","pay":"200","bp":"100","city":"Islamabad"}
]
}
I am trying to develop a Re-Usable graph, where I can present user with available data columns (from above data). So user can select a certain column (say "id") for X axis and another column (say "quantity") for Y axis (till here everything is perfect and as per expectations). And later user can select another column and can click a button to plot that column on the graph (along with previously added columns).
Here comes the problem:
When I proceed with another column (say "pay") for Y axis, while keeping previously on the graph, new ones get plotted correctly (I am rescaling the axis based on new data as well). But the old ones DO NOT RE-ARRANGED. This is the actual problem. I am thinking to keep track of each column added (by storing column references in a separate array), so every time there's a new column, I will have to redraw the old ones again (should I?). But this doesn't look feasible in terms of D3's power or performance.
For this I also applied an anonymous class "update" to every circle drawn, so that I can pick all "update" circles, but here comes another issue, that how would I know the new place for these circles? Do I need to traverse the data again for that particular series? and have to do that drawing again? For every new series, keeping track of old-ones and redrawing them, will increase the processing over-head turn by turn. Is there any handy solution or built-in (d3's) mechanism to re-adjust previous drawing according to new scale?
Please suggest something. I am sure I am lacking some key points.