Added exmple with normal distribution.

common/lib/xmodule/xmodule/gst_module.py

@@ -25,6 +25,8 @@ class GraphicalSliderToolModule(XModule):
 
     js = {
       'js': [
+        resource_string(__name__, 'js/src/graphical_slider_tool/jstat-1.0.0.min.js'),
+
         resource_string(__name__, 'js/src/graphical_slider_tool/gst_main.js'),
         resource_string(__name__, 'js/src/graphical_slider_tool/state.js'),
         resource_string(__name__, 'js/src/graphical_slider_tool/logme.js'),

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js

@@ -403,11 +403,12 @@ define('Graph', ['logme'], function (logme) {
                     obj['@line'],
                     obj['@dot'],
                     obj['@label'],
-                    obj['@point_size']
+                    obj['@point_size'],
+                    obj['@fill_area']
                 );
             }
 
-            function addFunction(funcString, color, line, dot, label, pointSize) {
+            function addFunction(funcString, color, line, dot, label, pointSize, fillArea) {
                 var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
@@ -422,6 +423,8 @@ define('Graph', ['logme'], function (logme) {
                 // will break.
                 funcString = $('<div>').html(funcString).text();
 
+                logme('graph: funcstr = "' + funcString + '"');
+
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
@@ -476,17 +479,17 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 if (typeof line === 'string') {
-                    if (line === 'true') {
+                    if (line.toLowerCase() === 'true') {
                         newFunctionObject['line'] = true;
-                    } else if (line === 'false') {
+                    } else if (line.toLowerCase() === 'false') {
                         newFunctionObject['line'] = false;
                     }
                 }
 
                 if (typeof dot === 'string') {
-                    if (dot === 'true') {
+                    if (dot.toLowerCase() === 'true') {
                         newFunctionObject['dot'] = true;
-                    } else if (dot === 'false') {
+                    } else if (dot.toLowerCase() === 'false') {
                         newFunctionObject['dot'] = false;
                     }
                 }
@@ -504,6 +507,21 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['line'] = true;
                 }
 
+                if (newFunctionObject['line'] === true) {
+                    if (typeof fillArea === 'string') {
+                        if (fillArea.toLowerCase() === 'true') {
+                            newFunctionObject['fillArea'] = true;
+                        } else if (fillArea.toLowerCase() === 'false') {
+                            newFunctionObject['fillArea'] = false;
+                        } else {
+                            logme('ERROR: The attribute fill_area should be either "true" or "false".');
+                            logme('fill_area = "' + fillArea + '".');
+
+                            return;
+                        }
+                    }
+                }
+
                 if (typeof label === 'string') {
                     newFunctionObject['label'] = label;
                 }
@@ -622,6 +640,10 @@ define('Graph', ['logme'], function (logme) {
                     'show': functionObj.line
                 };
 
+                if (functionObj.hasOwnProperty('fillArea') === true) {
+                    seriesObj.lines.fill = functionObj.fillArea;
+                }
+
                 // Should each data point be represented by a point on the
                 // graph?
                 seriesObj.points = {