Skip to content

v2.0.0
Compare
Choose a tag to compare
@johnkiernander johnkiernander released this 28 Apr 22:26
· 99 commits to master since this release
2.0.0
86efa63
Classes

All class names have been changed. If you have any old implementations using classes for either styling or shape selection they may break if you choose to migrate them to version 2.

  • To avoid conflicts every class added by dimple will now be prefixed with "dimple-" and they will be made lower case with any non-alphanumeric characters replaced with hyphens. For example a series drawn for a SKU called "Roller Cola 2.0L" will have its shapes classed as "dimple-roller-cola-2-0l".
  • This includes dimples fixed classes, the tooltip for example is now classed as "dimple-tooltip" rather than "tooltip". This example in particular caused a lot of problems due to a conflict with Bootstrap which will no longer occur (Issue #52).
Transitions

All transitions have been improved. While the API previously supported adding transitions, they were at often janky and sometimes completely broken. All drawing code has been updated for more reliable entry, exit and storyboard transitions.

  • The chart.ease property has been added, allowing you to specify a particular d3 ease for your transition. By default "cubic-in-out" is used (as in version 1). All d3 ease values are now supported, the linear transition option can be viewed in this example.
  • A new chart.staggerDraw property has been added which when set to true (default false) causes dimple to stagger drawing along a category axis for unconnected series (bars/bubbles). Here's an example showing ease and stagger in action to put a bit of bounce into your standard bar chart.
  • Axis transitions have been fixed so that category axis values no longer go haywire when values are added (Issue #18).
  • A zero length transition is no longer used by default (dimple now uses no transition at all). Although there is no visible difference the zero length transition caused a race condition meaning shape attributes were not accessible immediately after draw.
  • A series.afterDraw property has been added which can receive a function executed against each shape after a transition completes. The bar labels example has been updated to show how - although this chart doesn't use a transition. Setting a transition on draw will cause the chart to work like this.
  • Chart drawing also accounts correctly for missing data both in single dimensions (Issue #44) and the entire set (Issue #29).
Areas & Lines

The plotting logic for both the area and line charts has been completely rewritten to fix a number of problems in addition to the transition fixes mentioned above.

  • The series.interpolation property has been added to allow line interpolations to be applied to both the area and line charts (Issue #26). Here's a curvy line chart and a curvy area chart for example (Issue #21).
  • In addition to all the standard d3 interpolations, dimple also supports a custom interpolation called 'step'. It uses d3's 'step-after' interpolation but shifts it and fills in some points to create a nicer stepped chart. See examples for lots of new step line and area examples.
  • Missing values in an area series will no longer cause crashing regions (Issue #7).
  • The order that points are connected is now more useful by default but can be correctly overridden with series.addOrderRule (Issue #61).
  • Markers no longer get left behind when redrawing.
  • Dual measure areas now work. The drawing algorithm connects the fewest number of points necessary to encapsulate all the data points. You can see an example here.
Composite Axes

Composite axes (Issue #38) have now been added, meaning that with a slight change to your code you can now mix dimensions on a single axis. Adding a composite axis is as simple as passing an axis reference into the position parameter of a second axis. So this dual axis example (not new in v2.0):

var monthAxis = myChart.addCategoryAxis("x", "Month");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);

see it here

Could be changed so that both measures go on the left-hand axis as follows:

var monthAxis = myChart.addCategoryAxis("x", "Month");
var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);

see it here

Notice the slight change to the third line which turns this into a composite axis meaning both lines are drawn against the same y axis. Measures are probably going to be used in almost all instances of composite axes, but you can also use it for categories, see this rather strange example.

Other Changes

Version 2.0 also brings a host of other changes:

  • If bar chart series have their .stacked property set to false, the bars will be drawn as a floating bar using the opposing axis floating bar width. This can be seen here, they are unlikely to be overly valuable themselves however they are very good overlayed on other series to provide bounds markers.
  • Previously it was not possible to combine a label and real dimensions in the series dimension array. This has been fixed. E.g. mychart.addSeries(["This dimension exists", "This dimension doesn't"], dimple.plot.line);.
  • Axis titles can now be set with a property on the axis myAxis.title = "New Title"; - This can also be seen in the composite axis examples above.
  • Series specific data sets no longer confuse drop-lines when plotted against separate axes (Issue #62).
  • All objects now have their dynamic font size removed and replaced with a fixed 10 pixel font size. I never had good results with the dynamic sizing so it is no longer the default, instead all objects can have their font manually set (Issue #30). If you would like to use version 2.0 but prefer the original handling this can be set manually myAxis.fontSize = "auto".
  • Axes now default to clamped. This means that overriding minimum values works correctly now (Issue #37) but if you prefer you can still override to the previous behaviour using myAxis.clamp = "false".
  • Measure axes now have an option to override the number of ticks (Issue #66). For example you can draw just 3 ticks on the axes with myAxis.ticks = 3. This continues to default to 10. This doesn't work with category axes, however there is a method in my answer here which allows you to do this after the fact.
  • Tooltip text is now defined in an an accessible method which can be overridden like this.
  • Tooltip placement has also been improved to reduce chances of overlapping the edge of the chart.
  • Drawing an automatically sized chart in Firefox no longer throws an error (Issue #54).
  • Legends (and charts) can now be positioned from the right hand side of the chart using a negative value (Issue #63). This is demonstrated in the responsive sizing example
  • Single points for lines and areas will now force a line marker so that something will always be visible.
Example Changes

If you have an implementation based on an example you might want to be aware of these changes:

  • Advanced Bar Labels - Previous code relied on bug where height of segments had not been fully loaded after draw due to a zero length transition causing a race condition. The example code has been significantly changed and simplified using the new .afterDraw property to demonstrate drawing after a transition, however patching the old code to work simply requires you to change the line .attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5) to .attr("y", parseFloat(shape.attr("y")) + height / 2 + 3.5).
  • Christmas Tree Example - This has been removed - It was only meant to be a seasonal example and its April already! It also doesn't work in version 2 as it exploited a bug with area drawing, which was needed to get around the old limitation regarding datasets. It could be recoded much more elegantly now, but that will have to wait until next christmas!
  • Mekko Matrix - As with the label example this relied on the y coordinate being set at its entry value. This is now correctly set to its actual value and therefore the code needs to be ammended by changing the means of getting the y coordinate from parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")), to the more obvious parseFloat(shape.attr("y")),.
  • Waterfall - The code for the waterfall relies on a class name "pad" derived from the series data. As discussed above, dimple now prefixes all class names with "dimple-" meaning the code just needs to be modified so that svg.selectAll(".pad").remove(); becomes svg.selectAll(".dimple-pad").remove();.
Assets 4
Loading