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<br>Value #val will show the following (here <br> 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<br>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<br>Value #val from #total<br>#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