Welcome to Report.js!

This is a wiki how to use Report.js and you can enjoy your cofee. Report.js was created from our experience in c#.net and make report from rdlc.

Installation

Before you use report.js, you must know that Report.js need jquery, so don't forget to import jquery first.

<script src="path/to/jquery.js" type="text/javascript" ></script>
<script src="path/to/report.js" type="text/javascript" ></script>

Sample code

This is a simple code how to use Report.js :

/***** Report *****/
var report = new ReportJs();
report.header.text = "Bits & Co"; //header
report.title.text = "Recap of Sales"; //title
report.headElement.add("Year", "2013"); //add head element
report.headElement.add("Month", "August");
/*** Add report table ***/
/* add column */
report.column.add("#");
report.column.add("Name");
report.column.add("Sale");
/* add row */
for (var ii = 0; ii < salesData.length; ii++) {
    report.row.add(salesData[ii]);
}
/*** End of Add report table ***/
report.footer.text = "Bits & Co"; //set footer
makeReport("#report", report); //make report
/***** End of Report *****/

it's easy, right?

Explaination

Initialization

First, initialize it likes this code :

var report = new ReportJs();

Everything about head

Every report must have a title. Of course! if a report don't have a title, how do you know what report it is. Report.js understand about that, so you just initialize all you need on the head like this :

report.header.text = "Bits & Co"; //header
report.title.text = "Recap of Sales"; //title
report.headElement.add("Year", "2013"); //add head element
report.headElement.add("Month", "August");

report.header.text : set your page header text. report.title.text : set your report title text. report.headElement.add("name","value") : add your head elements like year, author or anything.

Column

In Report.js you must set how much column you need.

report.column.add("#");
report.column.add("Name");
report.column.add("Sale");

report.column.add("colum title") : add your column.

Row

Row is the interesting one. why? because the important content of report is here. We design Report.js that you can use any ways to show your data. This is one of any way to add data to row in Report.js :

Data

var data = new Array();
data[0] = new Array();
data[0][0] = number++;
data[0][1] = "Yorki Radd";
data[0][2] = "$ 100.000";
data[1] = new Array();
data[1][0] = number++;
data[1][1] = "Ricky Sharp";
data[1][2] = "$ 120.000";

Report.js

for (var ii = 0; ii < data.length; ii++) {
    report.row.add(data[ii]);
}

You can also use json or object to add data.

Footer and Make Report

Okay, end of report usually there is a footer. Just like this :

report.footer.text = "Bits & Co"; //set footer

And last, makeReport(selector, report); or like this :

makeReport("#report", report);

Selector can be id #id or class #class and we suggest it must be in div.

---

Easy, right?

Okay that's glimpse of Report.js. Welcome to Report.js We need your feedback for better Report.js.