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.
Related
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);
});
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 am tasked with creating an html document that has a floor plan image as the base layer. Above this I need to overlay employee names that will be pulled out of a database and placed on the map according to a variable in the database named location. Each name will also need to be a hyperlink but I believe this part will be easy once I get the placement down. Additionally when the database is updated with new employees or employees moving. I need to be able to either autosync the page or be able to sync with maybe one click. I have experience with html although this is beyond my current abilities. I also have some experience building windows apps in .net. Can anyone point me to the simplest approach to start tackling this task?
You should check AJAX technology, that will let you to get updated data. Then you should be able to modify positions to new ones.
It's simple and easy with jQuery's $.ajax.
Also if you need realtime updates, check WebSockets.
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'm using the drag-able line chart from the FusionCharts PowerCharts package.
I need to get the data of the graph and send it to server-side for further processing after user has moved a draggable point. This is easy to do with the Submit-button built in to the graph but I want this to happen without the user having to click the Submit button.
Based on the documentation (especially on the the events) it seems that the chart will not fire any events when the user has moved a point in the graph.
So now I'm trying to figure out the best way to get notified of the user-made changes to the graph?
One option would be to periodically call a JS function that would get the graph's data and check if it has changed since the last check. However this feels pretty ugly and inefficient and I don't currently know how to implement the continuous polling in JS.
I'm now leaning towards just to listening for a mouse up event on the element where the graph is and then check changes to previous state of the graph. This should work although the user will probably often click on the graph without actually dragging a point in it.
Am I missing some other obvious solutions here?
There are a couple of things I would like to put forward before we reach solution:
Polling is always a bad idea. And polling at a short interval is worse. However, if you do not need to react spontaneously on drag of the data-point, a high-interval polling will do. For your information, polling is done on JavaScript either by using setInterval function or by using recursive setTimeout.
In case you want to track mouse events, keep a note that in case you are rendering Flash charts, you need to ensure that the wMode (window mode) parameter of the chart is NOT set to "window". In "window" wMode, the browser does not track mouse-events when hovered over the chart. To change wMode of a chart, ensure you execute chartInstance.setTransparent(false) or chartInstance.setTransparent(true) before rendering the chart.
The mouse-event method that you have planned will not help you since you will not know whether user had clicked on the data-point. Hence this method is ruled out.
Thus, you are left with polling. :(
Update (after the first comment by Janne):
Using a combination of both to check for data change when drag event occurs on chart is the right solution.