package org.gcube.portlets.admin.accountingmanager.client.maindata;

import java.util.Date;

import org.gcube.portlets.admin.accountingmanager.client.event.StateChangeEvent;
import org.gcube.portlets.admin.accountingmanager.client.state.AccountingStateData;
import org.gcube.portlets.admin.accountingmanager.shared.data.AccountingPeriod;
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesJob;
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesPortlet;
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.data.response.SeriesStorage;
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesStorageData;
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesTask;

import com.allen_sauer.gwt.log.client.Log;
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.google.gwt.event.shared.EventBus;
import com.sencha.gxt.widget.core.client.FramedPanel;

/**
 * 
 * @author giancarlo email: <a
 *         href="mailto:g.panichi@isti.cnr.it">g.panichi@isti.cnr.it</a>
 *
 */
public class HightChartPanel extends FramedPanel {

	private EventBus eventBus;

	public HightChartPanel(EventBus eventBus) {
		super();
		this.eventBus = eventBus;
		// msgs = GWT.create(ServiceCategoryMessages.class);
		init();
		create();
		bindToEvents();
	}

	protected void init() {
		forceLayoutOnResize = true;
		setBodyBorder(false);
		setBorders(false);
		setHeaderVisible(false);
		setResize(true);

	}

	

	private void create() {
		
	}

	
	// Bind to Events
	private void bindToEvents() {
		eventBus.addHandler(StateChangeEvent.TYPE,
				new StateChangeEvent.StateChangeEventHandler() {

					@Override
					public void onStateChange(StateChangeEvent event) {
						Log.debug("Catch Event State Change");
						doStateChangeCommand(event);

					}
				});
	}

	private void doStateChangeCommand(StateChangeEvent event) {
		if (event.getStateChangeType() == null) {
			return;
		}
		switch (event.getStateChangeType()) {
		case Restore:
		case Update:
			onStateChange(event);

			break;
		default:
			break;

		}

	}

	private void onStateChange(StateChangeEvent event) {
		if (event.getAccountingStateData() == null
				|| event.getAccountingStateData().getAccountingType() == null) {
			return;
		}

		switch (event.getAccountingStateData().getAccountingType()) {
		case JOB:
			createJobChart(event.getAccountingStateData());
			break;
		case PORTLET:
			createPortletChart(event.getAccountingStateData());
			break;
		case SERVICE:
			createServiceChart(event.getAccountingStateData());
			break;
		case STORAGE:
			createStorageChart(event.getAccountingStateData());
			break;
		case TASK:
			createTaskChart(event.getAccountingStateData());
			break;
		default:
			break;
		}

	}

	private double calculateMinRange(AccountingPeriod accountingPeriod) {
		if (accountingPeriod.getPeriod() == null) {
			Log.error("AccountingPeriodMode is null");
			return 0;
		}

		switch (accountingPeriod.getPeriod()) {
		case DAILY:
			// 1 day=24hour * 60min *60sec * 1000 millisec
			return 14 * 24 * 3600 * 1000;
		case HOURLY:
			return 24 * 3600 * 1000;
		case MILLISECONDLY:
			return 10 * 100;
		case MINUTELY:
			return 10 * 60 * 1000;
		case MONTHLY:
			return 6 * 28 * 24 * 3600 * 1000;
		case SECONDLY:
			return 30 * 1000;
		case YEARLY:
			return 5 * 12 * 28 * 24 * 3600 * 1000;

		default:
			return 0;
		}

	}
	
	private double calculateInterval(AccountingPeriod accountingPeriod) {
		if (accountingPeriod.getPeriod() == null) {
			Log.error("AccountingPeriodMode is null");
			return 0;
		}

		switch (accountingPeriod.getPeriod()) {
		case DAILY:
			return 24 * 3600 * 1000;
		case HOURLY:
			return 3600 * 1000;
		case MILLISECONDLY:
			return 100;
		case MINUTELY:
			return 60 * 1000;
		case MONTHLY:
			return 28 * 24 * 3600 * 1000;
		case SECONDLY:
			return 1000;
		case YEARLY:
			return 12 * 28 * 24 * 3600 * 1000;

		default:
			return 0;
		}

	}

	private void createStorageChart(AccountingStateData accountingStateData) {
		clear();
		if (accountingStateData == null
				|| accountingStateData.getAccountingType() == null
				|| accountingStateData.getSeriesRequest() == null
				|| accountingStateData.getSeriesResponse() == null) {
			forceLayout();
			return;
		}
		
		if(!(accountingStateData
				.getSeriesResponse() instanceof SeriesStorage)){
			forceLayout();
			return;
		}
		
		
		SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
				.getSeriesResponse();
		
		double minRange = calculateMinRange(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		double interval=calculateInterval(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
		
		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
		ChartOptions options = highchartsFactory.createChartOptions();
		options.chart().zoomType("x");

		options.title().text("Accounting Storage");

		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\": \"DataVolume\", "
				+ " \"title\": {"
				+ "    \"text\": \"Data Volume\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value} kB\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" + "}]";

		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 seriesDataVolume = highchartsFactory.createSeriesArea();
		seriesDataVolume.name("Data Volume");
		seriesDataVolume.color(colors.get(0));
		seriesDataVolume.yAxisAsString("DataVolume");
		

		ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();

		
		seriesDataVolume.pointInterval(interval).pointStart(
				dateStart.getTime());
		

		for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
			dataOperationCount.push(seriesStorageData.getOperationCount());
			dataDataVolume.push(seriesStorageData.getDataVolume());
		}

		
		options.series().addToEnd(seriesOperationCount);
		options.series().addToEnd(seriesDataVolume);

		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);

		add(highchartsLayoutPanel);
		forceLayout();
	}
	
	private void createServiceChart(AccountingStateData accountingStateData) {
		clear();
		if (accountingStateData == null
				|| accountingStateData.getAccountingType() == null
				|| accountingStateData.getSeriesRequest() == null
				|| accountingStateData.getSeriesResponse() == null) {
			forceLayout();
			return;
		}
		
		if(!(accountingStateData
				.getSeriesResponse() instanceof SeriesService)){
			forceLayout();
			return;
		}
		
		
		SeriesService seriesService = (SeriesService) accountingStateData
				.getSeriesResponse();
		
		double minRange = calculateMinRange(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		double interval=calculateInterval(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
		
		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
		ChartOptions options = highchartsFactory.createChartOptions();
		options.chart().zoomType("x");

		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\": \"Duration\", "
				+ " \"title\": {"
				+ "    \"text\": \"Duration\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value} ms\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" 
				+ "} , {"
				+ " \"id\": \"MaxInvocationTime\", "
				+ " \"title\": {"
				+ "    \"text\": \"Max Invocation Time\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(2)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value} ms\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(2)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" 
				+ "} , {"
				+ " \"id\": \"MinInvocationTime\", "
				+ " \"title\": {"
				+ "    \"text\": \"Min Invocation Time\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(3)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value} ms\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(3)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" + "}]"
				
				;

		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);

		add(highchartsLayoutPanel);
		forceLayout();
	}
	
	private void createPortletChart(AccountingStateData accountingStateData) {
		clear();
		if (accountingStateData == null
				|| accountingStateData.getAccountingType() == null
				|| accountingStateData.getSeriesRequest() == null
				|| accountingStateData.getSeriesResponse() == null) {
			forceLayout();
			return;
		}
		
		if(!(accountingStateData
				.getSeriesResponse() instanceof SeriesPortlet)){
			forceLayout();
			return;
		}
		
		
		SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
				.getSeriesResponse();
		
		double minRange = calculateMinRange(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		double interval=calculateInterval(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
		
		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
		ChartOptions options = highchartsFactory.createChartOptions();
		options.chart().zoomType("x");

		options.title().text("Accounting Portlet");

		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\": \"DataVolume\","
				+ " \"labels\": { " + "    \"format\": \"{value}\","
				+ "    \"style\": { " + "      \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"title\": { "
				+ "    \"text\": \"Data Volume\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " }"
				+ "} , {"
				+ " \"id\": \"OperationCount\", "
				+ " \"title\": {"
				+ "    \"text\": \"Operation Count\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value}\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" + "}]";

		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 seriesDataVolume = highchartsFactory.createSeriesColumn();
		seriesDataVolume.name("Data Volume");
		seriesDataVolume.color(colors.get(1));
		seriesDataVolume.type("column");

		ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();

		
		seriesDataVolume.pointInterval(interval).pointStart(
				dateStart.getTime());
		

		SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
		seriesOperationCount.name("Operation Count");
		seriesOperationCount.yAxisAsString("OperationCount");
		seriesOperationCount.color(colors.get(0));

		ArrayNumber dataOperationCount = seriesOperationCount
				.dataAsArrayNumber();
	
		seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
		
		

		for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
			dataDataVolume.push(seriesStorageData.getDataVolume());
			dataOperationCount.push(seriesStorageData.getOperationCount());
		}

		options.series().addToEnd(seriesDataVolume);
		options.series().addToEnd(seriesOperationCount);

		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);

		add(highchartsLayoutPanel);
		forceLayout();
	}

	private void createTaskChart(AccountingStateData accountingStateData) {
		clear();
		if (accountingStateData == null
				|| accountingStateData.getAccountingType() == null
				|| accountingStateData.getSeriesRequest() == null
				|| accountingStateData.getSeriesResponse() == null) {
			forceLayout();
			return;
		}
		
		if(!(accountingStateData
				.getSeriesResponse() instanceof SeriesTask)){
			forceLayout();
			return;
		}
		
		
		SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
				.getSeriesResponse();
		
		double minRange = calculateMinRange(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		double interval=calculateInterval(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
		
		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
		ChartOptions options = highchartsFactory.createChartOptions();
		options.chart().zoomType("x");

		options.title().text("Accounting Task");

		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\": \"DataVolume\","
				+ " \"labels\": { " + "    \"format\": \"{value}\","
				+ "    \"style\": { " + "      \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"title\": { "
				+ "    \"text\": \"Data Volume\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " }"
				+ "} , {"
				+ " \"id\": \"OperationCount\", "
				+ " \"title\": {"
				+ "    \"text\": \"Operation Count\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value}\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" + "}]";

		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 seriesDataVolume = highchartsFactory.createSeriesColumn();
		seriesDataVolume.name("Data Volume");
		seriesDataVolume.color(colors.get(1));
		seriesDataVolume.type("column");

		ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();

		
		seriesDataVolume.pointInterval(interval).pointStart(
				dateStart.getTime());
		

		SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
		seriesOperationCount.name("Operation Count");
		seriesOperationCount.yAxisAsString("OperationCount");
		seriesOperationCount.color(colors.get(0));

		ArrayNumber dataOperationCount = seriesOperationCount
				.dataAsArrayNumber();
	
		seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
		
		

		for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
			dataDataVolume.push(seriesStorageData.getDataVolume());
			dataOperationCount.push(seriesStorageData.getOperationCount());
		}

		options.series().addToEnd(seriesDataVolume);
		options.series().addToEnd(seriesOperationCount);

		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);

		add(highchartsLayoutPanel);
		forceLayout();
	}
	
	
	private void createJobChart(AccountingStateData accountingStateData) {
		clear();
		if (accountingStateData == null
				|| accountingStateData.getAccountingType() == null
				|| accountingStateData.getSeriesRequest() == null
				|| accountingStateData.getSeriesResponse() == null) {
			forceLayout();
			return;
		}
		
		if(!(accountingStateData
				.getSeriesResponse() instanceof SeriesJob)){
			forceLayout();
			return;
		}
		
		
		SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
				.getSeriesResponse();
		
		double minRange = calculateMinRange(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		double interval=calculateInterval(accountingStateData
				.getSeriesRequest().getAccountingPeriod());
		
		Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
		
		HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
		ChartOptions options = highchartsFactory.createChartOptions();
		options.chart().zoomType("x");

		options.title().text("Accounting Job");

		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\": \"DataVolume\","
				+ " \"labels\": { " + "    \"format\": \"{value}\","
				+ "    \"style\": { " + "      \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"title\": { "
				+ "    \"text\": \"Data Volume\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(1)
				+ "\""
				+ "    }"
				+ " }"
				+ "} , {"
				+ " \"id\": \"OperationCount\", "
				+ " \"title\": {"
				+ "    \"text\": \"Operation Count\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "    }"
				+ " },"
				+ " \"labels\": {"
				+ "    \"format\": \"{value}\","
				+ "    \"style\": {"
				+ "       \"color\": \""
				+ colors.get(0)
				+ "\""
				+ "     }"
				+ " }," + " \"opposite\": \"true\"" + "}]";

		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 seriesDataVolume = highchartsFactory.createSeriesColumn();
		seriesDataVolume.name("Data Volume");
		seriesDataVolume.color(colors.get(1));
		seriesDataVolume.type("column");

		ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();

		
		seriesDataVolume.pointInterval(interval).pointStart(
				dateStart.getTime());
		

		SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
		seriesOperationCount.name("Operation Count");
		seriesOperationCount.yAxisAsString("OperationCount");
		seriesOperationCount.color(colors.get(0));

		ArrayNumber dataOperationCount = seriesOperationCount
				.dataAsArrayNumber();
	
		seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
		
		

		for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
			dataDataVolume.push(seriesStorageData.getDataVolume());
			dataOperationCount.push(seriesStorageData.getOperationCount());
		}

		options.series().addToEnd(seriesDataVolume);
		options.series().addToEnd(seriesOperationCount);

		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);

		add(highchartsLayoutPanel);
		forceLayout();
	}
	
	
}