PDA

View Full Version : Dashed LineSeries



samijaber
30 Sep 2015, 1:07 AM
Hi all,

I struggled trying to implement dashed lines in Chart LineSeries. Nothing is really extensible in the trio LineSeries/PathSprite/SVG to pass a custom SVG/VML Attribute.

To resolve my issue, I have added a new property in LineSeries class :


final LineSeries<GapData> series2 = new LineSeries<GapData>();

series2.setLegendTitle("Gapped");
series2.setGapless(false);
series2.setYAxisPosition(Position.LEFT);
series2.setYField(GapDataAccess.gapped());
series2.setStroke(new RGB(240, 165, 10));
series2.setShowMarkers(true);
series2.setDashPattern("5 5");

I set the dash attribute in LineSeries :


// Only create a line if one doesn't exist.
if (line == null) {
line = new PathSprite();
line.setStroke(stroke);
line.setDashPattern(dashPattern);

chart.addSprite(line);
line.setCommands(dummyCommands);


Then I propagate this attribute to PathSprite.java :



public void setDashPattern(String dashPattern) {
this.dashPattern = dashPattern;
}

public String getDashPattern() {
return this.dashPattern;
}

Then I change the DOM String SVG creation in SVG :


private void applyAttributes(Sprite sprite) {
XElement element = getElement(sprite);

if (sprite instanceof PathSprite) {
PathSprite path = (PathSprite) sprite;
if (path.size() > 0) {
element.setAttribute("d", path.toString());
}
if (path.getDashPattern()!=null) {
setAttribute(element,"stroke-dasharray", path.getDashPattern());
}
if (path.isStrokeLineCapDirty()) {
setAttribute(element, "stroke-linecap", path.getStrokeLineCap());
}
if (path.isStrokeLineJoinDirty()) {
setAttribute(element, "stroke-linejoin", path.getStrokeLineJoin());
}



It could have been very simple to add something similar to GWT getStyle().setProperty(propertyName,propertyValue) in LineSeries. Let's say you have a specific stroke element or style. You could provide in LineSeries/PathSprite/SVG something like setCustomStrokeProperty(String,String).

I have attached the three classes hoping that one day they will be in the GXT Chart trunk.

Hope this helps

Sami