Meteogram with Vertical Profile in Highcharts - javascript

A couple of months ago, I made a meteogram with NCL.
enter image description here
It works great, but I would like to improve it, making it again in highcharts. I know there is already a meteogram in highcharts, but honestly it's too basic. So I decided to make one like mine.
I know the last 4 graphics perhaps could be made using this: http://www.highcharts.com/demo/synchronized-charts
But I have no idea of how to make the vertical profile. Maybe It could be made modifying a "large heatmap" somehow (look for highcharts large heatmap, I can't post more than two links)
Yet, I don't know if could be possible to overlay wind arrows all along, to show the wind direction. Anybody have an idea or suggestion about all this? I would really appreciate your help. Thanks!!

Related

Is there any way to pick a random frame as the starting point of a gif?

I have a bat gif that I have on html5 webgame.
I want to put many of them next to each other but since the gifs start playing at the same time, it doesn't look great.
I want to randomly offset each gif but there doesn't seem to be any solutions out there...
From a quick google, i saw libgif: https://github.com/buzzfeed/libgif-js, but it hasnt been maintained in over 6 years and I don't see the option im looking for.
Anyone have experience with this?
If there are no ways around this, then I guess ill manually draw up different variations

How can I dynamically test text in a CSS class and then update CSS based on criteria?

I'm very new to this, but have a little programming background, so hopefully someone out there can parse through this with me.
I spend a LOT of time looking at Reddit for work and being able to quickly see which comments are newer than others would be super helpful. My ultimate goal is to have a color scale that will quickly guide me to the new comments. Something like Red is less than 30 minutes, Green is 30-60 minutes, and Blue is 60+ minutes or something like that.
I've been doing some research into building Chrome Extensions, and I found some similar topics, but they don't test the text in the field and update the CSS dynamically.
I would absolutely love some help walking through this. Also, if you have a partial solution, I'm open to that as well. Thank you in advance for your time and help!
UPDATE: I've been asked to provide code samples, but that's the real crux of my problem is I A) don't know how to even begin approaching this, and B) my web searching is not showing any results for me to play with. To be clear, I'm not asking anyone to make this extension for me. I'm looking for help identifying a CSS class area on a site, checking the text within it, and then applying a CSS addition based on results. If you can help point me to the right resources, I'd be very grateful!

Hover over an image area to change the image src

Basically, I have an image (of text) that I want to change to one of four other images on rollover of different areas. The difference is, on roll-off, I want it to remain what it was changed to, unless my mouse enters a different area. I've tried image-maps and whatnot but I can't seem to get this right. As far as my overall coding knowledge goes... well, I started last week, but I'm getting there.
Here's a link to an image overview of what i (kind of) mean.
I know it has probably been answered somewhere at some point but I really haven't managed to find anything that works yet - all I've managed is stuff that either disappears completely or doesn't work with multiple images. Any help would be much, much appreciated.
YOu can use image maps
http://www.outsharked.com/imagemapster/
this is great tool, try it. it is not so hard :)

Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas?

I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.

What does spikeline in a chart mean?

We are developing a dashboard application with a lot of charts, using Highcharts Javascript library. And we are asked to draw some charts with spikeline. I am not sure what a spikeline in a chart is. Can someone shed some light?
As far as I understand the spike line reflects a line with highest values in a certain time span. On this page it is used to determine when is the best time to buy gas. There are graphics on the aforementioned page that may help you further.

Categories