146 lines
3.3 KiB
Java
146 lines
3.3 KiB
Java
package org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs;
|
|
|
|
import org.gcube.portlets.user.accountingdashboard.shared.data.ReportElementData;
|
|
|
|
import com.google.gwt.event.logical.shared.AttachEvent;
|
|
import com.google.gwt.user.client.ui.HTMLPanel;
|
|
|
|
/**
|
|
*
|
|
* @author Giancarlo Panichi
|
|
*
|
|
*/
|
|
public class Chart extends HTMLPanel {
|
|
|
|
private String name;
|
|
private ReportElementData reportElementData;
|
|
|
|
public Chart(String name, ReportElementData reportElementData) {
|
|
super("<canvas id=" + name + "></canvas>");
|
|
this.name = name;
|
|
this.reportElementData = reportElementData;
|
|
|
|
addAttachHandler(new AttachEvent.Handler() {
|
|
|
|
@Override
|
|
public void onAttachOrDetach(AttachEvent event) {
|
|
if (event.isAttached()) {
|
|
drawChart();
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
private String getLabel() {
|
|
return reportElementData.getLabel();
|
|
}
|
|
|
|
public String getCatgegory() {
|
|
return reportElementData.getCategory();
|
|
}
|
|
|
|
public String getXAxisLabel() {
|
|
return reportElementData.getxAxis();
|
|
|
|
}
|
|
|
|
public String getYAxisLabel() {
|
|
return reportElementData.getyAxis();
|
|
|
|
}
|
|
|
|
/**
|
|
* LABEL | | _ yaxis | _ | | | | || |_ | | || | |
|
|
* ---------------------------------------------------
|
|
*
|
|
*
|
|
* *Series_label1 *Series_label2 *Series_label3
|
|
*
|
|
* xAxis
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Series[] { Series : LABEL, dataRow [] Series : LABEL, dataRow [] Series :
|
|
* LABEL, dataRow [] Series : LABEL, dataRow [] }
|
|
*/
|
|
|
|
private native void drawChart() /*-{
|
|
|
|
var name = this.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::name;
|
|
console.log('Element name: ' + name);
|
|
var element = this;
|
|
console.log('Element found: ' + element);
|
|
var canvas = $doc.getElementById(name);
|
|
console.log('Canvas: ' + canvas);
|
|
|
|
var color = Chart.helpers.color;
|
|
console.log('Color: ' + color);
|
|
var barChartData = {
|
|
labels : [ 'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July' ],
|
|
datasets : [ {
|
|
label : 'Dataset 1',
|
|
backgroundColor : 'rgba(255,0,0,0.9)',
|
|
borderColor : 'rgba(255,0,0,1)',
|
|
borderWidth : 1,
|
|
data : [ 1, 2, 3, 1, 2, 3, 4 ]
|
|
}, {
|
|
label : 'Dataset 2',
|
|
backgroundColor : 'rgba(0,0,255,0.9)',
|
|
borderColor : 'rgba(0,0,255,1)',
|
|
borderWidth : 1,
|
|
data : [ 3, 4, 1, 2, 1, 2, 1 ]
|
|
} ]
|
|
|
|
};
|
|
|
|
var label = this
|
|
.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getLabel()();
|
|
|
|
var xAxisLabel = this
|
|
.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getXAxisLabel()();
|
|
|
|
var yAxisLabel = this
|
|
.@org.gcube.portlets.user.accountingdashboard.client.application.mainarea.report.chartjs.Chart::getYAxisLabel()();
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var chart = new Chart(ctx, {
|
|
// The type of chart we want to create
|
|
type : 'bar',
|
|
data : barChartData,
|
|
options : {
|
|
responsive : true,
|
|
legend : {
|
|
position : 'top',
|
|
},
|
|
title : {
|
|
display : true,
|
|
text : label
|
|
},
|
|
scales : {
|
|
xAxes : [ {
|
|
scaleLabel : {
|
|
display : true,
|
|
labelString : xAxisLabel
|
|
}
|
|
} ],
|
|
|
|
yAxes : [ {
|
|
scaleLabel : {
|
|
display : true,
|
|
labelString : yAxisLabel
|
|
},
|
|
ticks : {
|
|
beginAtZero : true
|
|
}
|
|
} ]
|
|
}
|
|
}
|
|
});
|
|
|
|
}-*/;
|
|
|
|
}
|