Updated Accounting Manager

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/admin/accounting-manager@117488 82a268e6-3cf1-43bd-a215-b396298e98cf

src/main/java/org/gcube/portlets/admin/accountingmanager/client/AccountingManager.java

@@ -74,11 +74,12 @@ public class AccountingManager implements EntryPoint {
 		mainPanelLayout = new BorderLayoutContainer();
 		mainPanelLayout.setId("mainPanelLayout");
 		mainPanelLayout.setBorders(false);
+		mainPanelLayout.setResize(true);
 		//mainPanelLayout.getElement().getStyle().setBackgroundColor("rgb(3, 126, 207)");
 		
 		
 		//Main
-		MainDataPanel mainDataPanel=new MainDataPanel(eventBus);
+		final MainDataPanel mainDataPanel=new MainDataPanel(eventBus);
 		MarginData mainData = new MarginData(new Margins(2));
 		mainPanelLayout.setCenterWidget(mainDataPanel, mainData);
 		
@@ -95,12 +96,14 @@ public class AccountingManager implements EntryPoint {
 		//Filters
 		FiltersPanel filtersPanel=new FiltersPanel(eventBus);
 		BorderLayoutData westData = new BorderLayoutData(310);
-		westData.setCollapsible(true);
+		westData.setCollapsible(false);
 		westData.setSplit(false);
 		westData.setFloatable(false);
-		westData.setCollapseMini(true);
+		westData.setCollapseMini(false);
 		westData.setMargins(new Margins(2, 7, 2, 7));
 		westData.setCollapseHidden(true);
+		westData.setMaxSize(310);
+		westData.setMinSize(310);
 		mainPanelLayout.setWestWidget(filtersPanel, westData);
 		filtersPanel.expand();
 		filtersPanel.enable();

src/main/java/org/gcube/portlets/admin/accountingmanager/client/maindata/charts/AccountingChart4Service.java

@@ -1,23 +1,10 @@
 package org.gcube.portlets.admin.accountingmanager.client.maindata.charts;
 
-import java.util.Date;
-
+import org.gcube.portlets.admin.accountingmanager.client.maindata.charts.service.VariableAxisChart;
 import org.gcube.portlets.admin.accountingmanager.client.state.AccountingStateData;
 import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesService;
-import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesServiceData;
 import org.gcube.portlets.admin.accountingmanager.shared.exception.AccountingManagerChartDrawException;
 
-import com.github.highcharts4gwt.client.view.widget.HighchartsLayoutPanel;
-import com.github.highcharts4gwt.model.array.api.ArrayNumber;
-import com.github.highcharts4gwt.model.array.api.ArrayString;
-import com.github.highcharts4gwt.model.factory.api.HighchartsOptionFactory;
-import com.github.highcharts4gwt.model.factory.jso.JsoHighchartsOptionFactory;
-import com.github.highcharts4gwt.model.highcharts.option.api.ChartOptions;
-import com.github.highcharts4gwt.model.highcharts.option.api.SeriesArea;
-import com.github.highcharts4gwt.model.highcharts.option.api.SeriesColumn;
-import com.sencha.gxt.widget.core.client.container.MarginData;
-import com.sencha.gxt.widget.core.client.container.SimpleContainer;
-
 /**
  * Accounting Chart 4 Service
  * 
@@ -50,226 +37,13 @@ public class AccountingChart4Service extends AccountingChartBuilder {
 			return;
 		}
 
-		SeriesService seriesService = (SeriesService) accountingStateData
-				.getSeriesResponse();
-
-		double minRange = ChartTimeMeasure.calculateMinRange(accountingStateData
-				.getSeriesRequest().getAccountingPeriod());
-
-		double interval = ChartTimeMeasure.calculateInterval(accountingStateData
-				.getSeriesRequest().getAccountingPeriod());
-
-		Date dateStart = accountingStateData.getSeriesRequest()
-				.getAccountingPeriod().getStartDate();
-
-		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
-		ChartOptions options = highchartsFactory.createChartOptions();
-		options.chart().zoomType("xy");
-
-		options.title().text("Accounting Service");
-
-		options.subtitle().text("Click and drag in the plot area to zoom in");
-
-		ArrayString colors = options.colors();
-		// colors.setValue(0, "#cc0038");
-		// colors.setValue(1, "#32cd32");
-
-		// xAxis
-		options.xAxis().type("datetime").minRange(minRange);
-
-		// yAxis
-		// options.yAxis().title().text("Exchange rate");
-		// Highcharts.getOptions().colors[0]
-
-		/*
-		 * String multiAxis = "[{" + " \"id\": \"OperationCount\"," +
-		 * " \"labels\": { " + "    \"format\": \"{value}\"," +
-		 * "    \"style\": { " + "      \"color\": \"" + colors.get(1) + "\"" +
-		 * "    }" + " }," + " \"title\": { " +
-		 * "    \"text\": \"Operation Count\"," + "    \"style\": {" +
-		 * "       \"color\": \"" + colors.get(1) + "\"" + "    }" + " }" +
-		 * "} , {" + " \"id\": \"ServiceData\", " + " \"linkedTo\": \"0\","
-		 * +"  \"gridLineWidth\": \"0\"," + " \"title\": {" +
-		 * "    \"text\": \"\"," + "    \"style\": {" + "       \"color\": \"" +
-		 * colors.get(1) + "\"" + "    }" + " }," + " \"labels\": {" +
-		 * "    \"format\": \"{value} ms\"," + "    \"style\": {" +
-		 * "       \"color\": \"" + colors.get(1) + "\"" + "     }" + " }," +
-		 * " \"opposite\": \"true\"" //+ ", \"showFirstLabel\": \"false\"" +
-		 * "}]";
-		 */
-
-		String multiAxis = "[{" + " \"id\": \"OperationCount\","
-				+ " \"labels\": { " + "    \"format\": \"{value}\","
-				+ "    \"style\": { " + "      \"color\": \""
-				+ colors.get(1)
-				+ "\""
-				+ "    }"
-				+ " },"
-				+ " \"title\": { "
-				+ "    \"text\": \"Operation Count\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(1)
-				+ "\""
-				+ "    }"
-				+ " }"
-				+ "} , {"
-				+ " \"id\": \"Duration\", "
-				+ " \"title\": {"
-				+ "    \"text\": \"Duration\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(0)
-				+ "\""
-				+ "    }"
-				+ " },"
-				+ " \"labels\": {"
-				+ "    \"format\": \"{value} ms\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(0)
-				+ "\""
-				+ "     }"
-				+ " },"
-				+ " \"opposite\": \"true\""
-				+ ", \"showFirstLabel\": \"false\""
-				+ "} , {"
-				+ " \"id\": \"MaxInvocationTime\", "
-				+ " \"title\": {"
-				+ "    \"text\": \"Max Invocation Time\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(2)
-				+ "\""
-				+ "    }"
-				+ " },"
-				+ " \"labels\": {"
-				+ "    \"format\": \"{value} ms\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(2)
-				+ "\""
-				+ "     }"
-				+ " },"
-				+ " \"opposite\": \"true\""
-				+ ", \"showFirstLabel\": \"false\""
-				+ "} , {"
-				+ " \"id\": \"MinInvocationTime\", "
-				+ " \"title\": {"
-				+ "    \"text\": \"Min Invocation Time\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(3)
-				+ "\""
-				+ "    }"
-				+ " },"
-				+ " \"labels\": {"
-				+ "    \"format\": \"{value} ms\","
-				+ "    \"style\": {"
-				+ "       \"color\": \""
-				+ colors.get(3)
-				+ "\""
-				+ "     }"
-				+ " },"
-				+ " \"opposite\": \"true\""
-				+ ", \"showFirstLabel\": \"false\"" + "}]"
-
-		;
-
-		options.setFieldAsJsonObject("yAxis", multiAxis);
-
-		// TODO does not seem to be working
-		String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
-				+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
-				+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
-				+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
-
-		options.plotOptions().area()
-				.setFieldAsJsonObject("fillColor", fillcolor).marker()
-				.radius(2).lineWidth(1).states().hover().lineWidth(1);
-
-		SeriesColumn seriesOperationCount = highchartsFactory
-				.createSeriesColumn();
-		seriesOperationCount.name("Operation Count");
-		seriesOperationCount.color(colors.get(1));
-		seriesOperationCount.type("column");
-
-		ArrayNumber dataOperationCount = seriesOperationCount
-				.dataAsArrayNumber();
-
-		seriesOperationCount.pointInterval(interval).pointStart(
-				dateStart.getTime());
-
-		SeriesArea seriesDuration = highchartsFactory.createSeriesArea();
-		seriesDuration.name("Duration");
-		seriesDuration.color(colors.get(0));
-		seriesDuration.yAxisAsString("Duration");
-
-		ArrayNumber dataDuration = seriesDuration.dataAsArrayNumber();
-
-		seriesDuration.pointInterval(interval).pointStart(dateStart.getTime());
-
-		SeriesArea seriesMaxInvocationTime = highchartsFactory
-				.createSeriesArea();
-		seriesMaxInvocationTime.name("Max Invocation Time");
-		seriesMaxInvocationTime.color(colors.get(2));
-		seriesMaxInvocationTime.yAxisAsString("MaxInvocationTime");
-
-		ArrayNumber dataMaxInvocationTime = seriesMaxInvocationTime
-				.dataAsArrayNumber();
-
-		seriesMaxInvocationTime.pointInterval(interval).pointStart(
-				dateStart.getTime());
-
-		SeriesArea seriesMinInvocationTime = highchartsFactory
-				.createSeriesArea();
-		seriesMinInvocationTime.name("Min Invocation Time");
-		seriesMinInvocationTime.color(colors.get(3));
-		seriesMinInvocationTime.yAxisAsString("MinInvocationTime");
-
-		ArrayNumber dataMinInvocationTime = seriesMinInvocationTime
-				.dataAsArrayNumber();
-
-		seriesMinInvocationTime.pointInterval(interval).pointStart(
-				dateStart.getTime());
-
-		for (SeriesServiceData seriesServiceData : seriesService.getSeries()) {
-			dataOperationCount.push(seriesServiceData.getOperationCount());
-			dataDuration.push(seriesServiceData.getDuration());
-			dataMaxInvocationTime
-					.push(seriesServiceData.getMaxInvocationTime());
-			dataMinInvocationTime
-					.push(seriesServiceData.getMinInvocationTime());
-		}
-
-		options.series().addToEnd(seriesOperationCount);
-		options.series().addToEnd(seriesDuration);
-		options.series().addToEnd(seriesMaxInvocationTime);
-		options.series().addToEnd(seriesMinInvocationTime);
-
-		options.chart().showAxes(true);
-
-		options.legend().enabled(true);
-		// options.legend().layout("vertical");
-		// options.legend().align("left");
-		// options.legend().x(120);
-		// options.legend().verticalAlign("top");
-		// options.legend().y(100);
-		// options.legend().floating(true);
-		// options.legend()
-		// .backgroundColor(
-		// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
-
-		HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
-
-		highchartsLayoutPanel.renderChart(options);
-		
-		SimpleContainer container=new SimpleContainer();
-		container.add(highchartsLayoutPanel, new MarginData(0));
+		VariableAxisChart container=new VariableAxisChart(accountingStateData);		
 		
 		accountingChartPanel=new AccountingChartPanel(container);
 
 		accountingChartSpec.setChart(accountingChartPanel);
 
 	}
+
+	
 }

src/main/java/org/gcube/portlets/admin/accountingmanager/client/maindata/charts/service/VariableAxisChart.java

@@ -0,0 +1,437 @@
+package org.gcube.portlets.admin.accountingmanager.client.maindata.charts.service;
+
+import java.util.Date;
+
+import org.gcube.portlets.admin.accountingmanager.client.maindata.charts.ChartTimeMeasure;
+import org.gcube.portlets.admin.accountingmanager.client.resource.AccountingManagerResources;
+import org.gcube.portlets.admin.accountingmanager.client.state.AccountingStateData;
+import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesService;
+import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesServiceData;
+
+import com.github.highcharts4gwt.client.view.widget.HighchartsLayoutPanel;
+import com.github.highcharts4gwt.model.array.api.ArrayNumber;
+import com.github.highcharts4gwt.model.array.api.ArrayString;
+import com.github.highcharts4gwt.model.factory.api.HighchartsOptionFactory;
+import com.github.highcharts4gwt.model.factory.jso.JsoHighchartsOptionFactory;
+import com.github.highcharts4gwt.model.highcharts.option.api.ChartOptions;
+import com.github.highcharts4gwt.model.highcharts.option.api.SeriesArea;
+import com.github.highcharts4gwt.model.highcharts.option.api.SeriesColumn;
+import com.sencha.gxt.cell.core.client.ButtonCell.IconAlign;
+import com.sencha.gxt.core.client.util.Margins;
+import com.sencha.gxt.widget.core.client.button.ToggleButton;
+import com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData;
+import com.sencha.gxt.widget.core.client.container.MarginData;
+import com.sencha.gxt.widget.core.client.container.SimpleContainer;
+import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
+import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
+import com.sencha.gxt.widget.core.client.event.SelectEvent;
+import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
+import com.sencha.gxt.widget.core.client.toolbar.ToolBar;
+
+/**
+ * 
+ * @author giancarlo email: <a
+ *         href="mailto:g.panichi@isti.cnr.it">g.panichi@isti.cnr.it</a>
+ *
+ */
+public class VariableAxisChart extends SimpleContainer {
+
+	private static final String SINGLE_AXIS = "Single Axis";
+	private AccountingStateData accountingStateData;
+	private HighchartsLayoutPanel highchartsLayoutPanel;
+
+	public VariableAxisChart(AccountingStateData accountingStateData) {
+		this.accountingStateData = accountingStateData;
+		forceLayoutOnResize=true;
+		create();
+		
+	}
+	
+
+	
+	private void create() {
+		ToolBar toolBar = new ToolBar();
+		toolBar.setSpacing(2);
+		final ToggleButton toggleBtn = new ToggleButton(SINGLE_AXIS);
+		toggleBtn.setIcon(AccountingManagerResources.INSTANCE.accountingChartVariableAxis24());
+		toggleBtn.setIconAlign(IconAlign.RIGHT);
+		toggleBtn.setValue(false);
+		
+		toggleBtn.addSelectHandler(new SelectHandler() {
+			
+			@Override
+			public void onSelect(SelectEvent event) {
+				if(toggleBtn.getValue()){
+					ChartOptions options = createSingleAxisChart();
+					highchartsLayoutPanel.renderChart(options);
+				} else {
+					ChartOptions options = createMultiAxisChart();
+					highchartsLayoutPanel.renderChart(options);
+				}
+				forceLayout();
+			}
+		});
+		
+		toolBar.add(toggleBtn, new BoxLayoutData(new Margins(0)));
+		
+	
+	
+		//
+		ChartOptions options = createMultiAxisChart();
+
+		highchartsLayoutPanel = new HighchartsLayoutPanel();
+		highchartsLayoutPanel.renderChart(options);
+
+		//
+		VerticalLayoutContainer vert = new VerticalLayoutContainer();
+		vert.add(toolBar, new VerticalLayoutData(1, -1, new Margins(0)));
+		vert.add(highchartsLayoutPanel, new VerticalLayoutData(1, 1,
+				new Margins(0)));
+		
+		add(vert, new MarginData(0));
+		
+	}
+
+	
+	private ChartOptions createMultiAxisChart() {
+		SeriesService seriesService = (SeriesService) accountingStateData
+				.getSeriesResponse();
+
+		double minRange = ChartTimeMeasure
+				.calculateMinRange(accountingStateData.getSeriesRequest()
+						.getAccountingPeriod());
+
+		double interval = ChartTimeMeasure
+				.calculateInterval(accountingStateData.getSeriesRequest()
+						.getAccountingPeriod());
+
+		Date dateStart = accountingStateData.getSeriesRequest()
+				.getAccountingPeriod().getStartDate();
+
+		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
+		ChartOptions options = highchartsFactory.createChartOptions();
+		options.chart().zoomType("xy");
+
+		options.title().text("Accounting Service");
+
+		options.subtitle().text("Click and drag in the plot area to zoom in");
+
+		ArrayString colors = options.colors();
+		// colors.setValue(0, "#cc0038");
+		// colors.setValue(1, "#32cd32");
+
+		// xAxis
+		options.xAxis().type("datetime").minRange(minRange);
+
+		// yAxis
+		String multiAxis = "[{" + " \"id\": \"OperationCount\","
+				+ " \"labels\": { " + "    \"format\": \"{value}\","
+				+ "    \"style\": { " + "      \"color\": \""
+				+ colors.get(1)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"title\": { "
+				+ "    \"text\": \"Operation Count\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(1)
+				+ "\""
+				+ "    }"
+				+ " }"
+				+ "} , {"
+				+ " \"id\": \"Duration\", "
+				+ " \"title\": {"
+				+ "    \"text\": \"Duration\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(0)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"labels\": {"
+				+ "    \"format\": \"{value} ms\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(0)
+				+ "\""
+				+ "     }"
+				+ " },"
+				+ " \"opposite\": \"true\""
+				+ ", \"showFirstLabel\": \"false\""
+				+ "} , {"
+				+ " \"id\": \"MaxInvocationTime\", "
+				+ " \"title\": {"
+				+ "    \"text\": \"Max Invocation Time\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(2)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"labels\": {"
+				+ "    \"format\": \"{value} ms\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(2)
+				+ "\""
+				+ "     }"
+				+ " },"
+				+ " \"opposite\": \"true\""
+				+ ", \"showFirstLabel\": \"false\""
+				+ "} , {"
+				+ " \"id\": \"MinInvocationTime\", "
+				+ " \"title\": {"
+				+ "    \"text\": \"Min Invocation Time\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(3)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"labels\": {"
+				+ "    \"format\": \"{value} ms\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(3)
+				+ "\""
+				+ "     }"
+				+ " },"
+				+ " \"opposite\": \"true\""
+				+ ", \"showFirstLabel\": \"false\"" + "}]"
+
+		;
+
+		options.setFieldAsJsonObject("yAxis", multiAxis);
+
+		// TODO does not seem to be working
+		String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
+				+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
+				+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
+				+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
+
+		options.plotOptions().area()
+				.setFieldAsJsonObject("fillColor", fillcolor).marker()
+				.radius(2).lineWidth(1).states().hover().lineWidth(1);
+
+		SeriesColumn seriesOperationCount = highchartsFactory
+				.createSeriesColumn();
+		seriesOperationCount.name("Operation Count");
+		seriesOperationCount.color(colors.get(1));
+		seriesOperationCount.type("column");
+
+		ArrayNumber dataOperationCount = seriesOperationCount
+				.dataAsArrayNumber();
+
+		seriesOperationCount.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		SeriesArea seriesDuration = highchartsFactory.createSeriesArea();
+		seriesDuration.name("Duration");
+		seriesDuration.color(colors.get(0));
+		seriesDuration.yAxisAsString("Duration");
+
+		ArrayNumber dataDuration = seriesDuration.dataAsArrayNumber();
+
+		seriesDuration.pointInterval(interval).pointStart(dateStart.getTime());
+
+		SeriesArea seriesMaxInvocationTime = highchartsFactory
+				.createSeriesArea();
+		seriesMaxInvocationTime.name("Max Invocation Time");
+		seriesMaxInvocationTime.color(colors.get(2));
+		seriesMaxInvocationTime.yAxisAsString("MaxInvocationTime");
+
+		ArrayNumber dataMaxInvocationTime = seriesMaxInvocationTime
+				.dataAsArrayNumber();
+
+		seriesMaxInvocationTime.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		SeriesArea seriesMinInvocationTime = highchartsFactory
+				.createSeriesArea();
+		seriesMinInvocationTime.name("Min Invocation Time");
+		seriesMinInvocationTime.color(colors.get(3));
+		seriesMinInvocationTime.yAxisAsString("MinInvocationTime");
+
+		ArrayNumber dataMinInvocationTime = seriesMinInvocationTime
+				.dataAsArrayNumber();
+
+		seriesMinInvocationTime.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		for (SeriesServiceData seriesServiceData : seriesService.getSeries()) {
+			dataOperationCount.push(seriesServiceData.getOperationCount());
+			dataDuration.push(seriesServiceData.getDuration());
+			dataMaxInvocationTime
+					.push(seriesServiceData.getMaxInvocationTime());
+			dataMinInvocationTime
+					.push(seriesServiceData.getMinInvocationTime());
+		}
+
+		options.series().addToEnd(seriesOperationCount);
+		options.series().addToEnd(seriesDuration);
+		options.series().addToEnd(seriesMaxInvocationTime);
+		options.series().addToEnd(seriesMinInvocationTime);
+
+		options.chart().showAxes(true);
+
+		options.legend().enabled(true);
+		// options.legend().layout("vertical");
+		// options.legend().align("left");
+		// options.legend().x(120);
+		// options.legend().verticalAlign("top");
+		// options.legend().y(100);
+		// options.legend().floating(true);
+		// options.legend()
+		// .backgroundColor(
+		// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
+		return options;
+	}
+
+	private ChartOptions createSingleAxisChart() {
+		SeriesService seriesService = (SeriesService) accountingStateData
+				.getSeriesResponse();
+
+		double minRange = ChartTimeMeasure
+				.calculateMinRange(accountingStateData.getSeriesRequest()
+						.getAccountingPeriod());
+
+		double interval = ChartTimeMeasure
+				.calculateInterval(accountingStateData.getSeriesRequest()
+						.getAccountingPeriod());
+
+		Date dateStart = accountingStateData.getSeriesRequest()
+				.getAccountingPeriod().getStartDate();
+
+		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
+		ChartOptions options = highchartsFactory.createChartOptions();
+		options.chart().zoomType("xy");
+
+		options.title().text("Accounting Service");
+
+		options.subtitle().text("Click and drag in the plot area to zoom in");
+
+		ArrayString colors = options.colors();
+		// colors.setValue(0, "#cc0038");
+		// colors.setValue(1, "#32cd32");
+
+		// xAxis
+		options.xAxis().type("datetime").minRange(minRange);
+
+		// yAxis
+		// options.yAxis().title().text("Exchange rate");
+		// Highcharts.getOptions().colors[0]
+
+		String multiAxis = "[{" + " \"id\": \"OperationCount\","
+				+ " \"labels\": { " + "    \"format\": \"{value}\","
+				+ "    \"style\": { " + "      \"color\": \""
+				+ colors.get(1)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"title\": { "
+				+ "    \"text\": \"Operation Count\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(1)
+				+ "\""
+				+ "    }"
+				+ " }"
+				+ "} , {"
+				+ " \"id\": \"ServiceData\", "
+				+ " \"linkedTo\": \"0\","
+				+ "  \"gridLineWidth\": \"0\","
+				+ " \"title\": {"
+				+ "    \"text\": \"\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(1)
+				+ "\""
+				+ "    }"
+				+ " },"
+				+ " \"labels\": {"
+				+ "    \"format\": \"{value} ms\","
+				+ "    \"style\": {"
+				+ "       \"color\": \""
+				+ colors.get(1)
+				+ "\"" + "     }" + " }," + " \"opposite\": \"true\"" + // +
+																		// ", \"showFirstLabel\": \"false\""
+																		// +
+				"}]";
+
+		options.setFieldAsJsonObject("yAxis", multiAxis);
+
+		// TODO does not seem to be working
+		String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
+				+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
+				+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
+				+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
+
+		options.plotOptions().area()
+				.setFieldAsJsonObject("fillColor", fillcolor).marker()
+				.radius(2).lineWidth(1).states().hover().lineWidth(1);
+
+		SeriesColumn seriesOperationCount = highchartsFactory
+				.createSeriesColumn();
+		seriesOperationCount.name("Operation Count");
+		seriesOperationCount.color(colors.get(1));
+		seriesOperationCount.type("column");
+
+		ArrayNumber dataOperationCount = seriesOperationCount
+				.dataAsArrayNumber();
+
+		seriesOperationCount.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		SeriesArea seriesDuration = highchartsFactory.createSeriesArea();
+		seriesDuration.name("Duration");
+		seriesDuration.color(colors.get(0));
+		
+		ArrayNumber dataDuration = seriesDuration.dataAsArrayNumber();
+
+		seriesDuration.pointInterval(interval).pointStart(dateStart.getTime());
+
+		SeriesArea seriesMaxInvocationTime = highchartsFactory
+				.createSeriesArea();
+		seriesMaxInvocationTime.name("Max Invocation Time");
+		seriesMaxInvocationTime.color(colors.get(2));
+		
+		ArrayNumber dataMaxInvocationTime = seriesMaxInvocationTime
+				.dataAsArrayNumber();
+
+		seriesMaxInvocationTime.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		SeriesArea seriesMinInvocationTime = highchartsFactory
+				.createSeriesArea();
+		seriesMinInvocationTime.name("Min Invocation Time");
+		seriesMinInvocationTime.color(colors.get(3));
+		//seriesMinInvocationTime.yAxisAsString("MinInvocationTime");
+
+		ArrayNumber dataMinInvocationTime = seriesMinInvocationTime
+				.dataAsArrayNumber();
+
+		seriesMinInvocationTime.pointInterval(interval).pointStart(
+				dateStart.getTime());
+
+		for (SeriesServiceData seriesServiceData : seriesService.getSeries()) {
+			dataOperationCount.push(seriesServiceData.getOperationCount());
+			dataDuration.push(seriesServiceData.getDuration());
+			dataMaxInvocationTime
+					.push(seriesServiceData.getMaxInvocationTime());
+			dataMinInvocationTime
+					.push(seriesServiceData.getMinInvocationTime());
+		}
+
+		options.series().addToEnd(seriesOperationCount);
+		options.series().addToEnd(seriesDuration);
+		options.series().addToEnd(seriesMaxInvocationTime);
+		options.series().addToEnd(seriesMinInvocationTime);
+
+		options.chart().showAxes(true);
+
+		options.legend().enabled(true);
+		return options;
+	}
+
+}

src/main/java/org/gcube/portlets/admin/accountingmanager/client/resource/AccountingManagerResources.java

@@ -106,5 +106,14 @@ public interface AccountingManagerResources extends ClientBundle {
 	
 	@Source("accounting-reload_48.png")
 	ImageResource accountingReload48();
-
+	
+	@Source("accounting-chart-variable-axis_16.png")
+	ImageResource accountingChartVariableAxis16();
+	
+	@Source("accounting-chart-variable-axis_24.png")
+	ImageResource accountingChartVariableAxis24();
+		
+	@Source("accounting-chart-variable-axis_32.png")
+	ImageResource accountingChartVariableAxis32();
+	
 }

src/main/resources/org/gcube/portlets/admin/accountingmanager/accountingman.gwt.xml

@@ -24,8 +24,8 @@
 	<inherits name="com.allen_sauer.gwt.log.gwt-log-TRACE" />
 
 	<!-- Debug CSS style -->
-	<!-- <set-configuration-property name="CssResource.style" value="pretty" 
-		/> -->
+	<!-- <set-configuration-property name="CssResource.style"
+		value="pretty" /> -->
 
 	<!--<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/> -->
 	<inherits name='com.github.highcharts4gwt.highcharts' />
@@ -48,17 +48,18 @@
 		name="locale" values="es" /> <set-property name="locale" value="en, it, es" 
 		/> <set-property-fallback name="locale" value="en" /> -->
 
-	<!-- <set-property name="log_ConsoleLogger" value="ENABLED" />
-	<set-property name="log_DivLogger" value="ENABLED" />
-	<set-property name="log_GWTLogger" value="ENABLED" />
-	<set-property name="log_SystemLogger" value="ENABLED" /> -->
+	<!-- <set-property name="log_ConsoleLogger" value="ENABLED" /> <set-property 
+		name="log_DivLogger" value="ENABLED" /> <set-property name="log_GWTLogger" 
+		value="ENABLED" /> <set-property name="log_SystemLogger" value="ENABLED" 
+		/> -->
 	<!-- Not in GWT 2.6 <set-property name="log_FirebugLogger" value="ENABLED" 
 		/> -->
 
-	<set-property name="log_ConsoleLogger" value="DISABLED" /> <set-property 
-		name="log_DivLogger" value="DISABLED" /> <set-property name="log_GWTLogger" 
-		value="DISABLED" /> <set-property name="log_SystemLogger" value="DISABLED" 
-		/>
+
+	<set-property name="log_ConsoleLogger" value="DISABLED" />
+	<set-property name="log_DivLogger" value="DISABLED" />
+	<set-property name="log_GWTLogger" value="DISABLED" />
+	<set-property name="log_SystemLogger" value="DISABLED" />
 	<!-- Not in GWT 2.6 <set-property name="log_FirebugLogger" value="DISABLED" 
 		/> -->