my Apps: * COOL MOVIE BROWSER (sports, tv on net) here * MONEY ON THREAD (personal finance) here * HIT-BALL (cute game) here



EJS Charts parameters

EJS Chart may be a solution, if you need a JavaScript charting to put it on your web application. It means that you don't need to install any plugin, like Adobe Flash Player; you just need to enable the JS scripts for your browser.
This particular library is a little obsolete, it seems that the last touch was in 2009 -- so I wouldn't recommend it, if you start a brand new application. But for the older ones, which are already using it, I have some tips:
Configuration of the chart (create, choose settings, formatters etc) is done strictly in JavaScript. So if you use the GWT, you need to write your JSI native wrappers, like I did :)
Data  can be passed to the chart in 3 formats:
  • JSON objects
  • XML format
  • CSV format
JSON and XML are pretty simple and easy to understand, but the CSV documentation is poor. So, if you need for example to format your balloon tips (tooltip) you have access to some variables, which are defined in the data structure, like it's shown below.
CSV formats are the following (where the separators are | and , with these meaning: | for the separating the attributes for one point, and comma for separating the points):
  • Pie:                      x | label
Example: 12|point 1|,13|point2 will define the slices (12, point 1) and (13, point 2).
  • Bar vertical:       x | y | label
Example: point 1|12|label1,point2|13|label2 will define the bars (12, point 1, label 1) and (13, point 2, label 2).
  • Bar horizontal:       x | y | label    
Example: 12|point 1|label1,13|point2|label2  will define the bars (12, point 1, label 1) and (13, point 2, label 2).
  • Line:                     x | y | label
Example: x_val1|y_val1|label1,x_val2|y_val2|label2 will define the points (x1, y1, label1) and (x2, y2, label2).

Note that the string values which are components of the CSV data must be sure that are escaped, in order to don't break the parsing of it.  Also, there is something called "userdata", if you need to configure some URL links, to follow when you click on a slice, bar or line point. I haven't use it, so I'm not talking about it.
Escaping the separator characters is done like this:
,  =  & # 44 ;
| =  & # 124 ;

Also the labels support simple HTML tags, like <label>, <br/>, <b>, <u>, <i>.
So, if you need custom tooltips, then use the "label" variable, which can be passed through attribute hint_string for the bar and line, but not for the pie (perhaps because of some bug, whatever you put here it's ignored).

Anyways, In pie case there is a workaround, you have to define the function onShowHint(), like this:

var chart = new EJSC.Chart (...);
...
chart.onShowHint = function() {
    return '<label>[parent_title]</label><br/>[series_title]: [x]<br/>[label] ([percent]%) ';
};

For the other chart types (bar and line) you can do it like below, set the hint_string in the definition of the series:

    hint_string='[label] ([percent]%)'
The known variables are, which can be used in formatting the tooltips:
  • pie: [x], [label], [percent], [total], [series_title], [parent_title], [min], [max]
  • bar: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]
  • line: [x], [y], [label], [percent], [total], [series_title], [parent_title], [min], [max], [xaxis], [yaxis]

So, having said these, I hope you are better informed about EJS Charts!
Happy charting!


2 comments:

  1. Cool Movie Browser 2.7.120304 is ready. Added video source Justin TV -- Check it out from http://​www.coolmoviebrowser.com/

    ReplyDelete
  2. Awesome! Thanks for the update, I’ll never be lacking reading material again!
    Very detailed info. I am really happy to I found this entry. Thanks for writing great info.

    mobile developers

    ReplyDelete