I'm totally new to highcharts so excuse any mistake in advance.
I have one chart which illustrates amount of bandwidth used according to datetime. (somehow like this example.) I need to show more data to the user whenever the chart is zoomed on xAxis; means new data should be popped up when we are seeing a period of time in detail. fortunately, I have access to that new data, but the main problem is that I don't know how to combine this new data with my old chart.
To make my question more vivid, lets imagine this scenario: assume that I have bandwidth usage for last 2 years in scale of month (for every month on xAxis, I have one value on yAxis), then I zoom in some part of my chart and the chart gets wider and new points pop up on xAxis (what automatically happens in highcharts when we set zoomtype: 'x'), for some of these points, I have some values corresponded to them on yAxis, which I want these new points to be considered in my chart. what shall I do to do this for large scale of data? (e.g. when I have the data for 2 years and I wanna zoom by accuracy of one minute, it is not feasible to include new points manually in between of old series.)
since my code is too large and makes it more complicated to put it here, I try to illustrate my desired result via pictures:
1) this is my chart before zoom:
2) after zoom:
3) and the final result which I do not know how to make it:
Any help would be very appreciated.
Take a look at this live demo: http://jsfiddle.net/kkulig/6gyfx6n7/
I used afterSetExtremes event to check the currently displayed time span and set the appropriate data. If it's shorter than 30 days then I add additional points. Otherwise I restore the default data. pointsAdded helps me to to control whether these operations are actually needed or not.
events: {
afterSetExtremes: function(e) {
var series = this.series[0];
if (pointsAdded && e.max - e.min > 30 * day) {
console.log('Set default data');
series.setData(data.slice());
pointsAdded = false;
} else if (!pointsAdded) {
console.log('Add points');
additionalData.forEach(function(p) {
series.addPoint(p, false);
series.chart.redraw();
pointsAdded = true;
});
}
}
}
To see it working select the last 20 days or so. Then return to the default view by clicking All button.
API references:
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Series
Related
Good day,
I have a map with markers that move every 3 seconds to a new location, using ReactLeafletDriftMarker. I cannot, unfortunately, share my code since it is confidential.
My issue is that the markers do not drift, they just jump/appear in the next location.
Does anyone know what causes this to happen?
I can share this snippet:
{Object.entries(latlng).map(([key, value]) => {
return (
<ReactLeafletDriftMarker
position={value}
duration={4000}
keepAtCenter={false}
icon={markerIcon}
>
</ReactLeafletDriftMarker>
);
})}
It shows how (around) 400 points move on a map.
All help is appreciated, thanks.
It was a simple mistake. I assigned a key to the container, so it re-rendered every time the markers changed position values.
I am trying to get EDS spectra on every scanned pixel using STEM.
I am using the EDSStartAcquisition( 2048, 10,fexposure*2, 1) command and
I have attached the following simple listener object into the shown 1D spectrum image:
string messagemap = "data_value_changed:MyImageAction"
Class MyListenerClass1
{
String event_desc;
MyListenerClass1(Object self); //Result("\n");
~MyListenerClass1(Object self);// Result("\n");
Void MyImageAction(Object self, Number e_fl, Image Img)
{
ImageGetEventMap().DeconstructEventFlags( e_fl, event_desc )
Result(GetTime(1)+": Image message : " + event_desc + " 0x" + Binary(e_fl) + "\n" )
}
}
ListenerID1 = EDSIm.ImageAddEventListener( Listener1, messagemap)
Since speed is the issue here, I figured to try the continuous mode of the EDS acquisition. But then I would need to listen which counts belong to each scanned pixel. The following topic (How to getting acquired frames at full speed ? - Image Event Listener does not seem to be executing after every event) shows how to listen to the last pixel change of an image. But what would be the fastest way to directly see which slice of the 1D spectrum has changed on every event? Without going through every slice...
thanks in advance!
An images' data_value_changed is fired whenever a) an image locker (the object that ensures there is single access to the memory) is released, or b) a specific update-call is made in the code.
As such, when a cumulative EDS spectrum is acquired, the whole array gets "locked", then modified (on one or more positions) and then 'updated'. There is no specific information carried on where the array was modified.
Therefore, the only way to find out where the spectrum changed is by comparing a copy of the "before" with the "now" - which is not super efficient.
I have a leaflet project where I am delivering a continuous stream of 'coordinates' via WebSockets to the client browser. I need to be able to display markers corresponding to those locations for a set period of time (something like 1 or 2 seconds) and then remove them (to make room for more locations).
Can anyone help me out or point me in the direction of resources wherein I could find some help?
Thanks!
Edit : Why the downvote? Its a legitimate and common question and one without a lot of solutions online.
Here is some code from the documentation (http://leafletjs.com/reference-1.0.3.html#layer):
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
layer.remove();
So in order to remove it after 2 seconds, I think you could try this one:
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
setTimeout(function() {
layer.remove();
}, 2000);
Example
I'm not yet as much into Java as I'd like to be, so I find my current task to be quite a bit challenging:
A chart showing data gathered in another class.
A slider whose end value is determined by the last entry of in the dataset used in the chart.
The playbutton currently doesn't do anything except letting the slider tick in steps of 5 until it is paused again.
My problem right now is: I am supposed to highlight one item at a time in the chart based on which value the slider currently shows.
And to be honest... I'm not yet used to renderers yet.
If I understood it correctly I would need to use
renderer.drawItem(java.awt.Graphics2D g2,
XYItemRendererState state,
java.awt.geom.Rectangle2D dataArea,
PlotRenderingInfo info,
XYPlot plot,
ValueAxis domainAxis,
ValueAxis rangeAxis,
XYDataset dataset,
int series,
int item,
CrosshairState crosshairState,
int pass)
but I am totally inexperienced with as well the method as its arguments and got no idea how to initialize them.
I mean... I got a plot, a dataset, and 2 series from the chart, I also suggest "item" would be the index of the item to highlight in the series, which I could convert from the slider-value.
Unfortunately plaguing google about it turned out to be rather frustrating since all I got was the very code I posted above on about 50 different pages (I gave up after).
I would like to know ... first of all if I am even about to use the correct method and, as ashamed as I am to ask like this... how to use it.
Well... looking forward to some answers and... thanks in advance.
Well, I now solved my problem in a different way than I intended to but it works out just fine for me.
Instead of highlighting a point in the curves I just simply add a Domainmarker that would adjust based on the value the slider currently shows.
class1 TestSlider
private HashSet<SliderListener> sliderListenerSet = new HashSet<SliderListener>();
public void addSliderListener(SliderListener Listener){
sliderListenerSet.add(Listener);
}
slider.addChangeListener(this);
public void stateChanged(ChangeEvent e) {
// TODO Auto-generated method stub
JSlider source = (JSlider)e.getSource();
if (!source.getValueIsAdjusting()) {
fireSliderChanged();
}
}
public void fireSliderChanged(){
for (SliderListener currentListener : sliderListenerSet)
currentListener.sliderValueChanged();
}
class2 SliderListener
public interface SliderListener extends EventListener{
public void SliderValueChanged();
}
class3 Chart
Marker marker = new ValueMarker(0);
plot.addDomainMarker(marker); //so that it would be there at the beginning
TestSlider ts = new TestSlider();
ts.addSliderListener(new SliderListener(){
#Override
public void sliderValueChanged() {
plot.removeDomainMarker(marker); //I only want one of them at a time - the one with the value the slider is currently showing so remove the old one...
marker = new ValueMarker(ts.slider.getValue());
plot.addDomainMarker(marker); // ... and add the one with the new value
}
});
}
I tried to keep it as short and universal as I could and I hope I didnt cut out anything important.
Well, I'm still new to this site, so... in case I did a mistake somewhere feel free to tell me.
I banged and banged my head on this one for a while and I figured someone else may have this problem down the line. I'm posting my full issue and resolution to those who come later, and to offer a spot for any improvements/simplifications if anyone finds one.
Issue was I am trying to paint VerticalLineAnnotations on my ChartArea. I do not want to anchor it to any data points but merely anchor it to an X axis based on which ChartArea I send in. In my annotation constructor I was trying to set AnchorX.
double maxdate = chart.ChartAreas[0].AxisX.Maximum;
double mindate = chart.ChartAreas[0].AxisX.Minimum;
//use inputdata to find where relative spot is.
if(DateTime.TryParse(date, out ddate)) {
AnchorX = (ddate.ToOADate()) / (maxdate - mindate);
}
I kept getting the mins and maxs to return as NaN, which I found out means the ChartArea will manage itself and set its own max/mins. This was all pre-painting.
I tried post painting but then everytime it painted, it would add annotation, then do postpaint again and infinite loop.
I finally found an event that lets me do this. The Customize() event solved this issue.
private void chart_Customize(object sender, EventArgs e) {
PaintAnnotations();
}
Now immediately before the painting happens, data seems to be loaded and max and mins are already set by this point and I can get values back in the code from above.
Hope this can save someone the hours that I lost!