HighChart

About demo : HighCharts and Ocelotds...

This is a demonstration base on highcharts.
With Ocelot your front end application communicate elegantly with your java back-end

This shows how to implement a dynamic chart. Only tree java classes are used

  • First one is an EJB Scheduler that publishes every seconds to all subscribers new datas.
  • The second one is optional and marshall Date and Float objects to json string.
    it is just for illustrate the mecanism of marshaller.
  • Third one is an EJB Stateless for get the initial datas.

Hover the mouse  highlighted code  and get infos about it

Hover the mouse  highlighted code  and get infos about it

This EJB Scheduler publish every seconds data to all subscribers.

@Singleton
@Startup
public class DataPublisher {
   @Inject
   @JsTopicEvent("values")
   @JsonMarshaller(DataMarshaller.class)
   Event<Object> wsEvent;

   @Schedule(dayOfWeek = "*", month = "*", hour = "*", dayOfMonth = "*", year = "*", minute = "*", second = "*/1", persistent = false)
   public void publishDatas() {
      Random randomGenerator = new Random();
      topicEvent.fire(new Object[]{new Date(), randomGenerator.nextFloat()});
   }
}

Hover the mouse  highlighted code  and get infos about it

This class is optional, it illustrate marshaller mecanism if you want to control the serialization.

public class DataMarshaller implements JsonMarshaller<Object>{
   @Override
   public String toJson(Object obj) throws JsonMarshallingException {
      Object[] datas = (Object[]) obj;
      Date d = (Date) datas[0];
      float f = (float) datas[1];
      return String.format("[%s,%s]", d.getTime(), f);
   }
}

Hover the mouse  highlighted code  and get infos about it

This EJB Stateless, expose method with initial datas.

@Stateless
@LocalBean
@DataService(resolver = Constants.Resolver.EJB)
public class ChartServices {

   public List<Object[]> getDatas(int nb) {
      List<Object[]> datas = new ArrayList<>();
      Long now = new Date().getTime();
      for (int i = nb; i > 0; i--) {
         datas.add(new Object[]{now - i * 1000, Math.random()});
      }
      return datas;
   }
}

Hover the mouse  highlighted code  and get infos about it

This script is mainly highcharts code, only subscriber is part of ocelotds.

'use strict';
new ChartServices().getDatas(1000).then(function(datas) {
	var chart = new Highcharts.StockChart({
		chart: {renderTo: 'graph-area'},
		rangeSelector: {
			buttons: [
				{count: 30, type: 'second', text: '30s'},
				{count: 2, type: 'minute', text: '2m'},
				{count: 5, type: 'minute', text: '5m'},
				{type: 'all', text: 'All'}
			],
			inputEnabled: false,
			selected: 0
		},
		title: {text: 'Live random data'},
		exporting: {enabled: true},
		series: [{data: datas}]
	});
});
subscriberFactory.createSubscriber("values").message(function (vals) {
	chart.series[0].addPoint([vals[0], vals[1]], true, true);
});
ocelotController.addCloseListener(function () {
   ocelotController.open();
});

Hover the mouse  highlighted code  and get infos about it

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="js/charts.js"></script>
...
<div id="graph-area" style="min-width: 310px; height: 400px; margin: 0 auto"></div>