jQuery Flot: Adjust xaxis zoom in/out to calendar - flot

Using jquery.flot.navigate.js I can have flot zoom in/out on mouse wheel/ double click by specified amount (e.g. x1.5). What I need, is zoom by calender. By that I mean zooming in/out by the boundaries of hour/day/week/month/year.
Is there any way to achieve a callback/ interaction with the navigate plugin or custom solution?

Solved by modifying jquery.flot.navigate.js to call a callback function after adjusting axis min/max due to scale/pan/double-click. The callback can then further adjust the zoom boundaries as needed before the chart is redrawn.

Related

Re-scaling x, y-axis on capture correct coordinate scale on mouse-over in matplotlib

I am rendering a data as shown below using cluster analysis.
As you can see that ports in the range of 0-200 are clubbed together. Is there a way to zoom in on the scale when I mouse over a coordinate and thereby redrawing that section of the graph again in a zoomed window. What i mean is that for the coordinates shown in blue circle, when I mouse over, I want the x, y axis redrawn for 0-10000 using a different scale so that overlapping circles move apart. Is it possible ?. I must confess I find matplotlib little challenging and my apologies if my question is little cryptic. thanks for the help!
Assuming youre using pyplot then this functionality is built right in to the pyplot output.
See the following from the matplotlib documentation.
The Zoom-to-rectangle button
Click this toolbar button to activate this mode. Put your mouse somewhere over an axes and press the left mouse button. Drag the mouse while holding the button to a new location and release. The axes view limits will be zoomed to the rectangle you have defined. There is also an experimental ‘zoom out to rectangle’ in this mode with the right button, which will place your entire axes in the region defined by the zoom out rectangle.
If you need to enable zoom to rectangle functionality without actually clicking then this will be possible by creating a transparent figure positioned in a location of your choice on your plot and then initiating a matplotlib event to be handled when the mouse hovers over this area. This functionality is not built in and will require customisation.
Detail relating to event handling on mouseover events can be found at this URL

d3.js. How to organize bubbles along the line without overlaps?

I want to make such kind of bubble chart:
But only i can do is here - http://jsfiddle.net/zeleniy/h646uopc/6/.
jsfiddle code mock
How i can move them apart to escape overlapping. I understand that in some cases bubbles will be shifted along the x axis because of chart height limit. But in any case i do not know how to do it? And i am not sure that want to use force layout to scatter bubbles. I want do draw it at once.
Finally i do it - http://zeleniy.me/stretched-bubble-chart.html.
You should use force layout with specific gravity implementation. Read this article for details - http://vallandingham.me/building_a_bubble_cloud.html

Implement ToolTip feature in Line Chart

I Have implemented a Primeface 3.5 line chart.I have also added the tool tip feature.
Now I want is that , if I click on the coordinate , it should show me the origination of those points.
eg:
The highlighted coordinate 2006 is summation of (1000 + 1006), so when I place my cursor on the point it should show me (1000+1006).
How do I implement the feature?
as short of reputation I could not upload the image to explain it
In jqplot attributes, you can specify to show the value on x axis, y axis or both in tooltipAxis attribute.
Alternatively, you can bind a javascript function with a jqplot event jqplotDataHighlight to show a custom value on mouse hover.
See this answer

AndroidPlot - Position TextLabelWidget not consistently on different devices

I have a chart show info of apps, but when run it on devices android. The position of text on chart not consistently.
These images illustrate the problem: https://drive.google.com/folderview?id=0B7-CxJHQ5ZnjYjVlTlFQdElWRGM&usp=sharing
I use TextLabelWidget in AndroidPlot. How to keep position of TextLabelWidget on chart with the same image1 in link above on devices?
The problem appears to be that your plot area is set to fill the width of the screen and since the bars are evenly distributed in that space, their x positions are essentially fractions of the screen width.
At the same time you have labels that appear to be positioned using absolute positioning. As an example, this code will position 4 labels at 0%, 25%, 50% and 75% screen width, 80 pixels down from the top of the screen:
txtWidget1.position(0, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget2.position(0.25f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget3.position(0.50f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget4.position(0.75f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
There are some other factors that you are also probably going to need to deal with such as bar width but this should get you closer. You may find this doc useful as far as a guide for the different positioning methods.
Another tool to consider using if you aren't using it already is the Configurator. This will let you set your positions etc. inside xml and override values based on screen size, orientation, etc.

javafx2 center axes on XYChart

JavaFX does not provide a CENTER value for Side so I am trying to center the X and Y Axis by translation:
scanXAxis.setTranslateY(0.5*scanYAxis.getBoundsInParent().getHeight()); // xAxis initially on TOP
scanYAxis.setTranslateX(0.5*scanXAxis.getBoundsInParent().getWidth()); // yAxis initially on LEFT
The result I am getting however are axes crossing at a point that depends on the scene's size instead of (0,0) i.e I can get them crossed at the origin by manually resizing the scene. This is exaclty the reverse of what I am striving for.
Any help would be greatly appreciated!
Cheers
I am using the Axis and I think the design is not friendly. I can't set the axis upside down or right to the left. I used axis.rotate but I have to hack the code for the layout of the contentPlot. Also, the axis can only be set to the left, right, top or bottom. But I want some flexibility, e.g. when I implement parallel coordinates, I can't put it to the place I really want to put it. So I am thinking I have to write my own axis class instead.

Resources