Plotting Graph Charts in JavaScript vs. RichFaces

Share this article:

With CloverETL 3.5, we’ve embarked on a journey to vastly improve the monitoring section in our CloverETL Server Console. We’ve been playing around with the idea for a long time, and now we’ve finally started reshuffling things around, putting everything we’ve learned there in a clean and organized way.

They say a picture is worth a thousand words, so we’ve included a nice informative graph chart below to show the server load over time. Nothing too crazy, just two values – running jobs count and heap size.

Seems like an easy thing to do, doesn’t it? With the JavaScript frenzy these days, there must be plenty of libraries available for plotting nice charts on a canvas. Just choose the one you like the most and put it on your page, right?

Sadly, no – it doesn’t work that way. Sure, there are tons of libraries to choose from, but as soon as you choose your favorite one, be prepared to hit compatibility issues. As we use RichFaces to build our web UI, our challenge was putting everything together. My team and I went through the exercise and tried a few and there always was a problem.

First, we tried the dygraphs library, but there’s an IE compatibility issue. Seems like that isn’t a big deal because there’s a pretty simple solution to set compatibility to “IE=EmulateIE7; IE=EmulateIE9“. However, this appears to be in conflict with RichFaces, which requires contradicting “IE=EmulateIE8.“

So we looked elsewhere. The other attempt was with gRaphaël, but it didn’t meet our requirements for being able to display two y- axes. Then we checked Charts.js, but it produced JavaScript errors in IE. The fourth library was jqPlot. That one had compatibility problems with jQuery in RichFaces. Unfortunately, I could go on and on…

I had always hoped that these web browser compatibility issues would be solved one day. Now, I just don’t have the same faith anymore. It looks as if we’ll have to deal with these problems forever, which is not only annoying, but expensive too. (Just think of the overhead and incurred costs this brings!) It’d be so nice if my team could spend time doing more useful things than endless trial and error with libraries that promise to solve a problem, but instead often do a poor job due to inherent lack of discipline among “programmers” these days.

To finish this blog post on a more positive note, here’s one solution that worked for us. The library is named Flot and it had everything we needed. Thanks to their job, we were able to make the monitoring into what it looks like now. So watch out, all these new changes will be available in the 3.5 release.

monitoring

Share this article:

Comments

  1. Ruben says

    Nice blog. I am also trying to get plot in my RichFaces application. But till now I cannot get it working. Could you give me please some small code snippets how to embed a plot in the xhtml file? Thank you in advance.

    • Filip Reichman says

      There is a simple example (it works with RichFaces 3.3.3 and Flot 0.8.1).

      Elements to be included in the head section:


      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
      <!-- to ensure compatibility with Internet Explorer -->
      <!--[if IE]>
      <script language="javascript" type="text/javascript" src="#{contextPath}/js/flot/excanvas.min.js">
      </script>
      <![endif]-->
      <script language="javascript" type="text/javascript" src="#{contextPath}/js/flot/jquery.flot.min.js">
      </script>

      Content of the body:


      <div style="width:640px;height:480px;" >
      <div id="chartDiv" style="width:100%;height:100%;">
      <!-- there will be a chart -->
      </div>
      </div>

      <script type="text/javascript">
      //obtain values from bean
      var chartValues = [
      <a4j:repeat value="#{testCtrl.values}" var="value">
      [
      <h:outputText value="#{value.xvalue}" />
      ,
      <h:outputText value="#{value.yvalue}" />
      ],
      </a4j:repeat>
      ];
      //<![CDATA[
      //call flot to draw chart
      jQuery(function() {
      jQuery.plot("#chartDiv", [ chartValues ]);
      });

      //]]>
      </script>

      Unfortunately jQuery library provided by RichFaces (version 3.3.3) is an older version and doesn’t support a jQuery method detach(), so it has to be replaced with a similar method remove() in the jquery.flot.min.js file.

      I hope it helps.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>