brainstorm

Thursday, August 14, 2014

NextReports: HTML Text inside PDF/RTF

Sometimes data inside database may contain simple HTML which has some formatting using tags like ,,, . When we render to a HTML file, we will see data formatted as needed.

But it would be nice to have it also in PDF / RTF files. Starting with NextReports 7.3 this will be possible out-of-the-box. The only requirement is that data starts with < html > and ends with < /html > and contains a correctly formed HTML string.

Let's say we have a column in which data is HTML text like:

<html>Winters</html>

Then our PDF/RTF exported reports will look like the following:

If your column does not contain < html > and < / html > tags , you can create an expression and add them by yourself.

Tuesday, August 05, 2014

Display revisited

NextCharts 7.2 introduced a new type of report / widget called display. You can read about it here.

One thing that needs to be polished is title alignment. In 7.2 release title is aligned with value. This is good in all cases when value is big enough to be at least length comparable with title. But in case the value is small and title is longer, display does not look very nice.

Lets take a simple display example when the value is smaller than the title:

In such cases it would be nicer to center the title text. That's why we added a new property to NextCharts display making json containing titleAlignment with two possibilities: center or alignToValue. By default, alignToValue is selected if property is undefined. Choosing center for this property will make the widget looks as we desired:

When we define the report in NextReports Designer 7.3, title band element can have horizontal alignment property selected as center or left (right is not considered, generating inside json alignToValue).

Monday, July 21, 2014

Scheduler Template Fields

NextReports Scheduler allows to schedule reports at some moments in time.

Special kind of reports like Alarm,Indicator and Display can be scheduled to raise an alert if the corresponding value is in some limits. To show the actual value in the email sent, a special template field ${val} is used.

NextReports 7.2 will add more template fields which can be used in email's subject or body. These fields are:

${date} for current date
${time} for current time
${name} for report name

Wednesday, June 18, 2014

NextReports: Report & Chart Internationalization

Starting from 7.2 version, NextReports will allow to have internationalized reports and charts. Users can define a set of string keys, a set of languages and the values for keys in every language. This is a special action found in Tools menu:

Only one language can be set as default. Default language is the one used when the report is run from designer. On the server side, Locale language set in Settings > General is used. If server Locale language is not defined inside report or chart, then the default language from report/chart is used.

The following things can be internationalized in reports & charts:

static text
parameters run time names
layout cell's pattern property
database column values (through expressions)
chart title, description, legends and tooltips

After the keys are defined, users can use them between @@ markups.

For example, a report layout with internationalized title and header column names looks like:

Our date column cell has an internationalized pattern:

where our datePattern key can be MM-dd-yyy or dd/MM/yyyy or any date pattern is needed.

$E{Activity} expression is defined to allow for database strings internationalization:

Knowing your values for Activity_Code column allows to define the needed keys: WRK, MTG, TRV, ADM (as you can see in first image). This is possible, because internationalization for expression is always done after it's evaluation.

Any parameter can have it's runtime name internationalized:

A chart can have title, description, X legend, Y legend, column legends and tooltip internationalized. For tooltip, user can enter even more than one key. This is useful for bubble charts where you can have more information inside tooltips. Such string can be like the following:

#label
@@lifeExpectancy@@: #x
@@fertilityRate@@: #val
@@region@@: #c
@@population@@: #z

Using internationalized reports and charts will make server interaction more language-dependent. See below same dashboard in romanian and english:

Wednesday, June 11, 2014

NextCharts: Alarm Widget

'Alarm' is the oldest widget used by NextReports Server. It is just a status button with a specific color and a text. NextCharts 1.2 will contain alarm widget alongside indicator and display.

Being drawn on a HTML5 canvas, we can also add a shadow property for text and a simple animation. Json is very simple:

{
   "text": "Project delay is imminent! (Only 42 hours worked)",
   "color":"red",
   "background":"white",
   "shadow":true"
}

Now, NextCharts widgets is a bigger family:

Monday, June 02, 2014

Display Report and Widget

From version 7.2 of NextReports a new type of special report is added. This is Display, and you can read about it in previous post.

As other special reports, there is a convention of representing this report. A "display" report layout looks like:

Header row band contains a title (in this case with a parameter value) and two boolean values for shouldRise and shadow properties described in previous post.

Detail row contains one column value ($C{value}) or two column values ($C{prev}). Second column value is the previous one (on a previous period of time). In case we have two values, inside band detail we will also have two expressions:

- up : to tell how "display" arrow is:

This is just a comparison between current value and previous value.

- percent : to compute the previous value as a percent:

In our example we have a table with quarter values, and we use a parameter Quarter:

Our query obtains the current and previous values as two database columns:

In our query "value" column contains the actual value and "quarter" column is the quarter string Q1, Q2, Q3 or Q4.

This is the theory behind a "display" report. This type can be selected from report root node inside layout.

To create a "display" report, users will use the Wizard tool. First step is to select a "display" type:

Following step

Then, after data source and columns/query selection steps, user has to choose one or two columns:

Following step will allow user to define the report:

In our case, we enter the parameter inside title, we choose some colors and that our value rising is a "good" thing. By clicking finish we will obtain the layout shown at the beginning of this post. Automatically the generated report will have "display" type selected.

Going to server, after a "display" report publish, users are allowed to add such widgets to dashboards:

Although, server will allow to see "display" widgets in statistics and to search for this kind of reports.

Tuesday, May 27, 2014

NextCharts: Display Widget

A new widget was added to NextCharts html5 library: Display.

"Display" shows a value (without min/max boundaries like those used for Indicator) which is associated with a period of time. You can think as example for: Number of site visitors per day, Interest Rate per month, Profit per year.Although, this widget has the possibility to show how this value performed regarding a previous value (on previous period of time).

Json for such widget is like:

{
   "value": "2.354",
   "valueColor":"#004CB3",
   "title":"Visitors",
   "titleColor":"blue",
   "previous":"1.17%",
   "previousColor":"#c0c0c0",  
   "up":true,
   "shouldRise":true,
   "background":"white",
   "shadow":true"
}

Besides title, value and previous values and colors, we can have a background color and some boolean expressions:
- shadow: to show or not a shadow
- up: true for up arrow, false for down arrow
- shouldRise: true to indicate that a rise in value is a good thing, false to indicate that a lower value is a good thing. For example: a rising number of visitors is good, a lower value of bounce rate is good.

Depending on last two properties we can have a green or a read arrow if the value evolves in the "good" direction or not.

Thursday, May 22, 2014

NextCharts: Indicator

Indicators are special widgets that were added in 6.0 version of NextReports. You can read about them here.

Because NextCharts HTML5 library appeared in 7.0 version, it was time to move our indicator to NextCharts. So, NextCharts 1.2 will contain a new nextWidget function and this will be used by NextReports Server from 7.2 version.

A sample Json object for indicator is like:

{
     "title": "Balance",  
     "description":"monthly",
     "unit":"$",
     "value":200,
     "min":0,
     "max":1000, 
     "showMinMax":true,                          
     "color":"blue"             
 }

with following result:

You can view an HTML test in NextCharts github repository.

Tuesday, May 20, 2014

NextReports: Header Expressions with Functions

NextReports designer layout allows to insert functions and expressions.

Function is created on a column or on one existing expression.
Expression can contain columns, variables, parameters and functions.

Till version 7.2, expressions could contain functions, only if expressions were found in footer or group footer. Also functions could be inserted only in footers till 6.2 and also in headers from 6.2+.

From version 7.2, expressions in headers can also contain functions. To see this in action we create a Timesheet report with functions and expressions in headers (instead of footers, like in demo report).

Report Layout is as in following picture.

We can see in header band all the functions and also expressions that compute percent values from total. For example "Administration Hours Percent" is a simple expression like:

You can see that "Functions" selection is possible here.

Similar, in group G1 header we compute the percent of worked hours per project:

HTML result will show us computed values for expressions with functions:

Monday, May 12, 2014

NextReports Server: Auto open generated reports

Everytime you run a report in NextReports Server, a new message will popup when the report is done, showing the link of the artifact. User clicks that link and the report is opened with the default viewer. This is the normal way, especially if your reports take some time to run.

But there are some cases when all your reports are fast (instant running) and users want an option to automatically open generated reports. From version 7.1, settings contain a new property called "auto open". If this is checked, after a report is run, the message will popup like in normal case, but the report will also be automatically open.

So, feel free to use this option.

Tuesday, April 29, 2014

NextReports: Generate an excel file based on existing template

NextReports 7.1 will introduce a new feature which will allow to generate an excel file based on one existing template file.

What does it mean? You may have an excel file with 2 (or more) sheets. One sheet is the actual data sheet and the others are computations made on values from data sheet like pivots for example.

Let's say you have a data sheet like:

and a pivot created on this data on a separate sheet:

This excel file is our template. By modifying data inside 'Data' sheet we will have by default this pivot in our resulted file. To make the pivot automatically refresh when we open the file, in the PivotTable Options dialog box, on the Data tab, select the 'Refresh data when opening the file' check box.

Now lets see how is this template used inside NextReports.

You create a simple report that prints the data in the form shown in 'Data' sheet. We have a simple query like:

with a report showing just header and detail (no formatting needed):

Running such report as EXCEL will show us just a sheet (see previously Data sheet).

To specify that we have a template, some new properties were added on the Report node from layout tree:

Here we can select a template excel file and the sheet number (starting from 1) where NextReports engine will write the data. In our example is sheet number 2. And that is all!

When you use some actions like Publish, Download from designer, the template file will be automatically passed between designer and server. On the server, when we do an upload, a new file upload field will allow to add a template. Also, Download and Edit in designer server actions will pass the template file to the client machine.

Tuesday, April 22, 2014

NextReports Survey

From some time ago, on NextReports site there is a small survey about the product. It can be found here.

From 7.1, to make people help us and also the entire NextReports open source community, we will show a small information about the survey on designer and server. This is not an intrusive message, once you click on the link or close the window, it will never show up again for that user.

Survey message will show after 10 days from installation, or , for server, if you use old data it may appear right away depending from how long logged user was created.

Inside NextReports Designer a small window will ask for taking the survey:

Inside NextReports Server a small message will notify the user on the top right corner:

If you want to contribute, please tell us on the survey wizard what are your needs.

Tuesday, April 08, 2014

NextReports: Images from database

NextReports Designer 7.0 allows to insert an image element to report layout. This element takes an image from a file. All images used by report are kept near that file, so when we publish a report to server from designer, all its images are also uploaded.

Starting with version 7.1 a new report layout element called "Image Sql Column" is added. This will indicate to report layout that at runtime to try to show the actual image that is kept inside database. Sql column must be of type blob or other specific image type used by different databases (for example MS SQL uses varbinary or image).

We create a query by selecting columns from a table (here Photo is our blob column):

When we run the query in designer we will see "blob"string for Photo values:

We create a report from this query:

Here we added instead a simple "Sql Column", an "Image Sql Column" for Photo:

This element has width and height properties to allow for image scaling.

Inside our database blob field we added different types of images (png, gif, jpeg) and a text file (to test if blob is not a recognizable image). When we export the report to PDF, EXCEL, HTML or RTF we will see actual images stored inside database:

Values that are not recognized as images, are seen with "blob" string.

Monday, March 24, 2014

NextReports: Creating a bubble chart

NextCharts can create a bubble chart from version 1.1. There are some minor differences between this chart and other types of charts.

First, the labels property uniquely identifies every bubble on the chart. You won't see the labels on X axis as on other charts, because values on X axis now have data meaning and must be computed similar with those on Y axis. Label values will be seen on tooltip if the template tooltip message contains a markup #label.

Second, the data property will contain exactly three arrays with values for X, Y and Z dimensions. These values can be seen in tooltip if #x, #val and #z markups are used.

Third, there is a new categories property with Strings that identify in which category falls every bubble. From this property the legend is computed (all unique categories). Category value can be seen inside tooltip if #c markup is used.

Let's create a bubble chart which shows the correlation between Life Expectancy (X), Fertility Rate (Y) and Population (Z) for a specific country (label) from a region (category).

JSON is like the following:

{"data":[[80.66,79.84,78.6,72.73,80.05,72.49,68.09,81.55,68.6,78.09],
         [1.67,1.36,1.84,2.78,2,1.7,4.77,2.96,1.54,2.05],
         [33739900,81902307,5523095,79716203,61801570,73137148,31090763,7485600,141850000,307007000]
        ],    
 "labels":["CAN","DEU","DNK","EGY","GBN","IRN","IRQ","ISR","RUS","USA"], 
 "categories":["North America","Europe","Europe","Middle East","Europe","Middle East","Middle East","Middle East","Europe","North America"],
 "color":["#004CB3","#A04CB3","#7aa37a"],                           
 "alpha":0.6, 
 "showGridX":true, 
 "showGridY":true,    
 "colorGridX":"rgb(0,198,189)", 
 "colorGridY":"rgb(0,198,189)", 
 "message":"#label< br >Life Expectancy: #x< br >Fertility Rate: #val< br >Region: #c< br >Population: #z", 
 "tickCount":4,
 "title":{"text":"Population Correlation", "font":{"weight":"bold", "size":14, "family":"sans-serif"}, "color":"blue", "alignment":"center"},
 "labelOrientation":"horizontal",         
 "type":"bubble",         
 "yData":{"font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"blue"},
 "xData":{"font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"blue"},
 "yLegend":{"text":"Fertility Rate","font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"#993366"},
 "xLegend":{"text":"Life Expectancy","font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"#993366"},
}

Result is the following chart:

When we move the mouse over a bubble element we will see all data defined in tooltip template message:

To use NextReports Designer (from 7.1 version) to create such chart you must use a simple convention. You have to select on X axis the labels column (Country), and on Y axis you should add the four dimensions of the chart X, Y, Z and category (in this order).

Tuesday, March 11, 2014

NextCharts: Tooltip Messages

NextCharts can have a tooltip message with some markups that are automatically replaced at runtime. JSON property is called message.

The most important markup is #val which represents the actual value on Y axis. If you select for tooltip message Value #val you will see tooltips like in following chart:

Another markup is #x which represents the actual value of X label.
A message like #x Value #val will show the following (here   markup is used to start a new line) :

Other markups have meaning just for specific chart types. For example, #total means the total value of all Y values and it has meaning for stacked bars, horizontal stacked bars and pie charts. A message like Category #x Value #val from #total will show the following on a pie chart:

For pie charts there is another markup #percent which shows the percent from total of the current slice value. A message like Category #x Value #val from #total #percent% of 100% will show as:

To format actual Y value, if it is not a simple integer, you can use a JSON property like:

"tooltipPattern" : {
    "decimals": 2,
    "decimalSeparator" : ".",
    "thousandSeparator" : ","
}

From next version of NextReports (7.1) designer will have a new tooltip message property to allow customization like showing before, instead of some default values.

Tuesday, February 25, 2014

NextCharts: Combo Bar Line Charts

NextCharts supports bar and stacked bar combo charts. This means there can be more series inside a chart some bars / stacked bars, some lines.

A simple stacked bar json like:

{
   "type":"stackedbar",
   "style":"glass", 
   "data":[[16,66,24,30,80,52],[48,50,29,60,60,58],[30,40,28,52,34,50]],  
   "labels":["JAN","FEB","MAR","APR","MAY","JUN"], 
   "color":["#004CB3","#A04CB3","#7aa37a"],
   "legend":["2011","2012","2013"],
   "alpha":0.6, 
   "showGridX":true, 
   "showGridY":true, 
   "colorGridX":"rgb(0,198,189)", 
   "colorGridY":"rgb(0,198,189)", 
   "message":"Value #val from #total", 
   "tickCount":4,
   "title":{
        "text":"Financial Analysis",
        "font":{"weight":"bold", "size":16, "family":"sans-serif"},
        "color":"blue",
        "alignment":"center"
   },        
   "xData":{
        "font":{"weight":"bold", "size":14,"family":"sans-serif"},
        "color":"blue"
   },                          
   "yData":{
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"blue"
   },
   "xLegend":{
        "text":"Month",
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"#993366"
   },"
   "yLegend":{
        "text":"Price",
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"#993366"
   }
}

will look like:

To add combo lines (2 lines in this example) we should add some properties to json object:

{
...
 "lineData":[[31.33, 52, 27, 47.33, 74.66, 53.33],[100, 120, 53, 190, 40, 130]],
 "lineColor":["#270283", "#CC6633"],
 "lineLegend":["Average", "Profit"],
...
}

With these, we obtain a combo chart like:

Friday, February 21, 2014

NextCharts: Styles

Styles are different ways to show a specific kind of charts. These are different for bar and line charts.
For bars these can be normal, glass, cylinder, parallelepiped and dome. For lines these can be normal, soliddot, hollowdot, anchordot, bowdot, stardot.

Lets take a simple horizontal stacked bar chart:

1. normal

2. glass

3. cylinder

4. parallelepiped

5. dome

A simple line chart:

1. normal

2. soliddot

3. hollowdot

4. anchordot

5. bowdot

6. stardot

About Me

Mihai Dinca-Panaitescu

Working with Java since 1998 with focus on both server back-end and UI.

In the late 90's till 2003 when not so much frameworks were present I was involved in proprietary server implementation (with all the technology from that time like RMI, JDBC, transactions, Servlets, XML, XSL), user interface with SWING and a lot of algorithms for agriculture business.

In middle 2000's I was involved in many custom development projects adding more flavor to my knowledge : JBoss and OC4J servers, J2EE, Hibernate, EHCache, Ant, JUnit, TestNG

From 2008 I was part of NextReports, starting with designer development in SWING. Then NextReports Server came to life and new technologies were adopted : Spring, JPA, JCR, Wicket, jQuery, Jersey, Maven, Ivy, Git, Android.

Since starting of 2014 I developed a HTML5 library called NextCharts which can be found on github.

I’m currently part of the NextReports developing team at Advantage Software Factory, a local leading provider of business software solutions. NextReports is a business reporting suite composed of reports designer, reporting engine and reporting server. Besides this product, ASF also developed a debt collection software and a CRM solution.