Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » RAP Incubator Add-Ons - Chart, Creation new Types(How to properly create new Chart types.)
RAP Incubator Add-Ons - Chart, Creation new Types [message #1738348] Tue, 19 July 2016 08:21 Go to next message
Lukas KBerg is currently offline Lukas KBergFriend
Messages: 2
Registered: July 2016
Junior Member
I have recently started to work with the RAP Incubator Chart-Addon and i wonder if it is possible to add other chart types provided by the d3 library. In this case, i have tried to add the BulletChart type, however, launching the application jut shows "No data available". Any ideas?

I can imagine that either the .css file has not been found or some code snippet is missing in the .js file.

BulletChart.java
import org.eclipse.rap.addons.chart.NvChart;
import org.eclipse.rap.addons.chart.internal.ColorUtil;
import org.eclipse.rap.json.JsonArray;
import org.eclipse.rap.json.JsonObject;
import org.eclipse.rap.json.JsonValue;
import org.eclipse.swt.widgets.Composite;

public class BulletChart extends NvChart {

	public BulletChart(Composite parent, int style) {
		super(parent, style, "nv-bullet");
		requireJs(registerResource("chart/nv/nv-bullet.js"));
	}

	public void setItems(BulletChartDataItem... items) {
		JsonArray values = new JsonArray();
		for (BulletChartDataItem item : items) {
			values.add(toJson(item));
		}
		System.out.println( values.toString() );
		setItems(values);
	}
	
	public static JsonObject toJson(BulletChartDataItem item) {
		JsonObject json = new JsonObject().add("title", item.title);
		if (item.subTitle != null) {
			json.add("subTitle", item.subTitle);
		}
		if (item.ranges != null) {
			JsonArray arr = new JsonArray();
			for (double d : item.ranges) {
				arr.add(d);
			}
			json.add("ranges", arr);
		}
		if (item.measures != null) {
			JsonArray arr = new JsonArray();
			for (double d : item.measures) {
				arr.add(d);
			}
			json.add("measures", arr);
		}
		if (item.markers != null) {
			JsonArray arr = new JsonArray();
			for (double d : item.markers) {
				arr.add(d);
			}
			json.add("markers", arr);
		}
		if (item.color != null) {
			json.add("color", ColorUtil.toHtmlString(item.color));
		}
		return json;
	}
}

BulletChartDataItem.java
import org.eclipse.swt.graphics.RGB;

public class BulletChartDataItem {
	
	protected final String title;
	
	protected final String subTitle;
	
	protected final double[] ranges;
	
	protected final double[] measures;
	
	protected final double[] markers;
	
	protected final RGB color;
	
	public BulletChartDataItem(String text, double[] ranges, double[] measures, double[] markers) {
		this(text, null, ranges, measures, markers, null);
	}

	public BulletChartDataItem(String text, String subTitle, double[] ranges, double[] measures, double[] markers) {
		this(text, subTitle, ranges, measures, markers, null);
	}

	public BulletChartDataItem(String text, String subTitle, double[] ranges, double[] measures, double[] markers,
			RGB color) {
		super();
		this.title = text;
		this.subTitle = subTitle;
		this.ranges = ranges;
		this.measures = measures;
		this.markers = markers;
		this.color = color;
	}
	
	public String getTitle() {
		return title;
	}

	public String getSubTitle() {
		return subTitle;
	}

	public double[] getRanges() {
		return ranges;
	}

	public double[] getMeasures() {
		return measures;
	}

	public double[] getMarkers() {
		return markers;
	}

	public RGB getColor() {
		return color;
	}
	
}

nv-bullet.js
rwt.chart.register( "nv-bullet", function( widget ) {  
	  var chart = nv.models.bulletChart();
	  return chart;
	});

BulletChartSnippet.java
import org.eclipse.rap.addons.chart.basic.BulletChart;
import org.eclipse.rap.addons.chart.basic.BulletChartDataItem;
import org.eclipse.rap.rwt.application.AbstractEntryPoint;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Listener;

public class BulletChartSnippet extends AbstractEntryPoint {

  private BulletChart bulletChart;

  @Override
  public void createContents( Composite parent ) {
    parent.setLayout( new GridLayout() );
    createBulletChart( parent );
    createUpdateButton( parent );
    update();
  }

  private void createBulletChart( Composite parent ) {
    bulletChart = new BulletChart( parent, SWT.NONE );
    bulletChart.setLayoutData( new GridData( SWT.FILL, SWT.FILL, true, true ) );
    bulletChart.addListener( SWT.Selection, new Listener() {

      @Override
      public void handleEvent( Event event ) {
        System.out.println( "Selected bullet item #" + event.index );
      }
    } );
  }
  
  private void createUpdateButton( Composite parent ) {
    Button button = new Button( parent, SWT.PUSH );
    button.setText( "Change data" );
    button.addListener( SWT.Selection, new Listener() {
      @Override
      public void handleEvent( Event event ) {
        update();
      }
    } );
  }
  
  private void update() {
    bulletChart.setItems( createItems() );
  }
  
  private static BulletChartDataItem[] createItems() {
    return new BulletChartDataItem[] {
      new BulletChartDataItem( "Revenue", "US$, in thousands", new double[] { 150, 225, 300 }, new double[] { 220, 270 }, new double[] { 250 } ),
      new BulletChartDataItem( "Profit", "%", new double[] { 20, 25, 30 }, new double[] { 21, 23 }, new double[] { 26 } ),
      new BulletChartDataItem( "Order Size", "US$, average", new double[] { 350, 500, 600 }, new double[] { 100, 320 }, new double[] { 550 } ),
      new BulletChartDataItem( "New Customers", "count", new double[] { 1400, 2000, 2500 }, new double[] { 1000, 1650 }, new double[] { 2100 } ),
      new BulletChartDataItem( "Satisfaction", "out of 5", new double[] { 3.5, 4.25, 5}, new double[] { 3.2, 4.7}, new double[] { 4.4 } ),
      };
  }
}
Re: RAP Incubator Add-Ons - Chart, Creation new Types [message #1738584 is a reply to message #1738348] Thu, 21 July 2016 07:03 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2263
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi Lukas,
it's great that you are trying to create additional charts. By looking
into the code I can't find anything problematic. You could do several
things to debug the problem:
1. Ensure that the items are rendered correctly - put console.log in
chart.js#setItems. Check the format of the JSON.
2. Create simple example (HTML page without RAP) and use the rendered
items there to ensure that the data are in correct format.
3. The "No data available" message comes from the library... try to
locate from where it's printed.
Do you want to contribute the developed charts to the RAP chart
incubator project once it's ready? If so, please open an enhancement
request and provide your contribution via Gerrit.
Best regards,
Ivan

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: RAP Incubator Add-Ons - Chart, Creation new Types [message #1738821 is a reply to message #1738584] Mon, 25 July 2016 08:34 Go to previous message
Lukas KBerg is currently offline Lukas KBergFriend
Messages: 2
Registered: July 2016
Junior Member
Hello Ivan,

thank you for your support! I have looked at your points and came to the following results:

RAP should work independent from the charts, i have tested existing charts (line-chart, bar-chart) which are displayed correctly in the browser. You have also suggested to log the data from the charts.js, it looked ok for me when displayed in the browsers console.

charts.js data log
[{
	"title": "Revenue",
	"subTitle": "US$, in thousands",
	"ranges": [150, 225, 300],
	"measures": [220, 270],
	"markers": [250]
}, {
	"title": "Profit",
	"subTitle": "%",
	"ranges": [20, 25, 30],
	"measures": [21, 23],
	"markers": [26]
}, {
	"title": "Order Size",
	"subTitle": "US$, average",
	"ranges": [350, 500, 600],
	"measures": [100, 320],
	"markers": [550]
}, {
	"title": "New Customers",
	"subTitle": "count",
	"ranges": [1400, 2000, 2500],
	"measures": [1000, 1650],
	"markers": [2100]
}, {
	"title": "Satisfaction",
	"subTitle": "out of 5",
	"ranges": [3.5, 4.25, 5],
	"measures": [3.2, 4.7],
	"markers": [4.4]
}]

Also, i was able to locate the error message from the library:

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js
// Display No Data message if there's nothing to show. (quartiles required at minimum)
            if (!data || !data.length || 
                    !data.filter(function(d) { return d.values.hasOwnProperty("Q1") && d.values.hasOwnProperty("Q2") && d.values.hasOwnProperty("Q3"); }).length) {
                var noDataText = container.selectAll('.nv-noData').data([noData]);

                noDataText.enter().append('text')
                    .attr('class', 'nvd3 nv-noData')
                    .attr('dy', '-.7em')
                    .style('text-anchor', 'middle');

                noDataText
                    .attr('x', margin.left + availableWidth / 2)
                    .attr('y', margin.top + availableHeight / 2)
                    .text(function(d) { return d });

                return chart;

I still havent found the issue tough, the content is still not displayed correctly. Confused
I suppose that "!data || !data.length" should return false, because the data looks fine, maybe there are missing properties that nees to be set for the chart?

EDIT:
According to Lucas on StackOverflow
Quote:

Either

  • There is no data array of series to display.
  • There is a data array, but it is empty.
  • There is a non-empty array of series, but all the series have empty 'values' arrays (no data-points).


I have logged the data right before it is rendered in charts.js and i cant see any issues?

[Updated on: Mon, 25 July 2016 09:04]

Report message to a moderator

Previous Topic:Single Sourced RCP/RAP application howto
Next Topic:Occasional Network Error popup
Goto Forum:
  


Current Time: Fri Feb 23 05:24:49 GMT 2018

Powered by FUDForum. Page generated in 0.02078 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software