adjust x-axis labels flot js - javascript

Is there any way to limit the number of x axis values that will be displayed given that there are many points to be displayed on the graph? Otherwise,the x-axis labels overlap if you don't zoom. For example, please see the fiddle I've created http://jsfiddle.net/ggggg/jx3q8uoy/10/
enter code here. You can zoom in and out with the mouse wheel. If you click on update I reload new data on the graph but since there are many points for the size of the graph the x-axis values get mixed with each other which is not good. One cannot make a difference which is which unless they zoom. Is there any way to limit the number of x-axis labels to be shown to just a few so that they don't get mixed in such a way when the point amount is big and if you zoom in then you will be able to see the specific x-axis labels? For example, please have a look at the vis.js graph here http://visjs.org/examples/graph2d/03_groups.html. See when you zoom in or zoom out with the mouse wheel the x-axis labels get rescaled and many of them get hidden and if you zoom in they are shown. I need something like for flot.js
Thanks

Related

D3 - Bar Chart zoom behaviour

I have set up a basic Bar Chart but I'm having problems properly implementing zoom behaviour. I am running into 3 issues mainly:
x-axis is expanding to the left side of the origin on zoom and y-axis is expanding below the origin. I want the values on the axes to zoom but the origin should remain at (0,0) for both y and x axis
The heights of the bars don’t increase/decrease when i zoom in/zoom out. Meaning if one bar stands at $400 on the y-axis for a particular value on x, and then when I zoom out the height of the bar should rescale according to the new y-axis. In this case the height should become smaller because the zoomed out axis will now contain a broader range of values.
I have looked at different examples as possible solutions but whats different in my implementation is that I'm using scaleBand instead of scaleLinear in my x-axis and hence I can't use rescaleX on it - which would solve my problems. (I cant use scaleLinear on axis because the values in the x-axis can be dynamic and follow no sequence.
This is a seemingly simple task but I'm having quite a trouble figuring out the best solution. Can anybody guide me?
Examples I've looked at:
https://github.com/d3/d3-zoom/issues/134
Somebody has asked in the comments how can you prevent x-axis from going to the left of the origin but the link provided in reply has been expired
http://jsfiddle.net/r19LL1a4/40/
Here the x-axis domain keeps adjusting according to zoom but mine isn't because it 'overflows' to the left
Codepen: https://codepen.io/abreezasaleem/pen/RwyYBeP

Chartjs not zooming out on x-axis

I have used the zoom plugin for zooming my chart and it was quite useful but I am getting some really difficulty in zooming out. On my x-axis there are dates and I am zooming only the x-axis. If I zoom in and then zoom out it is not doing and showing the chart back to its position however if I simply plot the counting numbers along side the x-axis it zoom out successfully. I have searched but nothing helps in this regard.
Another suggestion I want is can I have a scroll depend on the zoom? like on x-axis when I zoom in graph go out of the canvas total width and we cannot see the future points. So can I have the scroll that increase the scroll as the zoom and we can scroll the graph? Or another suggestion is may be we can have a drag option like drag the chart to the position like we move and pull the chart to and fro.

Highcharts - Area chart advanced layering

I'd like to have a version of a basic area graph where the layering works not by adding one chart and then overlaying a second chart, but instead for every x value, a colored line is drawn from the higher chart's y coordinate to the y coordinate vertically below on the lower chart, and then a different colored line is drawn from this lower chart's y coordinate to the x axis.
Here's images of first the default chart and then my edits as examples.
I anticipate having potentially many charts on one page (anywhere from 1-5,7,10 who knows). And the reason I'm not just putting the "smaller" of the two charts on a higher layer than the "larger" is that they could swap positions over time. See here for two data sets that that swap in which chart has larger values. I'm leaning towards not allowing transparent charts like the default behavior because when many charts of different colors are overlaid their colors mesh together and become difficult to discern.
Is what I've described possible? Are there alternative ways I could accomplish this? Any help would be appreciated.

Rotate labels on HighCharts WindRose plot

Highcharts is being used to create a windrose plot of correlation coefficient between one variable and many others. The default placement of the labels is such that they cannot be read near the top and bottom of the plot. I would like to rotate them such that they read like rays coming out of the center. Using the PlotOptions:rotate option, all labels rotate the same amount but I need each label to rotate by a slightly different angle. How can I achieve this? Thank you all for your kind help!

webgl-surface-plot: Clips at Different Rotations

I am trying to use webgl-surface-plot to give a 3D surface plot of data. At several orientations, the axes labels get clipped. At other orientations, part of the graph gets clipped. Is there a way to expand the canvas size and/or move the axes labels closer to the axes?
You can change the default scale/zoom in the code and then just increase the canvas dimensions via the input options. I plan to add the starting zoom as an option to the chart, when I get a chance. I want to fix the axis labels as well. Currently they are at a fixed distance from the axes. They should, instead, be at a distance dictated by the length of the tick labels. Fixing this will be quite tricky, though.

Categories