Implemented ticks config, plot dimensions config. For sliders changed the event from Change to Slide. Now update to graph is near-instantaneous.

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

@@ -2,12 +2,14 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Graph', [], function () {
+define('Graph', ['logme'], function (logme) {
 
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSeries, functions;
+        var plotDiv, dataSeries, functions, xaxis, yaxis;
+
+        logme('config:', config);
 
         plotDiv = $('#' + gstId + '_plot');
 
@@ -15,8 +17,8 @@ define('Graph', [], function () {
             return;
         }
 
-        plotDiv.width(300);
-        plotDiv.height(300);
+        setGraphDimensions();
+        setGraphAxes();
 
         state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
 
@@ -27,6 +29,98 @@ define('Graph', [], function () {
 
         return;
 
+        function setGraphDimensions() {
+            var dimObj, width, height;
+
+            // If no dimensions are specified by the user, the graph have
+            // predefined dimensions.
+            width = 300;
+            height = 300;
+
+            // Get the user specified dimensions, if any.
+            if ($.isPlainObject(config.plot['dimensions']) === true) {
+                dimObj = config.plot['dimensions'];
+
+                if (dimObj.hasOwnProperty('@width') === true) {
+                    if (isNaN(parseInt(dimObj['@width'], 10)) === false) {
+                        width = parseInt(dimObj['@width'], 10);
+                    }
+                }
+
+                if (dimObj.hasOwnProperty('@height') === true) {
+                    if (isNaN(parseInt(dimObj['@height'], 10)) === false) {
+                        height = parseInt(dimObj['@height'], 10);
+                    }
+                }
+            }
+
+            plotDiv.width(width);
+            plotDiv.height(height);
+        }
+
+        function setGraphAxes() {
+            xaxis = {
+                'min': 0,
+                'tickSize': 3,
+                'max': 30
+            };
+
+            if (typeof config.plot['xticks'] === 'string') {
+                processTicks(config.plot['xticks'], xaxis);
+            }
+
+            yaxis = {
+                'min': -5,
+                'tickSize': 1,
+                'max': 5
+            };
+
+            if (typeof config.plot['yticks'] === 'string') {
+                processTicks(config.plot['yticks'], yaxis);
+            }
+
+            return;
+
+            function processTicks(ticksStr, ticksObj) {
+                var ticksBlobs, min, tickSize, max;
+
+                logme('Processing ticks. Ticks string is: [' + ticksStr + ']');
+                logme('Original ticks object:', ticksObj);
+
+                ticksBlobs = ticksStr.split(',');
+
+                if (ticksBlobs.length !== 3) {
+                    return;
+                }
+
+                min = parseFloat(ticksBlobs[0]);
+                if (isNaN(min) === false) {
+                    ticksObj.min = min;
+                }
+
+                tickSize = parseFloat(ticksBlobs[1]);
+                if (isNaN(tickSize) === false) {
+                    ticksObj.tickSize = tickSize;
+                }
+
+                max = parseFloat(ticksBlobs[2]);
+                if (isNaN(max) === false) {
+                    ticksObj.max = max;
+                }
+
+                if (ticksObj.min >= ticksObj.max) {
+                    ticksObj.min = 0;
+                    ticksObj.max = 10;
+                }
+
+                if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
+                    ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
+                }
+
+                logme('Modified ticks object:', ticksObj);
+            }
+        }
+
         function createFunctions() {
             var c1;
 
@@ -210,14 +304,8 @@ define('Graph', [], function () {
                 plotDiv,
                 dataSeries,
                 {
-                    'xaxis': {
-                        'min': 0,
-                        'max': 30
-                    },
-                    'yaxis': {
-                        'min': -5,
-                        'max': 5
-                    },
+                    'xaxis': xaxis,
+                    'yaxis': yaxis,
                     'legend': {
 
                         // To show the legend or not. Note, even if 'show' is

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

@@ -181,7 +181,8 @@ define('Sliders', [], function () {
                 'value': constValue,
                 'step': (valueMax - valueMin) / 50.0,
 
-                'change': sliderOnChange
+                // 'change': sliderOnChange,
+                'slide': sliderOnChange
             });
 
             // Append the slider DIV to the element on the page where the user