The following image contains a part of a scatter plot generated with plotly.js:
The red arrow shows the wrong value in ticklabel. It should be 53 2020.
If a zoom is made, then the right ticklabels are obtained:
The layout for xaxis.tickformat gives Week / Year.
This problem appears just when the ticklabel is generated when date is December 31st of any year.
The layout for xaxis is set as:
xaxis: {
type: 'date',
tickformat: '%V\n%Y',
ticks: 'outside',
ticklabelmode: 'period',
tickmode: 'auto',
autorange: true,
},
After a little research, the issue seems to be related to:
Plotly uses Date.getUTCFullyear to calculate ticklabels,
For a date given on December 31st, the result may be different according to getUTCFullYear in MDN.
One attention calling point is that the value of data showed in the first image when the mouse is over the point (following the green arrow), is the right one: 53, 2020!
The code for this issue can be found at:
codepen
Please, can anyone help to solve this issue? Thanks.
Related
is it just me or is the transition in this chart from days to hours really harsh and a bit confusing as well? I took this of a demo from amcharts. Did i miss something? Do i have any chance to make it smoother and how? In the example the transitions from month to week and week to days and days to day, they all work fine. But zooming in further from days it jumps directly to hours. I tried already a lot of variations with groupIntervals, groupCount and valueYGrouped. I know the transition in amCharts4 is definitely smoother by default (going to groups of hours first and also not jumping all over the place).
https://codepen.io/robjsky/pen/VwrxQMz
// Create X-Axis
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
groupData: true,
baseInterval: { timeUnit: "minute", count: 1 },
groupCount: 30,
renderer: am5xy.AxisRendererX.new(root, {})
})
);
I want to keep value labels outside my amChart graph. The problem is that when value label value is over 9999 then I cant display it's all content.
In this example values should be:
25,000
20,000
15,000
10,000
5,000
First digit is missing. I am dealing with this only by setting panel's margin
"panelsSettings": {
"marginLeft": 40,
"marginRight": 20,
},
Is there any more convienient way to be sure that labels are fitting? hardcoding margin seems to be overkill.
This is my example chart: https://jsfiddle.net/29w35txy/1/
As I mentioned in the comments above, it seems that this issue is depending on the default Browser font.
So it is working in Chrome (left), but does not work in Firefox (right) for me:
Beside that you can prevent this by increasing marginLeft of your panelsSettings which you are already using:
"panelsSettings": {
"marginLeft": 60,
// ...
},
Here I forked you fiddle to show the result.
I have a mix of a line chart and bar chart in D3. Though the y-axis(dates) mapped to 'usageDate' is incremental in nature, the resulting line graph seems to plot in the reverse direction.
Image
LineChart
The Line chart plots 'usageTrendDetails' on the X and usageDate on Y. Attaching a link with the code.
Clickhere
The line chart is plotting from left to right, however as highlighted in the image, it suddenly begins plotting from right to left and then goes back in the right direction. Any idea why this happening?
Sort your data before making the line:
data = data.sort(function(a,b){return a.date.getTime() - b.date.getTime();})
working code here
The data is sorted, the issue was with the way dates were being formatted after September. The logic for pre-pending a zero for months 0(Jan) to 8(Sep) wasn't handling Oct, Nov and Dec correctly, resulting in the months after September plotting backwards.
OLD CODE :
if(month<= 8){
month = "0"+(month+1);
}
NEW CODE : Handling Oct - Dec
if(month<= 8){
month = "0"+(month+1);
}else{
month = month + 1;
}
Here's the graph after the issue is fixed.
Click Here
I'm trying to plot data on a line graph where the x-axis are the months January to December.
The issue is: I can't seem to commence the line graph from anything other than the x-axis origin - which would be January.
Question - How can I set a start point, so the data line is plotted from March to December. I could set the data to be 0 for Jan and Feb, but I don't want the line to appear at these months.
Via http://c3js.org/samples/simple_regions.html - I can see you can set start and end regions to specify different types of lines (in this case dashes). Is there a similar way to set a start and end so January and February are hidden.
thanks
You can just use a null data point.
Here's sample code:
var chart = c3.generate({
data: {
columns: [
['data', null, null, 30, 200, 100, 400, 150, 250]
]
}
});
Here's the working fiddle: http://jsfiddle.net/jrdsxvys/1/
I am trying to implement a horizontal bar graph using jqplot library.
In my case, some of the bars of the graph might show extraordinary spike so for example if the 3 bars of my graph have data value of 150(max), the spiked bar might have a data value of 1000.
To accomodate this requirement, I went through the documentation of jqplot and found out that they have something called "breakpoint" to break the axes at some particular place.
http://www.jqplot.com/docs/files/jqplot-linearAxisRenderer-js.html#$.jqplot.LinearAxisRenderer.breakPoints
Now suppose my data for the series looks like this :
[100, 150, 50, 250, 1200, 100]
How in the above case can i make sure that jqplot inserts a breakpoint after 250 and continues the axes ticks at 1200?
[Edited] Ok, so after using the below code I am able to get the breakpoints working:
chart.axes.xaxis.breakPoints=[10,100];
chart.replot();
(i also went through the jqplot source and found out that for breakpoints to work, we need to manually set the ticks, which I did)
But my original problem is still at large!
Suppose my series looks like
[100, 200, 300, 20000]
In this case, even if I use breakpoints, my 3 bars which are of considerably lesser weight seems very tiny as compared to the 4th bar (20000 weight)
this makes the graph unreadable.
Can some one please suggest a way out of this?
"How to implement breakpoints": A replot of data as mentioned above, is not the right way to use breakpoints:
chart.axes.xaxis.breakPoints=[10,100]; chart.replot();
Hava a look on that piece of code, I solved the breakpoint issue:
Having all data values of my barchart < 200 exept of one bar value > 850 i would like to set a breakpoint between 250 and 850.
And here it's how this can be done:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
ticks: [0,50,100,150,200,250,275,825,850,900,950],
tickOptions: {
formatString: '%.0d'
},
renderer: $.jqplot.LinearAxisRenderer,
rendererOptions: {
breakPoints: [275,825],
breakTickLabel: "≈",
forceTickAt0: true
}
}
Important:
Use the LinearAxisRenderer.
add your ticks manually in an array.
set the breakpoint with the rendererOptions.
The Array with the ticks, HAS TO CONTAIN the values, which you like to set the breakpoints in the rendererOptions.
Regards
Matthias
P.S.: I also have a picture of the graph, but you don't allow me to post images until I get 10 reputations.