I'm new to Highcharts and I need to create one for reporting purposes. So creating one is simple but seems like the one they asked is not very simple at all. It should be something like a streaming graph where if something comes in it will start plotting until it is done.
So the scenario is like this.
It needs to be a column chart/columnrange type.
The x-axis will be the time. And should be moving from right to left. In 1 second or 2 seconds interval. Doesn't really matter.
So if the data comes in, let's say a call comes in. The time it comes it should start ploting/Drawing the bar until the call is done.
And it should be able to see the stock. Pretty much like the one in here http://www.highcharts.com/stock/demo/ where you can select a range and zoom in to that range.
I hope I'm making my scenario clear enough. Any reply is appreciated.
Best
Because you haven't provided any code to go with, the response here is going to be more of a guidance for you to do further research:
Select chart type to be a column
N/A
Since you're using jquery, if the data is coming in a json format - check out $.getJSON otherwise check out $.ajax or similar functions for you to get the data dynamically. You will then need to go through Series.addPoint()
Was already asked on Stackoverflow
I think this example is pretty much what you wan to achieve. Only change series type to 'column', see: http://www.highcharts.com/studies/live-server.htm
Related
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
I have a Highmap that's populated with data fetched using getJSON. What I want to achieve is have a button (or dropdown) that allows me to switch between two or more data sets.
I've seen this question asked a few times in different ways (such as this one), and reading the answers I think have a general idea of what I need to do, but I remain stuck. FWIW I'm a complete novice just trying to make something work for my colleagues, so my mistake might be fundamental or could just be a matter of syntax.
For now to prove to myself that I can make it work I've tried to implement a button that, once clicked, simply switches to a second data set using setData. While the map is displaying correctly, and I know that both JSON files are being loaded, I can't get the switch to work.
Here is my attempt in full: http://jsfiddle.net/osc9m3e7/4/
And the part that I'm sure is incorrect somehow:
$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});
I'd appreciate any tips to get me on the right track.
You have probably noticed how borders of countries are getting thicker every time you set new data. It happens because the data object is not copied but used directly, so it is modified. To copy specific object you can use for example slice() function. Below you can find an example where switching between sets of data works as it should.
API Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Example:
http://jsfiddle.net/4ub0z408/
Answered by ewolden in the comments. My issue was that I wasn't naming the chart, and therefore not able to manipulate it using setData. The working example is now here: http://jsfiddle.net/osc9m3e7/7/
var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});
I've just started exploring using svgs within rails. I want to dynamically update a gagejs with the created_at column on my Comment model.
Is this possible? For example, if the user hasn't created a comment in x amount of time the gage drops randomly between a certain range. It sounds like a fun problem to solve, i just would like to know that it is indeed solvable.
Thank you.
You can use setTimeout to run something after a delay and DOM to update things dynamically. The links give you some examples of each so you'd just need to tie them together.
I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/