Highcharts diamond plot avoid overlap - javascript

I am using Highcharts library to plot some diamond marker. The plot is between 2015 to 2019 month wise. As here y vaue is not available so I am using fixed point to plot the diamonds on yaxis. But this creates one problem sometimes when diamonds are closer because of nearby dates then it overlaps to each other. Now I want a solution to decide when the diamond marker should go to next level. I mean if there are 3 dates closer so the diamonds should split to three levels so that it shouldn't overlap each other. I have converted date values of xAxis in days.
Can you please suggest how to decide the level based on the days value so that I can avoid overlap.
http://jsfiddle.net/swpsw2fp/Jsfiddle code
http://i.stack.imgur.com/xcNzS.png/Example Image

Related

ChartJS combining similar or close y-axes

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.

ChartJS X-Axis Time Scale Do Not Display Each Element

In graphs with a lot of datapoints the amount of ticks on the X-axis becomes so overwhelming that it's impossible to read. Is there a way to instruct ChartJS to not render each label element on the X-Axis but for instance only the first of each month?
I have tried using a category type instead of time and only filling in the labels for the first of the month but then there is also no label for when you hover over a certain datapoint which makes it impossible to determine what day it is, making it unfit for my requirements.

D3 timeScale remove month boundary tick

I'm trying to build a box plot representing stats of a lot of data(x-time, y-time) The idea is to use d3.extent() to get the domain and then feed it to timeScale to get ticks in nicely chosen intervals. Then I calculate stats for data points between the ticks. Example below:
The approach works well most of the time. Except for the 1st day of the month which creates an additional tick in an uneven spacing ( see above "Wed 31, June" ). I'm currently calculating bar widths and positions manually assuming that the ticks are spaced evenly so the whole chart gets broken.
The data can span any range of time from a week to couple years, so dynamic ticks are required.
Any ideas how to remove the additional tick or make all the ticks spread evenly?
EDIT. Not sure if removing the tick is going to do the trick... probably even spacing is more important here. I looked up other people's questions about similar problems but I'm still confused how to solve my problem.
I've just started using D3 so forgive me if the question is trivial. I'll be happy if you just point me in the right direction.

flot chart- difference in starting point of x axis

I am trying to draw more than one chart inside a single page, each charts aligned to the center of the page, one below the other. I have given fixed with for graph canvas. Since tick values have different ranges, for example, one graph has y axis range [0-10], another has [0 - 10000], the width of y axis ticks are different for each graph. That somehow brings a bad user experience, as the starting point of x axis of each graph differs.
Is it possible to provide x axis width separately in flot chart, or is there any other solution to get all the graphs aligned, starting from same point.
I am attaching a sample sketch for better understanding of the issue.
From the flot API:
"labelWidth" and "labelHeight" specifies a fixed size of the tick
labels in pixels. They're useful in case you need to align several
plots. "reserveSpace" means that even if an axis isn't shown, Flot
should reserve space for it - it is useful in combination with
labelWidth and labelHeight for aligning multi-axis charts.

Disable average values on highchart line graph

I have a line chart that has months as the x-axis and displayed the values on mouse over.
There are a lot of months so when zoomed out fully the chart only has every third month with an average value of the months around that point.
Is it possible to change this so that it will display the exact value of the month displayed rather than an average as it is currently displayed different values when zoomed in to zoomed out.
You can see an example of this on http://www.highcharts.com/ on the USD to EUR chart where 2nd May 2011 displays different values depending on zoom level.
You need to disable datagrouping

Categories

Resources