ChartJS combining similar or close y-axes - javascript

Say I have a chart here with 5 y-axes, I would like to know if it's possible to combine axes that are close to each other, at least 20% difference. Like 1.2m and 1.0m axes, there's 20% difference between them, hence I want them to combine into 1 and assign the corresponding plots to that combined axis.
3.5k and 4.0k would also ideally be combined if they will conform with the 20% diff threshold. On the other hand, 120k axis would be on its own since it has no axes close to its value.
I tried creating a custom logic to group them together but it I got lost pointing the plots to the combined versions. If this is not possible with ChartJS, I would gladly accept.

Related

Anychart Polar Plot line performance

I was trying to draw a polar plot using the Anychart library and I found a strange behavior that I wanted to share. I wanted to draw a polar plot with a number of points that are linked with a line representing different angles. The strange behavior I saw is that sometimes the line belongs to the "shortest path" between points and sometimes belongs to the "longest path", connecting the dots always in a "clockwise" direction.
In my brain, the line should go "clockwise" when increasing the angle (for instance, moving from 45º to 135º) and "counterclockwise" when decreasing the angle (for instance, moving from 135º to 45º).
My question is, is there an option to decide the direction of the line connecting the dots? I have done a test here with the "Anychart" playground option to show this scenario (https://playground.anychart.com/F6srRlRo/12). The "always-clockwise" performance can be seen in the upper left plot, while the desired performance, achieved by dividing the lines into 3 different line series, can be seen in the upper right plot. The problem of the solution I found is that, for longer datasets, depending on the data it might be required to use thousands of different series, which lowers considerably the rendering time of the plot (this can be seen in the lower left and lower right plots, where the left one is faster, but is "always-clockwise" and the right one is slower, but as desired).
any help in how to improve rendering time or plot everything in one simple Line data series?

Q: Plotly.js Linking 2 X Axes

In Plotly.js I am trying to allow users to see two (related) values for positions on the x axis. (Think if I'm doing dates I want it to say "Tuesday" on the lower axis and June 28th 2016 on a linked axis) Linking the axes would preferably preserve the relation between values when scrolling or zooming.
I had a temporary solution in place, where I would change the values from floats (as that was what we were using) to strings with a break character intended to separate the values (which allowed viewing both values at once albeit on one axis), however when tested with floats that were not equally spaced the slope would change visually, which is not desired. Another solution I have tried was to have the ticks be their float values, and then change their values after they were plotted using the "tickvals" and "ticktext" attributes, but I was unable to then hide some tick text while keeping others view-able on the x axis (and with 80 values it became quite busy and unreadable) There is the solution of hiding all of these tick values, but I was hoping there would be a solution where I could see some of them.
I created an example of the problems I am having in jsbin, so I hope it is kosher to link to that. https://jsbin.com/buwuyid/1/edit?html,output (and also hope the link works.)
There was a similar question asked previously, In plotly, how do I create a linked X axis? however that was a year ago and using python, and I was hoping that an implementation that I cannot find has been found, or a solution to one of the other problems I have found could be provided.
Thank you for any help you can provide, and if I can include any more information to help find a solution, please ask.

Dynamic Highcharts with maximum xaxis points

I try to create dynamic highcharts. I use series.addPoint. It works fine but my chart adds points and doesn't move like here - jsfiddle. It can be with 100 points on the screen.
How can I make only 10 points on the screen and hide old points?
http://api.highcharts.com/highcharts#Series
Series.addPoint()'s third argument is a boolean that enables shifting. If your series is not shifting, try setting the third parameter to true.
As for the second part, are you sure you want to "hide" old data? Generally old data should be shifted off the end in a real time graph (which I assume is what you're going for). If you have too many points, you can make your x-axis smaller via Axis.setExtremes(). http://api.highcharts.com/highcharts#Axis

How can you have more than 10 colors represented in the graph and legend in highcharts?

I currently have 12 lines representing 12 different people in a spline graph. I noticed that once it goes beyond ten, the colors and shapes repeat. This makes it hard to distinguish between different people. In the future I will probably have more than 12, which will make this default behavior an even bigger problem.
Is there any way to extend the default number or perhaps to decide on the colors for a pre-set number of people beforehand? This last option would not be ideal if it couldn't be responsive to dynamic numbers of people.
YOu can define colors in array: http://api.highcharts.com/highcharts#colors

How to scale a multi-line Google chart to have maximums at the same height?

I'm using Google Chart API to display a multi-line chart in my application. The graph shows daily income in several currencies.
As you can see, there is a problem when the exchange rate between the currencies is significant (20 CZK = 1 USD). You may notice the little bump at about 1 third. That's actually 18 USD which is (when the exchange rate is taken into account) about 360 CZK.
I need to scale the lines to have their maximums at the same height.
I know I could just use a multiplication mapper but then there would be wrong values in tooltips shown on hover.
What solution would you recommend? I really don't like the idea of rendering the graph on my own. Thanks.
So, what you basicly need is three different Y axes.
I would do it by rendering three graphs side by side,
or three transparent graphs absolutely positioned in one space, if it were possible to render the axes nicely.
or using different units for higher exchange rates (maybe hundreds CZK)

Categories

Resources