Google Visualization Annotated Time Line, removing data points - google-visualization

I am trying to build a graph that will change resolution depending on how far you are zoomed in. Here is what it looks like when you are complete zoomed out.
So this looks good so when I zoom in I get a higher resolution data and my graph looks like this:
The problem is when I zoom out the higher resolution data does not get cleared out of the graph:
The tables below the graphs are table display what is in the DataTable. This is what drawing code looks like.
var g_graph = new google.visualization.AnnotatedTimeLine(document.getElementById('graph_div_json'));
var table = new google.visualization.Table(document.getElementById('table_div_json'));
function handleQueryResponse(response){
log("Drawing graph")
var data = response.getDataTable()
g_graph.draw(data, {allowRedraw:true, thickness:2, fill:50, scaleType:'maximized'})
table.draw(data, {allowRedraw:true})
}
I am try to find a way for it to only displaying the data that is in the DataTable. I have tried removing the allowRedraw flag but then it breaks the zooming operation.
Any help would be greatly appreciated.
Thanks
See also
Annotated TimeLine when zoomed-out, Too Many Datapoints.

you can remove the allow redraw flag.
In that case you have to put the data points manually in your data table
The latest date of the actual whole data
The most outdated date in the actual whole data.
this will retain your zooming operation.
I think you have already seen removing the allowRedraw flag, works but with a small problem, flickering the whole chart.

It seems to me that the best solution would be to draw every nth data point, depending on your level of zoom. On the Google Finance graph(s), the zoom levels are pre-determined at the top: 1m, 5m, 1h, 1 day, 5 days, etc. It seems evident that this is exactly what Google is doing. At the max view level, they're plotting points that fall on the month. If you're polling 1000 times a day (with each poll generating a single point), then you'd be taking every 30,000th point (the fist point being the very first one of the month, and the 30,000th one being the last point).
Each of these zoom levels would implement a different plot of the data points. Each point should have a time stamp with accuracy to the second, so you'll easily be able to scale the plot based on the level of detail.

Related

What would be the best visually appealing power BI chart/graph to compare numbers with huge differences?

I need to compare Year Month values somehow next to each other.
But the difference is so big that it is not very visually appealing.
I tried to find a good chart to display those, but so far no success.
Any recommendation?
If you want them to share the same axis as you have in your image, you could switch the scale to logarithmic instead of linear. Otherwise, you could try putting them on separate axes so they scale independently.
Another option would be to normalize them somehow. If one set were monthly, then you could multiply it by 12 to "annualize" it.

Is it possible to develop the line charts with multiple colors in powerbi?

I developed the few Line charts for BMP280 sensor data in powerbi. This is one of the line chart for displaying the temperature value by time and device id.
But I want same line chart with different Color like this below image, whenever temperature value suddenly changes.
Can you please tell me is it possible to develop the Line chart with multiple colors?
If you're willing to consider a vertical bar chart instead of a line chart, you would be able to create a calculation for each row that determines whether the change is significant, potentially by comparing an aggregate of recent measurements to specific thresholds.
Once you do that, you would use this column's value as a legend for your visualization. So if a row has a value of "Significant Positive Change" (or something like that), the bar or bars showing that change can be red.
Your other alternative is to use an R-based visual, of which there are surely examples of this type of visualization. I'll update this answer if I find one that looks promising.
Instead of tending 1 data series, you can split it into 2 data series e.g. one with normal temperatures and one with high temperatures. Then you can just plot these in different colours. Just make sure that the ranges are same i.e. cannot be 'Auto'.

How do I make a smooth scrolling animation?

I have a CListCtrl which has about 100,000+ entries. The user is presented with a search box to search among these entries. On finding a match, I set that as a selection and scroll to it using EnsureVisible.
This scroll happens instantaneously. I wanted to try and code an animation that looks similar to the ones demoed here (especially the 'Go Top - Easing 2' animation).
I'm thinking, for a basic animation,
Get current selection.
Get target selection.
Compute difference.
Get the pixel height of one item.
Mutiply results of step 3 and 4.
Scroll by an increment of 1 (or some other more optimal value) with a delay until increment = result of step 5.
I tried this and I got incredibly confused. Firstly, is my algorithm okay? Secondly, is there another, better way to achieve this (preferably similar to animation 2 in the link above)?
Your algorithm seems ok for a simple linear scroll. However your link points to scrolls using various easing functions.
Easing functions do not scroll by the same amount each time, but increase or decrease is order to look like they're speeding up, or slowing down.
A common way to work out easing values is to use the result of a sine. If you picture a sine wave and imagine that you can only see one pixel of it at a time, as the wave progresses, the pixel will "ease" at the extremes and accelerate through the middle values.
Your Easing 2 animation is just adding a bit of bounce at the start and end, this is easily achievable by using the a bit of the sine wave past the extremes at each end. eg.
_
/ \
/
\_/
If you want some code, I answered a similar question here in C#.

reverse axis direction for google motion chart

I am creating a gvisMotionChart that displays data from the past 5 years. I would like the initial state to be the most recent date (ex. 2012) and for the chart to move "backwards" in time. I know how to set the initial state to the latest date, but that doesn't reverse the time scale at all it just starts the chart at the end of the timeline.
basically, I am looking for a function for the gvisMotionChart that does the same thing as the "hAxis.direction" function for the google Scatter Chart.
Does anyone know how to accomplish this?
Thanks!!

How to determine sunset/sunrise including terrain shadows.

In Google Earth you can use the "Sunlight" layer to view shadows cast by the terrain at any given DateTime: http://i.stack.imgur.com/YFGMj.png
However, I have not been able to find any way to access the sunlight/luminosity/shadow/etc values from the API.
I'm looking for a way to supply Lat, Long and DateTime to determine if an area is in sunlight (taking terrain shadows in to account, there are countless services that will provide simple Sunrise and Sunset times, but these do not consider terrain). This can be done manually with Google Earth, but I'm looking for a programatic method.
Thanks for any thoughts, ideas, leads...
I realise that this is an old question, but it surfaced in a google search I just did, and I liked the focus.
Since you're looking for a programmatic way of determining if a point on earth given by a longitude and latitude tuple is exposed to sun at a given time, I can't help you right now. However, I'm in a position to be able to set up such an API quite easily if we see that this is a feature that many people need. At suncurves.com we calculate sunrise and sunset times accounting for terrain. The solution we've set up so far is a web interface where a user can search for an address or drag and drop the icon on a map to get sunrise and sunset times through the year for that exact spot accounting for terrain. We want to create an API to our data, but we do not have a clear specification of the scope of this API yet. What you ask for requires that we need to:
Calculate the apparent horizon from the viewing point of the
longitude and latitude. This means scanning the terrain data in a
search radius of 30-50 km around your point.
Calculate the sun's position at the specified time.
Calculate the sun's position at the specified time. Determine if the
sun is under or over the horizon as given by the terrain surrounding
your point accounting for atmospheric refraction.
Here's an example from Chamonix, France where the common flat terrain versions of sunrise, sunset times are pretty worthless.
http://suncurves.com/v/7/
I am not sure about determining whether an AOI in in the sun or shade at a certain time, however you can set the SUN to be on or off in the API by using
GESun.setVisibility
Edit:
Using the GE-plugin, create a LookAt with your desired AOI lat/long where the view is directly above looking straight down. Depending on the size of you actual AOI I would keep the view as low to the ground as possible.
Then capture a screenshot/image - I do not think this is possible through GE (if anyone knows a way I would like to find out), so maybe use javascript to take it - I found this Q on SO that provides some insight.
Take a screenshot with GESun.setVisibility set ON and then another with it OFF
Compare the two images for darkness/lightness or something and determine if your AOI is in the shade or not. You might find it better to surround your AOI in a Polygon of some sort in order to help your program distinguish it from the rest of the image - depending on the height the LookAt was taken from etc etc....
I do not have any ideas on how to compare the images, but yet again another search on SO resulted in this (I would presume finding the values of COLOR_BLACK in PHP ImageMagick) and this (Color Buckets idea).
Depending on your method of choice, it might help to alter your images to black/white before doing the comparing.