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);
});
Related
So I've been trying to work with angularjs-nvd3-directives and for the most part it's been great. I've come to my actual use-case though, and it doesn't work as expected. What I'm doing is making a chart editor, so you would change settings in real-time about the chart and see those changes live. Here's an example of changing the x axis in action. Now, you might notice that the data changes repeatedly. I want to change all of these properties without changing the data, but if you comment out the lines that randomize the data, it doesn't work as expected.
I did some digging in the source code, and I found this curious line that seems to me like it only watches the data variable. Is there a way I can force angular to update, even if the data doesn't change? Setting it to itself doesn't seem to work.
Also, in the example it updates every 1500 ms because of a setInterval. Is there a better way to do that? I feel like making it work off of a change event would be better, but I don't know where to start with that.
setting it to itself doesn't seem to work.
That didn't work because angular does a === equality check.
Simply solution:
data = angular.copy(data)
This will make data distinct from previous value of data but still functionally equivalent.
The solution I had to go with was to set an unused property on the object, and increment it any time I needed it to change.
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
I am trying to export the content of a div with jQuery but it has a jqplot graph inside of it.
When I try to re-render it, all the elements of the graph like the name and values appear, but not the bar charts. I am currently using:
$('#exportable').html();
Here is the thing, if I include the javascript that is used to execute the chart, it duplicates all the data and overlaps itself.
If I don't, the graph won't appear, just the values.
I would post the code but there really isn't much to look at. I've been trying to experiment and googling for the past few hours. Maybe I'm looking for the wrong thing. Anything would help.
Thanks a lot!
Instead of attempting to clone the chart, why not create another chart with the same data? See this for an example:
http://home.edgemontgeek.com/dev/stackoverflow/14727843/
Note that the "clone" button simply calls newPlot with the same data that was passed into the initial call, it doesn't attempt anything fancy, or look at the original contents of the plot.
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
I am trying to use webgl-surface-plot to plot in 3D. the issue is, i want to take in user inputs for the parameters of my function using sliders or text boxes. for some reason though, I cannot get it to update the graph when the slider/text box is updated. any help is appreciated. currently I am using an html5 slider for simplicity until I can figure out other larger issues.
You could expose the JSSurfacePlot.data object as well as the redraw function to your calling code. Modifying the former before calling the latter should do the trick.
update
Just call the 'draw(...)' method with the new data.