Trying to make it so few axis would turn off by default (onLoad). I thought about using AmCharts events on ready.
But I cant find any documentation for ether an event toggleOff or what so. Nor something that AmCharts would have via default. The only thing that crossed my mind was, making a custom legend item that would toggle off on, but that's not efficient.
If you want to show/hide axis results on creation, use someAxis.hidden = true;, if you want to hide whole graph use - showGraph(YourGraph), hideGraph(YourGraph) there is no need to add event listeners, unless your doing some kind of complex check, then go ahead, but hidden = true should do fine in most case scenarios, I am pretty sure you can all ways update it anyways and then validate Data.
Related
In Joint Js graph , links are getting disconnected on moving the tables ? What might be the issue ? How can I correct it. I have shared the link.Please go through it. You will understand what I am saying.
https://resources.jointjs.com/demos/database
This behavior is by design. The demo uses a custom Anchor to change the point of the anchor depending on the position.
If you want to change this behavior you can edit the custom router or make your own.
If you want to remove this behavior, you can remove the defaultAnchor and anchorNamespace options from the JointJS paper. That means it will use the JointJS defaults instead of the custom Anchor.
Although removing these options could make the functionality less desirable in this demo.
So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.
I'm making a line chart in oCanvas, and I need to show the data of a point of the line, when the user hovers that point with his mouse! Is there like a built-in function for it do it itself, or do I have to make it myself? (I didn't find any useful info on the docs section of the website, and that's why I came here, just in case someone has done it before me and knows how to do it!). I have the data I need to display when the user hovers the point, I just can't get find a hover function. After that I need to show something like a tooltip, that's gonna contain the data. Thank you very much for your help, it is really useful to me! Here's the website: http://ocanvas.org/
oCanvas is a general purpose library, so there is no built-in feature for that. To make hover work, you need to listen to events (mouseenter and mouseleave): http://ocanvas.org/docs/Events/Mouse
When you detect mouseenter you will need to show the tooltip object in the correct position. When you later detect mouseleave you will need to hide the tooltip.
I've been creating a metrics module (using timeseries) with c3js. I'm now trying to plot out events over my metrics data, which are date-spans (startDate to endDate). Using c3js' regions seemed to be a good choice for it, it only took a little tinkering to make them short and appear above of all my graphed data.
Problem is, the actual SVG Group called g.c3-regions is automatically displayed behind the graphed data. Makes sense, there hasn't been any real need allow any user interaction with regions. I need it in the forefront, so I can bind hover and click functions to each event.
I tried doing this with jQuery: $('.c3-regions').insertAfter('.c3-chart'), which simply places it in front. Works fine - that is, until my c3js instance re-renders. Then it spits out an error that it's having trouble re-rendering the regions (since they obviously moved)
I've also tried cloning it and putting that in front, but it doesn't seem to copy over the SVG information.
Any help would be truly appreciated, can provide any code samples on request.
Cheers - - Andrew
To expand on Robert Longson's comment, what you want to add is
.c3-event-rect {
pointer-events: none;
}
.c3-chart {
pointer-events: none;
}
This will allow the clicks to go through to the region layer.
I'm trying to figure out how to highlight a line (series) in Highcharts from an element that's not related to the Chart object in any way.
I went through the documentation, and don't really see a way of achieving this. I can get into the series elements using the series.get(id).
Seems like there are no methods that can be helpful - http://www.highcharts.com/ref/#series-object
Any ideas if that's even possible?
After a lot of digging and testing, I've managed to get this working - still not sure if this is the best way (probably not).
Chart.series.get(someId).graph.attr('stroke-width', '5')
Unfortunately, this is just getting into the actual DOM element and changing the value of the property of a single element, so if you need to change the stroke width, and the styles of the markers on this line, you'd have to loop through all elements, and apply changes manually.
UPDATE: Ok, there's a better way
But this is using the private API, so if the library changes thins, your code will not work:
Chart.series.get(someId).onMouseOver() and Chart.series.get(someId).onMouseOut().
This actually fires the defined hover-state.