Added Scatterplot with moving threshold and Line plot

README.md

@@ -29,6 +29,7 @@ Furthermore, all diagrams have a consistent, configurable colour scheme and key.
 - Donut Pie Chart
 - Multi-Ring Pie Chart (Multiple series)
 - Simple Bar Chart
+- Histogram
 - Pedigree Diagram
 
 ## Screenshots from Demo

css/tripald3.css

@@ -68,3 +68,50 @@ svg.tripald3-tree .tree-node {
 .tripald3-default-watermark {
   background-image: url(watermark.png);
 }
+
+/**--------------------Histo updates-----------------*/
+
+body {
+      font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+      fill: none;
+      stroke: #000
+}
+
+line {
+      vector-effect: non-scaling-stroke;
+      stroke: #000;
+      stroke-dasharray: 18;
+      stroke-width: 2px;
+}
+
+line:hover {
+      stroke-width: 3px;
+      shape-rendering: crispEdges;
+}
+
+.legendText {
+      font: 12px sans-serif;
+      font-weight: bolder;
+      float: left;
+      width: 20px;
+      height: 20px;
+      margin: 5px;
+}
+
+div.absolute {
+      position: absolute;
+      top:570px;
+      left: 475px;
+      width: 300px;
+}
+
+div.absolute2 {
+      position: absolute;
+      top: 150px;
+      left: 470px;
+      width: 180px;
+}

docs/api.rst

@@ -13,6 +13,9 @@ These docs provide full details of the javascript API including all options avai
    api/drawSimpleDonut
    api/drawMultiDonut
    api/drawSimpleBar
+   api/drawSimpleHistogram
+   api/drawHistogram
+   api/drawSimpleLinePlot
    api/ellipsisThrobber
    api/popover
    api/getColorScheme

docs/api/drawFigure.rst

@@ -15,7 +15,7 @@ def ``drawFigure(data, options)``:
   :data: A javascript object with the data required to draw the chart. The specifics of this object depend on the chart being drawn.
   :options: A javascript object with any of the following keys:
 
-    :chartType: the type of chart to draw; (REQUIRED) one of pedigree, simplepie, simpledonut, multidonut, simplebar.
+    :chartType: the type of chart to draw; (REQUIRED) one of pedigree, simplepie, simpledonut, multidonut, simplebar, simplehistogram, simplelineplot.
     :elementId: The ID of the HTML element the diagram should be attached to.
     :width: The width of the drawing canvas (including key and margins) in pixels.
     :height: The height of the drawing canvas (including key and margins) in pixels.

docs/dev_guide.rst

@@ -13,6 +13,7 @@ This guide contains tutorials for using the Tripal D3.js API to add diagrams to
    dev_guide/draw_multidonut
    dev_guide/color_scheme
    dev_guide/get_color_scheme
+   dev_guide/draw_simplescatter
 
 Additional Information
 ------------------------

docs/dev_guide/draw_scatterhorizon.rst

@@ -0,0 +1,99 @@
+Draw a Simple Scatter Plot
+=========================
+
+.. image:: draw_scatterhorizon.1.png
+
+
+
+
+1. Load the API into the page you would like your diagram using ``<php tripald3_load_libraries();?>``
+
+.. code-block:: php
+
+  function demo_my_example_preprocess(&$variables) {
+        //the horizontal scatterplot takes in an array of javascript objects
+            var scatterData = [
+	{
+        "x": 7,
+        "y": 9
+  },
+  {
+         "x": 10,
+        "y": 3
+  },
+  {
+        "x": 1,
+        "y": 9
+  },
+  {
+         "x": 8,
+        "y": 5
+  },
+         {
+         "x": 4,
+         "y": 2
+         },
+  {
+         "x": 1,
+         "y": 6
+  },
+];
+    }
+
+2. Add a container element where you would like you diagram drawn.  It is important to note that the element ID specified must be the same as the div ID
+
+.. code-block:: html
+
+  <div id="tripald3-scatterplot-horizontal" class="tripald3-diagram">
+    <!-- Javascript will add the Simple Scatter Chart, Title and Figure legend here -->
+  </div>
+
+3. Draw the chart in your template by calling `tripalD3.drawChart()`. This is done within a script tag using Drupal behaviours to ensure it is run at the correct point and the data prepared is passed in.
+
+.. code-block:: html
+    <script type="text/javascript">
+  Drupal.behaviors.tripalD3demoSimpleScatterHorizontal = {
+    attach: function (context, settings) { 
+      var scatterData = [
+	{
+  "x": 7,
+  "y": 9
+  },
+  {
+  "x": 10,
+  "y": 3
+  },
+  {
+  "x": 1,
+  "y": 9
+  },
+  {
+  "x": 8,
+  "y": 5
+  },
+  {
+  "x": 4,
+  "y": 2
+  },
+  {
+  "x": 1,
+  "y": 6
+  },
+];
+
+      tripalD3.drawFigure(
+        scatterData,
+        {
+          "chartType" : "horizontalscatter",
+          "elementId" : "tripald3-scatterplot-horizontal",
+          "height" : 400,
+          "width" : 800,
+          "xAxisPadding" : 30,
+          "yAxisPadding" : 60,
+        }
+      );
+    }
+  };
+
+
+

docs/dev_guide/draw_simplelineplot.rst

@@ -0,0 +1,79 @@
+Draw a Simple Line Plot
+===========================
+
+..image:: draw_simplelineplot1.png
+
+1. Load the API into the page you would like your diagram using ``<php tripald3_load_libraries();?>``
+2. Retrieve you data and manipulate it into the structure required by the chart. This can be done a number of ways, the easiest of which is to query your database in your Drupal preprocess hook and then save the results as a javascript setting.
+
+
+.. code-block:: php
+
+  /**
+   * Preprocess hook for template my_example.tpl.php
+   * The module name is demo.
+   */
+  function demo_my_example_preprocess(&$variables) {
+
+    // Load the API (Step #1 above)
+    tripald3_load_libraries();
+
+    // Retrieve your data.
+    // For this example  we're just going to define the array directly.
+    $linePlotData= [
+	      {x: 10, y: 20}, 
+	      {x: 30, y: 40}, 
+	      {x: 50, y: 60}, 
+	      {x: 70, y: 80}, 
+	      {x: 90, y: 100}
+      ];
+
+    //test
+
+    // Make it available to javascript via settings.
+    $settings = array(
+      // Always namespace to your module to avoid collisions.
+      'demo' => array(
+        // Pass in your data using a descriptive settings key.
+        'stockTypeLinePlotData' => $linePlotData,
+      ),
+    );
+    drupal_add_js($settings, 'setting');
+  }
+
+3. Add a container element in your template where you would like the chart drawn.
+
+.. code-block:: html
+
+  <div id="tripald3-simplelineplot" class="tripald3-diagram" style="width: 800px;">
+  <!-- Javascript will add a Simple LinePlot, Title and Figure legend here -->
+</div>
+
+
+4. Draw the chart in your template by calling `tripalD3.drawChart()`. This is done within a script tag using Drupal behaviours to ensure it is run at the correct point and the data prepared is passed in.
+
+.. code-block:: html
+
+  <script type="text/javascript">
+    Drupal.behaviors.tripalD3demoSimpleLinePlot = {
+    attach: function (context, settings) {
+
+      //Pull the data out of the javascript settings.
+	var data = Drupal.settings.demo.stockTypeLinePlotData;
+
+      // Draw chart
+      tripalD3.drawFigure(
+        linePlotData,
+        {
+          "chartType" : "simplelineplot",
+          "elementId": "tripald3-simplelineplot",
+          "height": 500,
+          "width": 1000,
+          "keyPosition": "right",
+        }
+      );
+
+
+    }
+  };
+  </script>

docs/dev_guide/draw_simplescatter.rst

@@ -0,0 +1,51 @@
+Draw a Simple Scatter Plot
+=========================
+
+.. image:: draw_simplescatter.1.png
+
+
+
+
+1. Load the API into the page you would like your diagram using ``<php tripald3_load_libraries();?>``
+
+.. code-block:: php
+
+  function demo_my_example_preprocess(&$variables) {
+        //the simple scatterplot takes in an array of arrays
+        var scatterData = [[1, 6], [4, 8], [10,10], [6,8], [5,4],[6,5]];
+    }
+
+2. Add a container element where you would like you diagram drawn.
+
+.. code-block:: html
+
+  <div id="tripald3-simplescatter" class="tripald3-diagram">
+    <!-- Javascript will add the Simple Scatter Chart, Title and Figure legend here -->
+  </div>
+
+3. Draw the chart in your template by calling `tripalD3.drawChart()`. This is done within a script tag using Drupal behaviours to ensure it is run at the correct point and the data prepared is passed in.
+
+.. code-block:: html
+    <script type="text/javascript">
+    Drupal.behaviors.tripalD3demoSimpleScatter = {
+        attach: function (context, settings) { 
+        var scatterData = [[1, 6], [4, 8], [10,10], [6,8], [5,4],[6,5]];
+
+        tripalD3.drawFigure(
+            scatterData,
+            {
+            "chartType" : "simplescatter",
+            "elementId" : "tripald3-scatterplot",
+            "height" : 400,
+            "width" : 800,
+            "xAxisPadding" : 30,
+            "yAxisPadding" : 60,
+            }
+        );
+        }
+    };
+    </script>
+
+
+
+

includes/tripalD3.api.inc

@@ -27,6 +27,11 @@ function tripald3_load_libraries() {
   drupal_add_js($path . '/js/tripalD3.bar.js', array( 'weight' => -7 ));
   /** @pedigree removing pedigree until data format is simplified. */
   drupal_add_js($path . '/js/tripalD3.pedigree.js', array( 'weight' => -7 ));
+  drupal_add_js($path . '/js/tripalD3.histo.js', array( 'weight' => -7 ));
+  drupal_add_js($path . '/js/tripalD3.simpleHisto.js', array( 'weight' => -7));
+  drupal_add_js($path . '/js/tripalD3.simpleScatter.js', array( 'weight' => -7));
+  drupal_add_js($path . '/js/tripalD3.scatterHorizontal.js', array( 'weight' => -7));
+  drupal_add_js($path . '/js/tripalD3.simpleLinePlot.js', array( 'weight' => -7));
 
   // CSS.
   drupal_add_css($path . '/css/tripald3.css', array('group' => CSS_DEFAULT, 'type' => 'file'));