Generating Reports
In this tutorial we show how to generate a report with mathlayer®. More specifically we will demonstrate how to build step by step the following report:
Each row will be defined independently:
This is an example of a mathlayer® Report
| X | Purple | Orange |
|---|---|---|
| 1 | 0.529958 | 9.175 |
| 2 | 0.456351 | 1.17368 |
| 3 | 0.319489 | 6.42012 |
| 4 | 0.341745 | 2.72917 |
| 5 | 0.713117 | 4.10926 |
| 6 | 0.579842 | 8.4933 |
mathlayer® enhances your projects with powerful numerical capabilities as it gives you access to hundreds of functions allowing you to manipulate data, calculate analytics, visualize results, generate reports, retrieve data from the web and much more.
Layout
The first step consists in defining the layout and how we want our report to be structured.- The structure will be defined by rows.
- The final report will be generated by the combination of these rows through the assemble funtion.
- Each row will be a graph, a text, a table or a combination of them using the assemble function.
Each row will be defined independently:
- row{1} = html(code1,oprow1)
- row{2} = plot(code2,oprow2)
- row{3} = assemble(code3,oprow3)
- row{4} = assemble(code4,oprow4)
- row{5} = scatter3(code5,oprow5)
- row{6} = assemble(code6,oprow6)
- report = assemble(row,opreport)
Global options
The second step consists in defining options relating to dimensions (height, width), fonts, padding, etc.Rows
- Row level: we set the width of the rows⎘
oprows = struct% initializing options struct
oprows.show = false oprows.width = 400
Graphs
- Graph level: we set the options for the specific graphs⎘
op = struct% initializing options struct for individual graphs
op.show = false op.paddingLeft = 25 op.paddingRight = 30 op.paddingBottom = 45 op.xAxisFont = '0.8em arial' op.yAxisFont = '0.8em arial'
Generating each row and final report
Row 1: title
⎘
oprow1 = oprows% setting options for row1
title = '<div style="text-align:center; width:400px;font: bold 10px arial, sans-serif;">This is an example of a mathlayer® Report</div>' row1 = html(title,oprow1)
This is an example of a mathlayer® Report
Row 2: full width graph
⎘
y1 = rand(30,1)% setting y1 and y2 values to all the graphs in the report
y2 = rand(30,1)*10 op2 = op% setting general options for graph in row2
op2.width = 400 op2.height = 125 op2.yAxisTicks = 4 op2.y2AxisTicks = 4 op21 = op2% setting specific options for line1 in row2
op21.lineStroke = 'purple' s1 = plot(y1,op21) op22 = op2% setting specific options for line2 in row2
op22.lineStroke = 'orange' op22.useSecondaryAxis = true op22.y2AxisColor = 'orange' s2 = plot(y2,op22) oprow2 = oprows% setting options for row2
row2 = overlay({s1,s2},oprow2)
Row 3: table and text
⎘
op3 = op% setting common options for graphs in row3
op3.width = 400/2% TABLE
X = (1:6)'% creating a table
y1 = rand(30,1)% setting y1 and y2 values
y2 = rand(30,1)*10 Purple = y1(1:6) Orange = y2(1:6) T = table(X,Purple,Orange) op31 = op3% setting options for table in row3
op31.tableVN = true op31.styleTable = 'width:100%;border-collapse: collapse;border: 1px solid black;font:12px arial;float:left;' op31.styleTabletd = 'font:0.75em arial;border:1px solid DimGray;' op31.styleTableth = 'border:1px solid black;background-color: #f2f2f2;font:0.8em arial;' a31 = table2html(T,op31)% table in row3
% TEXT
text = '<div style="width:190px;padding-left:10px;font: normal 10px arial, sans-serif;text-align: justify;float:right;"> mathlayer® enhances your projects with powerful numerical capabilities as it gives you access to hundreds of functions allowing you to manipulate data, calculate analytics, visualize results, generate reports, retrieve data from the web and much more.</div>' op32 = op3% setting options for text in row3
a32 = html(text,op32) oprow3 = oprows% setting options for row3
oprow3.height = 200 row3 = assemble({a31,a32},oprow3)
| X | Purple | Orange |
|---|---|---|
| 1 | 0.529958 | 9.175 |
| 2 | 0.456351 | 1.17368 |
| 3 | 0.319489 | 6.42012 |
| 4 | 0.341745 | 2.72917 |
| 5 | 0.713117 | 4.10926 |
| 6 | 0.579842 | 8.4933 |
mathlayer® enhances your projects with powerful numerical capabilities as it gives you access to hundreds of functions allowing you to manipulate data, calculate analytics, visualize results, generate reports, retrieve data from the web and much more.
Row 4: two graphs
⎘
op4 = op% setting common options for graphs in row4
op4.xAxisTicks = 5 op4.yAxisTicks = 5 op4.height = 160 op4.width = 400/2 y1 = rand(30,1)% setting y1 and y2 values
y2 = rand(30,1)*10 ymax = max([y1;y2])% FIRST GRAPH
op41 = op4% setting options for graph1 in row4
op41.yAxisMax = ymax op41.barFill = 'purple' a41 = bar(y1,op41)% graph 1 in row4
% SECOND GRAPH
op42 = op4% setting options for graph2 in row4
op42.yAxisMax = ymax op42.barFill = 'orange' a42 = bar(y2,op42)% graph 2 in row4
oprow4 = oprows% setting options for row3
oprow4.height = 160 row4 = assemble({a41,a42},oprow4)
Row 5: 3D graph
⎘
op5 = op% setting common options for graphs in row5
op5.markerFill = 'none' y1 = rand(30,1)% setting y1 and y2 values
y2 = rand(30,1)*10 op51 = op5% setting options for line1 in row5
op51.markerStroke3d = 'purple' a51 = scatter3(rand(1,30),rand(1,30),y1,op51) op52 = op5% setting options for line2 in row5
op52.markerStroke3d = 'orange' a52 = scatter3(rand(1,30),rand(1,30),y2,op52) oprow5 = oprows% setting options for row5
oprow5.width = 450 oprow5.depth = 450 oprow5.height = 300 row5 = overlay({a51,a52},oprow5)
Row 6: buttons
⎘
op6 = op% setting common options for graphs in row6
a61 = html('<button style="width:100px;height:25px;display:inline;float:left;" onclick="rotate(0,-0.2)">LEFT</button>',op6) a62 = html('<button style="width:100px;height:25px;display:inline;float:left;" onclick="rotate(0.2,0)">UP</button>',op6) a63 = html('<button style="width:100px;height:25px;display:inline;float:left;" onclick="rotate(-0.2,0)">DOWN</button>',op6) a64 = html('<button style="width:100px;height:25px;display:inline;float:left;" onclick="rotate(0,0.2)">RIGHT</button>',op6) oprow6 = oprows% setting options for row5
row6 = assemble({a61,a62,a63,a64},oprow6)
Report
⎘
report = assemble({row1,row2,row3,row4,row5,row6})