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 |
Lukas KBerg 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 #1738821 is a reply to message #1738584] |
Mon, 25 July 2016 08:34 |
Lukas KBerg 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.
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
|
|
|
Goto Forum:
Current Time: Fri Apr 19 03:01:43 GMT 2024
Powered by FUDForum. Page generated in 0.01897 seconds
|