Changeset 2040

Timestamp:

Sep 29, 2011, 4:02:17 PM (11 years ago)

Author:

tjeerd@…

Message:

VIS-17, finaly all visualizations are present. There is still a problem with treating categorial and numerical axis in different ways, so this Issue will not be closed.

Location:

trunk/web-app

Files:

• css/visualization.css (modified) (1 diff)
• js/visualization.js (modified) (5 diffs)

trunk/web-app/css/visualization.css

@@ -8 +8 @@
 }
 
+/** START :: TABLE VISUALIZATION **/
+
+table.tablevis {
+    border-style: none;
+}
+
+table.tablevis th {
+    font-weight: bold;
+    padding: 5px 6px;
+    background: none;
+    background-color: #fafad2;
+    border: 1px solid #CCCCCC;
+    color: #444444;
+}
+
+table.tablevis td {
+    border: 1px solid #CCCCCC;
+}
+
+table.tablevis td.caption {
+    border-style: none;
+    text-align: center;
+    vertical-align: middle;
+    font-style: italic;
+}
 
 /** START :: MESSAGES**/

trunk/web-app/js/visualization.js

@@ -283 +283 @@
                                 break;
                         case "scatterplot":
-                                alert( "I'm sorry, this visualization type is not implemented yet.")
-                                break;
+
+                        series[0].showLine = false;
+                        series[0].markerOptions = { "size": 5, "style":"filledCircle" };
+
+                                plotOptions = {
+                            stackSeries: true,
+                            seriesDefaults:{
+                                renderer:$.jqplot.LineRenderer
+                            },
+                            series: series,
+                            highlighter: {
+                                show: true,
+                                sizeAdjust: 7.5
+                            },
+                            axes: {
+                                xaxis: {
+                                    renderer: $.jqplot.CategoryAxisRenderer,
+                                    ticks: returnData.series[ 0 ].x,    // Use the x-axis of the first serie
+                                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                                    label: xlabel
+                                },
+                                yaxis: {
+                                    label: ylabel,
+                                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                                    formatString:'%.2f'
+                                }
+                            }
+                        };
                         case "linechart":
                         plotOptions = {
@@ -300 +326 @@
                                     renderer: $.jqplot.CategoryAxisRenderer,
                                     ticks: returnData.series[ 0 ].x,    // Use the x-axis of the first serie
-                                    label: xlabel,
-                                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
+                                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
+                                    label: xlabel
                                 },
                                 yaxis: {
@@ -318 +344 @@
                                 renderer:$.jqplot.BarRenderer,
                                 rendererOptions: {
-                                        // Put a 30 pixel margin between bars.
-                                        barMargin: 30,
-                                        // Highlight bars when mouse button pressed.
-                                        // Disables default highlighting on mouse over.
-                                        highlightMouseDown: true
+                                    // Put a 30 pixel margin between bars.
+                                    barMargin: 30,
+                                    // Highlight bars when mouse button pressed.
+                                    // Disables default highlighting on mouse over.
+                                    highlightMouseDown: true
                                 }
                             },
@@ -347 +373 @@
                                 break;
                         case "table":
-                                alert( "I'm sorry, this visualization type is not implemented yet.")
+                        // create table
+                        var table = $("<table>").addClass("tablevis");
+
+                        // create caption-row
+                        var row = $("<tr>");
+                        // create empty top-left-field
+                        row.append("<td class='caption' colspan='2' rowspan='2'>&nbsp;</td>");
+                        // create caption
+                        row.append("<td class='caption' colspan='"+returnData.series[0].x.length+"'>"+xlabel+"</td>");
+                        row.appendTo(table);
+
+                        // create header-row
+                        var row = $("<tr>");
+                        // create headers
+                        for(j=0; j<returnData.series[0].x.length; j++) {
+                            row.append("<th>"+returnData.series[0].x[j]+"</th>");
+                        }
+                        row.appendTo(table);
+
+                        // create data-rows
+                        for(i=0; i<returnData.series[0].y.length; i++) {
+                            var row = $("<tr>");
+                            for(j=-1; j<returnData.series[0].x.length; j++) {
+                                if(j<0) {
+                                    if(i==0) {
+                                        // create caption-column
+                                        row.append("<td class='caption' rowspan='"+returnData.series[0].y.length+"'>"+ylabel+"</td>");
+                                    }
+
+                                    // create row-header
+                                    row.append("<th>"+returnData.series[0].y[i]+"</th>");
+                                } else {
+                                    // row-data
+                                    row.append("<td>"+returnData.series[0].data[j][i]+"</td>");
+                                }
+                            }
+                            row.appendTo(table);
+                        }
+
+                        plotOptions = table;
                                 break;
                 }
@@ -353 +418 @@
                 // If a chart has been created, show it
                 if( plotOptions != null ) {
-                    visualization = $.jqplot('visualization', dataPoints, plotOptions );                        
+                    $( "#visualization" ).empty();
+                    if(returnData.type=="table") {
+                        $( "#visualization" ).html(plotOptions);
+                    } else {
+                        visualization = $.jqplot('visualization', dataPoints, plotOptions );
+                    }
                     $( "#visualization" ).show();
                 }