chart 0.1.4.2 → 0.1.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a09821ff4d64863a6182b82658a0dc346faaffd7
-  data.tar.gz: 0bdc633b4608b7041a5db5e60c37499a3a79d720
+  metadata.gz: 8fafca2b53d328a39184971caf03c9343a53bf37
+  data.tar.gz: d38e6dc0ede6df375e3e88c9ef12c84ffe9bdda6
 SHA512:
-  metadata.gz: 1d4d448755daceb8cc0e7996156479f1971412b33349dc814f90edc815fedaf77358c4a061a29b71a0ae24b6e5b280ae14ba5e4dc67c41e8af29d89b2adf801f
-  data.tar.gz: f2469503c1757da3d6892b152ad9741c482357530cc9469470d824d439f843822419a7f44e45020a521dbd2b457cd0c95cfe4e188bd34951f25aeaa1630bfb93
+  metadata.gz: a6304f963423bad868ebb0dd40ddecc32b1643005db8ab92462e983cfc5e4d195fea59cd3866d79630f7e2d49e07bcc41d112f06f1489bc42153a7006644d2c6
+  data.tar.gz: a10f52f04d9007d4bc8a0a552cddeca18efb8d962dd9c7c27e7b4fd09ef0f99496c8b8599461972756d76b70ec7715c963b947c46b7053d6f5d4fe0bdbefd87d

data/README.md

@@ -4,7 +4,7 @@
 
 Chart ships with the following awesome charts:  
 
-* [ChartJS](https://github.com/nnnick/Chart.js/) (1.1.1)
+* [ChartJS](https://github.com/nnnick/Chart.js/) (1.1.1 & 2.0.1)
 * [NVD3](https://github.com/novus/nvd3) (1.8.2)
 * [Google Chart](https://developers.google.com/chart/)
 * [Highchart](http://www.highcharts.com) (4.2.4)

data/app/helpers/chart2_helper.rb

@@ -0,0 +1,272 @@
+module Chart2Helper
+
+  def chart2_bar id=nil, size=nil
+    html = "<canvas id=\"myChart_bar\" width=\"400\" height=\"400\"></canvas>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+      var ctx = document.getElementById("myChart_bar");
+
+      var data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "My First dataset",
+            backgroundColor: "rgba(255,99,132,0.2)",
+            borderColor: "rgba(255,99,132,1)",
+            borderWidth: 1,
+            hoverBackgroundColor: "rgba(255,99,132,0.4)",
+            hoverBorderColor: "rgba(255,99,132,1)",
+            data: [65, 59, 80, 81, 56, 55, 40],
+        }
+    ]
+};
+
+var options = {};
+
+var myBarChart = new Chart(ctx, {
+    type: 'bar',
+    data: data,
+    options: options
+});
+
+      END
+    end
+    return html + script
+  end
+
+  def chart2_line id=nil, size=nil
+    html = "<canvas id=\"myChart_line\" width=\"400\" height=\"400\"></canvas>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+      var ctx = document.getElementById("myChart_line");
+
+      var data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "My First dataset",
+            fill: false,
+            lineTension: 0.1,
+            backgroundColor: "rgba(75,192,192,0.4)",
+            borderColor: "rgba(75,192,192,1)",
+            borderCapStyle: 'butt',
+            borderDash: [],
+            borderDashOffset: 0.0,
+            borderJoinStyle: 'miter',
+            pointBorderColor: "rgba(75,192,192,1)",
+            pointBackgroundColor: "#fff",
+            pointBorderWidth: 1,
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: "rgba(75,192,192,1)",
+            pointHoverBorderColor: "rgba(220,220,220,1)",
+            pointHoverBorderWidth: 2,
+            pointRadius: 1,
+            pointHitRadius: 10,
+            data: [65, 59, 80, 81, 56, 55, 40],
+        }
+    ]
+};
+
+var options = {};
+
+var myLineChart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: options
+});
+      END
+    end
+    return html + script
+  end
+
+  def chart2_radar id=nil, size=nil
+    html = "<div style=\"width: #{size[:width]}px; height: #{size[:height]}px;\"><canvas id=\"myChart_radar_#{id}\" width=\"#{size[:width]}\" height=\"#{size[:height]}\"></canvas></div>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+
+      var ctx = document.getElementById("myChart_radar_#{id}");
+
+      var data = {
+          labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+          datasets: [
+              {
+                  label: "My First dataset",
+                  backgroundColor: "rgba(179,181,198,0.2)",
+                  borderColor: "rgba(179,181,198,1)",
+                  pointBackgroundColor: "rgba(179,181,198,1)",
+                  pointBorderColor: "#fff",
+                  pointHoverBackgroundColor: "#fff",
+                  pointHoverBorderColor: "rgba(179,181,198,1)",
+                  data: [65, 59, 90, 81, 56, 55, 40]
+              },
+              {
+                  label: "My Second dataset",
+                  backgroundColor: "rgba(255,99,132,0.2)",
+                  borderColor: "rgba(255,99,132,1)",
+                  pointBackgroundColor: "rgba(255,99,132,1)",
+                  pointBorderColor: "#fff",
+                  pointHoverBackgroundColor: "#fff",
+                  pointHoverBorderColor: "rgba(255,99,132,1)",
+                  data: [28, 48, 40, 19, 96, 27, 100]
+              }
+          ]
+      };
+
+      var options = {};
+
+      var myRadarChart = new Chart(ctx, {
+          type: 'radar',
+          data: data,
+          options: options
+      });
+
+      END
+    end
+    return html + script
+  end
+
+  def chart2_pie id=nil, size=nil
+    html = "<div style=\"width: #{size[:width]}px; height: #{size[:height]}px;\"><canvas id=\"myChart_pie_#{id}\" width=\"#{size[:width]}\" height=\"#{size[:height]}\"></canvas></div>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+      var ctx = document.getElementById("myChart_pie_#{id}");
+
+      var options = {};
+
+      var data = {
+    labels: [
+        "Red",
+        "Green",
+        "Yellow"
+    ],
+    datasets: [
+        {
+            data: [300, 50, 100],
+            backgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ],
+            hoverBackgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ]
+        }]
+};
+
+
+var options = {};
+
+var myPieChart = new Chart(ctx, {
+    type: 'pie',
+    data: data,
+    options: options
+});
+
+      END
+    end
+    return html + script
+  end
+
+  def chart2_donut
+    html = "<canvas id=\"myChart_donut\" width=\"400\" height=\"400\"></canvas>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+      var ctx = document.getElementById("myChart_donut");
+
+      var options = {};
+
+      var data = {
+    labels: [
+        "Red",
+        "Green",
+        "Yellow"
+    ],
+    datasets: [
+        {
+            data: [300, 50, 100],
+            backgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ],
+            hoverBackgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ]
+        }]
+};
+
+
+var options = {};
+
+var myDonutChart = new Chart(ctx, {
+  type: 'doughnut',
+    data: data,
+    options: options
+});
+      END
+    end
+    return html + script
+  end
+
+  def chart2_polar_area
+    html = "<canvas id=\"myChart_polarArea\" width=\"400\" height=\"400\"></canvas>".html_safe
+    script = javascript_tag do
+      <<-END.html_safe
+
+      var ctx = document.getElementById("myChart_polarArea");
+
+      var options = {};
+
+      var data = {
+    labels: [
+        "Red",
+        "Green",
+        "Yellow"
+    ],
+    datasets: [
+        {
+            data: [300, 50, 100],
+            backgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ],
+            hoverBackgroundColor: [
+                "#FF6384",
+                "#36A2EB",
+                "#FFCE56"
+            ]
+        }]
+};
+
+
+var options = {};
+
+var myPolarAreaChart = new Chart(ctx, {
+  type: 'polarArea',
+    data: data,
+    options: options
+});
+      END
+    end
+    return html + script
+  end
+
+
+
+
+
+  # def chart2_scatter
+  #   html = "".html_safe
+  #   script = javascript_tag do
+  #     <<-END.html_safe
+  #     END
+  #   end
+  #   return html + script
+  # end
+
+end

data/app/helpers/chart_helper.rb

@@ -1,309 +1,5 @@
 module ChartHelper
 
-
-  #
-  #
-  # Highcharts
-  def hLine
-    html = "<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>".html_safe
-    script = javascript_tag do
-      <<-END.html_safe
-          $(function () {
-        $('#container').highcharts({
-            title: {
-                text: 'Monthly Average Temperature',
-                x: -20 //center
-            },
-            subtitle: {
-                text: 'Source: WorldClimate.com',
-                x: -20
-            },
-            xAxis: {
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-            },
-            yAxis: {
-                title: {
-                    text: 'Temperature (°C)'
-                },
-                plotLines: [{
-                    value: 0,
-                    width: 1,
-                    color: '#808080'
-                }]
-            },
-            tooltip: {
-                valueSuffix: '°C'
-            },
-            legend: {
-                layout: 'vertical',
-                align: 'right',
-                verticalAlign: 'middle',
-                borderWidth: 0
-            },
-            series: [{
-                name: 'Tokyo',
-                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
-            }, {
-                name: 'New York',
-                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
-            }, {
-                name: 'Berlin',
-                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
-            }, {
-                name: 'London',
-                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
-            }]
-        });
-    });
-      END
-    end
-    return html + script
-  end
-
-
-  def hArea
-    html = "<div id=\"container_area\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>".html_safe
-    script = javascript_tag do
-      <<-END.html_safe
-      $(function () {
-          $('#container_area').highcharts({
-              chart: {
-                  type: 'area'
-              },
-              title: {
-                  text: 'US and USSR nuclear stockpiles'
-              },
-              subtitle: {
-                  text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
-                      'thebulletin.metapress.com</a>'
-              },
-              xAxis: {
-                  allowDecimals: false,
-                  labels: {
-                      formatter: function () {
-                          return this.value; // clean, unformatted number for year
-                      }
-                  }
-              },
-              yAxis: {
-                  title: {
-                      text: 'Nuclear weapon states'
-                  },
-                  labels: {
-                      formatter: function () {
-                          return this.value / 1000 + 'k';
-                      }
-                  }
-              },
-              tooltip: {
-                  pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
-              },
-              plotOptions: {
-                  area: {
-                      pointStart: 1940,
-                      marker: {
-                          enabled: false,
-                          symbol: 'circle',
-                          radius: 2,
-                          states: {
-                              hover: {
-                                  enabled: true
-                              }
-                          }
-                      }
-                  }
-              },
-              series: [{
-                  name: 'USA',
-                  data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
-                      1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
-                      27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
-                      26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
-                      24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
-                      22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
-                      10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
-              }, {
-                  name: 'USSR/Russia',
-                  data: [null, null, null, null, null, null, null, null, null, null,
-                      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
-                      4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
-                      15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
-                      33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
-                      35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
-                      21000, 20000, 19000, 18000, 18000, 17000, 16000]
-              }]
-          });
-      });
-      END
-    end
-    return html + script
-  end
-
-
-  def hBar
-    html = "<div id=\"container_bar\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>".html_safe
-    script = javascript_tag do
-      <<-END.html_safe
-      $(function () {
-          $('#container_bar').highcharts({
-              chart: {
-                  type: 'bar'
-              },
-              title: {
-                  text: 'Historic World Population by Region'
-              },
-              subtitle: {
-                  text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
-              },
-              xAxis: {
-                  categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
-                  title: {
-                      text: null
-                  }
-              },
-              yAxis: {
-                  min: 0,
-                  title: {
-                      text: 'Population (millions)',
-                      align: 'high'
-                  },
-                  labels: {
-                      overflow: 'justify'
-                  }
-              },
-              tooltip: {
-                  valueSuffix: ' millions'
-              },
-              plotOptions: {
-                  bar: {
-                      dataLabels: {
-                          enabled: true
-                      }
-                  }
-              },
-              legend: {
-                  layout: 'vertical',
-                  align: 'right',
-                  verticalAlign: 'top',
-                  x: -40,
-                  y: 80,
-                  floating: true,
-                  borderWidth: 1,
-                  backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
-                  shadow: true
-              },
-              credits: {
-                  enabled: false
-              },
-              series: [{
-                  name: 'Year 1800',
-                  data: [107, 31, 635, 203, 2]
-              }, {
-                  name: 'Year 1900',
-                  data: [133, 156, 947, 408, 6]
-              }, {
-                  name: 'Year 2012',
-                  data: [1052, 954, 4250, 740, 38]
-              }]
-          });
-      });
-      END
-    end
-    return html + script
-  end
-
-
-
-
-
-  def hPie
-    html = "<div id=\"container_pie\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>".html_safe
-    script = javascript_tag do
-      <<-END.html_safe
-      $(function () {
-          $('#container_pie').highcharts({
-              chart: {
-                  plotBackgroundColor: null,
-                  plotBorderWidth: null,
-                  plotShadow: false,
-                  type: 'pie'
-              },
-              title: {
-                  text: 'Browser market shares January, 2015 to May, 2015'
-              },
-              tooltip: {
-                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-              },
-              plotOptions: {
-                  pie: {
-                      allowPointSelect: true,
-                      cursor: 'pointer',
-                      dataLabels: {
-                          enabled: true,
-                          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
-                          style: {
-                              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
-                          }
-                      }
-                  }
-              },
-              series: [{
-                  name: 'Brands',
-                  colorByPoint: true,
-                  data: [{
-                      name: 'Microsoft Internet Explorer',
-                      y: 56.33
-                  }, {
-                      name: 'Chrome',
-                      y: 24.03,
-                      sliced: true,
-                      selected: true
-                  }, {
-                      name: 'Firefox',
-                      y: 10.38
-                  }, {
-                      name: 'Safari',
-                      y: 4.77
-                  }, {
-                      name: 'Opera',
-                      y: 0.91
-                  }, {
-                      name: 'Proprietary or Undetectable',
-                      y: 0.2
-                  }]
-              }]
-          });
-      });
-      END
-    end
-    return html + script
-  end
-
-
-  #
-  #
-  # Google Chart
-
-  def gBar
-
-
-  end
-
-
-  def gLine
-
-  end
-
-
-
-
-
-
-  #
-  # D3.js related chart
-  #
-
   def horizontal_grouped_bar id=nil, size=nil, data=nil, options=nil
     html = "<div style=\"width: #{size[:width]}px; height: #{size[:height]}px;\" id=\"horizontal_grouped_bar_#{id}\"><svg></svg></div>".html_safe
     script = javascript_tag do