I have a fairly straightforward graph with a date axis. All the date data is in unix timestamp format.
When I render the graph without the DateAxisRenderer the graph appears as it should do...
(source: 193.169.90.16)
...but when I add in the DateAxisRenderer...
(source: 193.169.90.16)
... the data points appear jumbled.
The only difference between these two graphs is the addition of the following lines...
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
tickInterval: '7 day',
tickOptions: { formatString: '%d %b' }
The whole thing is live here.
Is this is a bug or am I missing something trivial?
The DateAxisRenderer is choking on all the nulls in your input Array. If you take out those points it behaves:
Related
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.
I built a line chart using DC JS with an ordinal x-axis. It works, except that there is some outer padding on the x-axis that I can't seem to get rid of. I'd like the left-most and right-most data points to be flush with the edges of the chart, with no padding. Hopefully I'm not missing something obvious.
I think I'm setting up the x-axis scale incorrectly. Given a data set like this:
var data = [
{ key: 'Monday', value: 3000000 },
{ key: 'Tuesday', value: 3100000 },
{ key: 'Wednesday', value: 3500000 },
{ key: 'Thursday', value: 3070000 },
{ key: 'Friday', value: 4500000 },
{ key: 'Saturday', value: 3003030 },
{ key: 'Sunday', value: 5010000 }
];
Here's what I'm doing with the x-axis scale:
var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]);
chart.x(ordinalScale).xUnits(dc.units.ordinal);
I've also looked at the D3 documentation on ordinal scales, but that hasn't helped yet.
Here's a screen shot (extraneous padding marked in red):
http://imgur.com/a/zmfF4
Here's a working JS fiddle that demonstrates the problem:
https://jsfiddle.net/qvp4fpzy/4/
It's a little confusing dealing with both dc.js and d3.js features around range bands.
dc.js has its own built-in calculations for bar/line x positions, but if the x scale is ordinal, it automatically chooses .rangeBands:
if (_chart.isOrdinal()) {
_x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
_chart._useOuterPadding() ? _outerRangeBandPadding : 0);
} else // ...
source link
So I don't think your call to .rangeRoundBands has any effect. (Should dc.js use rangeRoundBands instead of rangeBands? Maybe, but it doesn't weight on this question.)
It's the third parameter to rangeBands that you want to influence, and that's controlled by chart._outerRangeBandPadding(). (Ignore chart._useOuterPadding() - that's a backward compatibility thing.)
So all you need here is
chart._outerRangeBandPadding(0);
Working fork of your fiddle.
As you see in example: http://jsfiddle.net/p2pp5vdh/, when you put your mouse on chart label at the bottom is hidden, is there any whey to fix it? I found this is only hapenning with minPeriod equal 'fff':
"categoryAxis": {
"minPeriod": "fff",
"parseDates": true
}
Yes, you can use autoMarginOffset to give some extra padding for automatically-calculated margins.
A value of 20 seems to work out pretty nice for your chart:
http://jsfiddle.net/p2pp5vdh/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.
I have a long list of data for x-axis data when drawing a line chart (about 800 entries). The problem is it will not display correctly and overwrite each other. I am thinking a way to show (for example, every one hundred for a grid) and don't know how to do it. Please help me out.
Thanks.
You can specify an array of ticks to display on your chosen axis :
var xTicks = new Array(1,101,201,301,401,501,601,701,800);
--In your plot, add ticks option to your chosen axis :
axes: {
xaxis: {
ticks: xTicks --my ticks array
renderer: $.jqplot.CategoryAxisRenderer,
autoscale: false
}
}
It should do the trick.