Creating Dashboards

You can esaily create Dashboard apps in Upvise. Dashboards are simply custom UpviseJS apps aggregating data from other apps data tables.

• Use the Query.select() method to perform select queries against other data tables.
• A detaileld list of Upvise standard apps table structure is available here
• The Hashmap class is a useful helper class to store the data agreegated from the Select statement for easy manipulation
• Finally use the Chart class to dispay bar or pie charts on mobile and web

Vertical Bar Chart Sample

This first example displays a historical bar chart showing the number of tasks per month during the last 6 months

• first, we use the Query.select("Tasks.tasks") to query the tasks table of the Tasks application and get all the data we need
• Then we use an instance of the HashMap utility class to aggregate the number of tasks for each month.
• Finally we use the Chart static class and fill in the data from the Hasmap. We fill each row using the Chart.addRow() method and display the bar chart using Chart.show("bar").

Sign in to your Upvise web account and go to the Cloud ID (Settings button on the right of the toolbar)
Copy paste this sample then press Run button

Config.appid = "mydashboard";
Config.version = "1";
Config.title = "My Dashboard";

function main() {
    // Step 1: get all open tasks from the last 6 months
    var startdate = Date.addMonths(Date.monthStart(), -6);
    var tasks = Query.select("Tasks.tasks", "duedate", "status=0 AND duedate>={startdate}");

    // Step 2: Initialize the HashMap structure
    // Each key in the map is the month and the value the number of createdtasks for this month
    var map = new HashMap();
    for (var i = 0; i < 6; i++) {
        var month = Date.addMonths(startdate, i);
        map.set(month, 0);
    }

    // Step 3: Aggregate the number of tasks for each month in the HashMap
    for (var i = 0; i < tasks.length; i++) {
        var task = tasks[i];
        var month = Date.monthStart(task.duedate);
        map.increment(month, 1);
    }

    // Step 4: Display the monthly bar chart
    Chart.init();
    Chart.setTitle("Tasks Created during last 12 months");
    Chart.addColumn("string", "Month");
    Chart.addColumn("number", "# of Tasks");
    for (var i = 0; i < map.keys.length; i++) {
        var month = map.keys[i];
        var count = map.get(month);
        var label = Format.month(month);
        Chart.addRow(label, count);
    }
    Chart.show("bar");

    if (Settings.getPlatform() == "web") List.show();
}

Pie chart Sample

Config.appid = "mydashboard";
Config.version = "2";
Config.title = "My Dashboard";

function main() {
    // Step 1: get all open tasks from the last 6 months
    var startdate = Date.addMonths(Date.monthStart(), -6);
    var tasks = Query.select("Tasks.tasks", "duedate", "status=0 AND duedate>={startdate}");

    // Step 2: Initialize the HashMap structure
    // Each key in the map is the month and the value the number of created tasks for this month
    var map = new HashMap();
    
    // Step 3: Aggregate the number of tasks for each month in the HashMap
    for (var i = 0; i < tasks.length; i++) {
        var task = tasks[i];
        map.increment(task.owner, 1);
    }

    // Step 4: Display the pie chart per user
    Chart.init();
    Chart.setTitle("Tasks Created Per Staff");
    Chart.addColumn("string", "Staff");
    Chart.addColumn("number", "# of Tasks");
    for (var i = 0; i < map.keys.length; i++) {
        var staff = map.keys[i];
        var count = map.get(staff);
        Chart.addRow(staff, count);
    }
    Chart.show("pie");

    if (Settings.getPlatform() == "web") List.show();
}

Horizontal Stacked Bar Chart Sample

We use the Chart.show("horizontalbar") function call to display a horizontally stacked bar chart.

Config.appid = "mydashboard";
Config.version = "3";
Config.title = "My Dashboard";

function main() {
    // Step 1: get all open tasks from the last 6 months
    var startdate = Date.addMonths(Date.monthStart(), -6);
    var tasks = Query.select("Tasks.tasks", "duedate", "status=0 AND duedate>={startdate}");

    // Step 2: Initialize the HashMap structure
    // Each key in the map is the month and the value the number of createdtasks for this month
    var map = new HashMap();
    for (var i = 0; i < 6; i++) {
        var month = Date.addMonths(startdate, i);
        map.set(month, {normal:0, highpriority:0});
    }

    // Step 3: Aggregate the number of tasks for each month in the HashMap
    for (var i = 0; i < tasks.length; i++) {
        var task = tasks[i];
        var month = Date.monthStart(task.duedate);
        var obj = map.get(month);
      	if (obj != null) {
        	if (task.priority == 2) obj.highpriority++;
        	else obj.normal++;
        }
    }

    // Step 4: Display the pie chart per user
    Chart.init();
    Chart.setTitle("Tasks Per Month");
    Chart.addColumn("string", "Month");
    Chart.addColumn("number", "Normal Tasks");
    Chart.addColumn("number", "High Priority Tasks");
    for (var i = 0; i < map.keys.length; i++) {
        var month = map.keys[i];
        var obj = map.get(month);
        Chart.addRow(Format.month(month), obj.normal, obj.highpriority);
    }
    Chart.show("horizontalbar");

    if (Settings.getPlatform() == "web") List.show();
}