Swap axes on a Flot graph on button click? - javascript

Is there an easy way to swap the axes on a Flot graph? Or will I have to write code to iterate over my data and manually switch the X and Y values and axes labels?

Related

Tooltip indicator on axis displaying different data than the data plotted on chart

I have multiple y axis and x axis of chart which I change using setInterval based on different criteria
After those changes the cursor displaying values on y axis and x axis displays different value than the value plotted.
How can the cursor display correct value corresponding to the axis?
Please find screenshot attached highlighting the issue.
Thanks

Modify the XAxis label in ReCharts

I have a Recharts Line graph, and the X-Axis has too many data points, and is looking very congested. Following is the current graph:
Is there a way that I can rotate this text to lets say 270° so that all the labels would be visible?

Highcharts: How to combine Column Range and Line Chart?

I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.
You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted

NVD3: Have labels at certain tick values at the top of the graph

I am using NVD3 to draw a graph that uses an ordinal scale on the x axis for dates. I also have a "focus graph" under it to highlight a specific region to display. To automatically update the ticks that are displayed, I use the tickValues() property.
I want to have label on specific dates at the top of the graph. My solution for this was to create another x axis, but above the the graph, plot the same data, but with a 0 height, and then use tickValues() to set the position of the labels. However, the labels don't show up on the top axis. Is there a solution or alternative?
I guess using a secondary x axis is fine. I forgot to remove the line setting the domain property for my secondary axis. When I removed that, it scaled just like my primary axis :)

change y axis labels in nvd3 scatter-chart

I am trying to have my own y axis labels for the bubble chart in nvd3. Currently the labels are [1,2,3,4,5]. I want them to be displayed as [2,4,8,16,32]. I found the following function,
chart.yAxis.tickValues(['2','4','8','16','32']);
But the labels are not being changed here. I am unable to understand why.
These tick values will not have any effect if the y values themselves are not within the 2-32 range. Right now that chart only has y values up to 2+.
So, if in addition to adding chart.yAxis.tickValues(['2','4','8','16','32']); to the Chart Code/Javascript tab as you have in your question, you also make the following change to the code in the Data(JSON) tab...
y: Math.floor(Math.random() * 33) // change from y: random()
...then you will see the tick values you specified (2-32) show up in the y axis.
NOTE: I assume you are looking at the Scatter / Bubble Chart.

Categories