Have a look at the bubbles that are placed on the first data point of X-axis.
This is how it looks with the latest version(half cut first bubbles, and even last but there are no data points).
Here is how it looked in the older vaersion that is of 2013.
With the updated version I observe they show half bubble for data plotted on start and end of X-axis. I have a fixed range graph.
PS: I have commercial licence of kendo ui. I had to update because in version 2013 the date timepicker widget had bug in getting the dateand time using min function, which apparently is solved in later version.
Add this to your chart configuration:
$("#chart").kendoChart({
panes: [{
clip: false
}],
...
});
Documentation about this chart property could be find here:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-panes.clip
Related
Trying to debug an issue when switching from 3.x series of d3 to the modular 4.x+ version. I am developing with dimple.js which builds upon d3.
The problem occurs when redrawing a graph via a transition, x-axis tick labels are misplaced. This does not occur using the older versions. JSFiddle with old, correct behavior. JSFiddle with new, incorrect behavior.
The problem appears to be the 3rd parameter to rotate: the correct labels have a non-zero value like
transform="rotate(90,0,231.90625) translate(-5, 0)"
while the misplaced labels have 0 for the 3rd parameter.
transform="rotate(90,0,0) translate(-5, 0)"
A few notes I've discovered while trying to debug:
Labels are only misplaced when using a d3 transition. Dimple normally uses
ease-cubic-in-out but if the developer specifies 0 milliseconds in draw(), the transition is skipped entirely, and the labels always show up correctly.
Dimple populates the rotate values by calling getBBox() on text elements and using the resulting height: see line 300 of dimple 2.2 draw() and line
301 of dimple 2.3 draw(). When using the new version, that bounding box is empty on elements which will be incorrectly positioned: SVGRect {x: 0, y: 0, width: 0, height: 0}
I attempted to identify the differences in the elements when
they are created, not sure if this is the source of the difference
but I was unsuccessful anyway. (I believe it occurs in the functions
at: line 8983 in https://github.com/d3/d3/blob/v3.5.17/d3.js and at
line 47 in https://github.com/d3/d3-axis/blob/master/src/axis.js
Just to reiterate, with dimple 2.2 and below, which rely on d3 3.x,
the label transitions work fine. It's only when upgrading to dimple
2.3 and d3 4+, that the incorrect behavior shows up. Obviously there could be a difference in dimple but after walking through the
code (virtually identical between dimple versions) I believe it is d3
that introduces the breaking change.
I've created 2 pie charts in an analysis and one of them seems to have its labels overlapping while the other has callouts and prevents any overlaps. I have created them in the exact same way and they both have the same properties.
Another strange thing is, this doesn't occur all the time. sometimes when I open an analysis/dashboard, both the pie charts look fine and when I refresh the page or come back to it later, then one of the chart has overlapping labels. Can anyone help me fix this.
Check out MOS Doc ID Doc ID 2260470.1 - you'll have to live with it at the moment
I am trying to perform a visualisation using D3's bar chart graph. Unfortunately, I am having some trouble to get it running as I expect.
Here's a link to what I am seeing:
Block Example
I would like to get a range of data from 2012 until the end of 2017 in the x-axis (even if the data point is zero).
Have a label for each tick. Currently, the x axis has labels only for a few.
For whatever reason, you are overriding the previously set domain for the x scale, which is the one you want (going from 2012 to 2018).
Thus, simply remove this line:
x.domain(data.map(function(d) { return timeFormatter(d.Date); }));
Here is your updated bl.ocks: https://bl.ocks.org/anonymous/be8f59fa47b9ca274934e377ac3d899a
I'm learning nvd3.js to draw charts. From a sample from the site, I pick following simple code to test:
chart = nv.models.lineChart()
.margin({ left: 100, right: 100 }) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
But when I'm running the code it says that transitionDuration doesn't exist. If I remove that line everything works fine.
Question: Why this function doesn't exist? Am I wrong somewhere or is there any additional library required to be loaded?
The function .transitionDuration() had a rather short-lived guest appearance within NVD3's lineChart. It is gone by the time of writing, but continues to cause confusion, mostly because the page's Simple Line Chart example still refers to it. However, the lineChart example on the NVD3.js page is broken and should no longer be used. For an up-to-date list of examples the site recommends cloning the GitHub Repository.
The function .transitionDuration() was introduced by commit d57a84 in August 2013 and was deprecated by commit e177cae just five months later. As can be seen from its GitHub history, it has been forwarding to chart.duration() some time afterwards:
chart.transitionDuration = function(_) {
nv.deprecated('lineChart.transitionDuration');
return chart.duration(_);
};
The function was finally removed by commit 92ec4bc and is therefore no longer available. As a direct replacement you may call function .duration() of lineChart.
Alternatively, the chart may be configured by calling chart.options() passing in the duration as a property of the options object.
chart = nv.models.lineChart()
.options({
duration: 500
})
;
Update Nov 9, 2015
Ironically, even the new example from the GitHub repository is flawed. It uses the wrong property name transitionDuration in the options object used for configuration. This will just add the property transitionDuration which will do no harm and throw no errors because it is unknown, but will have no effect either. It needs to be changed to duration to achieve the desired effect.
chart = nv.models.lineChart()
.options({
transitionDuration: 300, // This should be duration: 300
useInteractiveGuideline: true
})
;
Update Aug 19, 2016
The above mentioned shortcoming in the lineChart example from the GitHub repository was fixed as of May 21, 2016 by commit a683c97.
Adding this answer for anyone else who happens to stumble upon this issue with bad sample code -- the examples on NVD3.org are outdated, and the site currently suggests to clone the Github repository for the latest examples. For a line chart, the latest example is here: https://github.com/novus/nvd3/blob/master/examples/lineChart.html
I've created a page using dc.js/d3.js with multiple bar charts and a row chart, and when I hover over them and interact, the brush functionality works as expected in all charts.
I'm trying to get just one of the charts to have the brush and a range appear on page load, but when I try this using .filter on one chart, the other charts become disabled. I have also experimented with .extent.
Image of the two version of the charts:
http://neil-s.com/unison/images/Brush3.png
I have looked at some related posts on SO, but they aren't quite what I need. The main crossfilter page has an example, but since the code is so different, I want to see if I can retain what I have, otherwise I'll use the crossfilter page code.
Updated:
Here is a jsfiddle - http://jsfiddle.net/jth32/22/
And here is a small sample of the bar chart code:
// Bar Chart 3-------------------------------
psalBarChart
.width(300).height(150)
.dimension(psalDim)
.group(psalGroup)
.x(d3.scale.linear()
.domain([25, 40]))
.xAxisLabel("Salinity")
.centerBar(true);
// Bar Chart 4 -----------------------------------
depthBarChart
.width(300).height(150)
.dimension(depthDim)
.group(depthGroup)
.x(d3.scale.linear()
.domain([0, 2050]))
.xAxisLabel("Depth")
.centerBar(true)
//.filter([0,1000]) // Creates Brush, but disables other charts
Thanks
I found out it had to do with the version of dc.js that I was using. The latest version on github (v2.0) is what I had, but the CDN link I used in jsfiddle used version 1.6.0, and that works fine as Ethan mentioned. Once I switched to 1.6.0 in my dev environment, that fixed my issue.
I posted a message to the dc-js google user group, and I'll add another message here if this is indeed a bug in dc.js v2.0.