chart 0.1.4.2 → 0.1.4.3

data/app/helpers/google_helper.rb

@@ -0,0 +1,307 @@
+module GoogleHelper
+
+    #
+    #
+    # Google Chart
+    def google_pie id=nil, size=nil
+      html = "<div id=\"piechart\" style=\"width: 900px; height: 500px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+        google.charts.load('current', {'packages':['corechart']});
+      google.charts.setOnLoadCallback(drawChart);
+      function drawChart() {
+
+        var data = google.visualization.arrayToDataTable([
+          ['Task', 'Hours per Day'],
+          ['Work',     11],
+          ['Eat',      2],
+          ['Commute',  2],
+          ['Watch TV', 2],
+          ['Sleep',    7]
+        ]);
+
+        var options = {
+          title: 'My Daily Activities'
+        };
+
+        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
+
+        chart.draw(data, options);
+      }
+
+
+        END
+      end
+      return html + script
+    end
+
+    def google_area id=nil, size=nil
+      html = "<div id=\"chart_div\" style=\"width: 900px; height: 500px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+          google.charts.load('current', {'packages':['corechart']});
+          google.charts.setOnLoadCallback(drawChart);
+          function drawChart() {
+          var data = google.visualization.arrayToDataTable([
+            ['Year', 'Sales', 'Expenses'],
+            ['2013',  1000,      400],
+            ['2014',  1170,      460],
+            ['2015',  660,       1120],
+            ['2016',  1030,      540]
+          ]);
+
+          var options = {
+            title: 'Company Performance',
+            hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
+            vAxis: {minValue: 0}
+          };
+
+          var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
+          chart.draw(data, options);
+          }
+        END
+      end
+      return html + script
+    end
+
+    def google_geochart id=nil, size=nil
+      html = "<div id=\"regions_div\" style=\"width: 900px; height: 500px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+            google.charts.load('current', {'packages':['geochart']});
+          google.charts.setOnLoadCallback(drawRegionsMap);
+
+          function drawRegionsMap() {
+
+            var data = google.visualization.arrayToDataTable([
+              ['Country', 'Popularity'],
+              ['Germany', 200],
+              ['United States', 300],
+              ['Brazil', 400],
+              ['Canada', 500],
+              ['France', 600],
+              ['RU', 700]
+            ]);
+
+            var options = {};
+
+            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
+
+            chart.draw(data, options);
+          }
+        END
+      end
+      return html + script
+    end
+
+    def google_gauge_charts id=nil, size=nil
+      html = "<div id=\"chart_div\" style=\"width: 400px; height: 120px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+          google.charts.load('current', {'packages':['gauge']});
+          google.charts.setOnLoadCallback(drawChart);
+          function drawChart() {
+
+          var data = google.visualization.arrayToDataTable([
+            ['Label', 'Value'],
+            ['Memory', 80],
+            ['CPU', 55],
+            ['Network', 68]
+          ]);
+
+          var options = {
+            width: 400, height: 120,
+            redFrom: 90, redTo: 100,
+            yellowFrom:75, yellowTo: 90,
+            minorTicks: 5
+          };
+
+          var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
+
+          chart.draw(data, options);
+
+          setInterval(function() {
+            data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
+            chart.draw(data, options);
+          }, 13000);
+          setInterval(function() {
+            data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
+            chart.draw(data, options);
+          }, 5000);
+          setInterval(function() {
+            data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
+            chart.draw(data, options);
+          }, 26000);
+          }
+
+        END
+      end
+      return html + script
+    end
+
+    def google_bar id=nil, size=nil
+      html = "<div id=\"barchart_values\" style=\"width: 900px; height: 300px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+        google.charts.load("current", {packages:["corechart"]});
+        google.charts.setOnLoadCallback(drawChart);
+        function drawChart() {
+        var data = google.visualization.arrayToDataTable([
+          ["Element", "Density", { role: "style" } ],
+          ["Copper", 8.94, "#b87333"],
+          ["Silver", 10.49, "silver"],
+          ["Gold", 19.30, "gold"],
+          ["Platinum", 21.45, "color: #e5e4e2"]
+        ]);
+
+        var view = new google.visualization.DataView(data);
+        view.setColumns([0, 1,
+                         { calc: "stringify",
+                           sourceColumn: 1,
+                           type: "string",
+                           role: "annotation" },
+                         2]);
+
+        var options = {
+          title: "Density of Precious Metals, in g/cm^3",
+          width: 600,
+          height: 400,
+          bar: {groupWidth: "95%"},
+          legend: { position: "none" },
+        };
+        var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
+        chart.draw(view, options);
+        }
+
+        END
+      end
+      return html + script
+    end
+
+    def google_bubble id=nil, size=nil
+      html = "<div id=\"series_chart_div\" style=\"width: 900px; height: 500px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+          google.charts.load('current', {'packages':['corechart']});
+          google.charts.setOnLoadCallback(drawSeriesChart);
+
+          function drawSeriesChart() {
+
+          var data = google.visualization.arrayToDataTable([
+          ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
+          ['CAN',    80.66,              1.67,      'North America',  33739900],
+          ['DEU',    79.84,              1.36,      'Europe',         81902307],
+          ['DNK',    78.6,               1.84,      'Europe',         5523095],
+          ['EGY',    72.73,              2.78,      'Middle East',    79716203],
+          ['GBR',    80.05,              2,         'Europe',         61801570],
+          ['IRN',    72.49,              1.7,       'Middle East',    73137148],
+          ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
+          ['ISR',    81.55,              2.96,      'Middle East',    7485600],
+          ['RUS',    68.6,               1.54,      'Europe',         141850000],
+          ['USA',    78.09,              2.05,      'North America',  307007000]
+          ]);
+
+          var options = {
+          title: 'Correlation between life expectancy, fertility rate ' +
+                 'and population of some world countries (2010)',
+          hAxis: {title: 'Life Expectancy'},
+          vAxis: {title: 'Fertility Rate'},
+          bubble: {textStyle: {fontSize: 11}}
+          };
+
+          var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
+          chart.draw(data, options);
+          }
+
+        END
+      end
+      return html + script
+    end
+
+    def google_calendar id=nil, size=nil
+      html = "<div id=\"calendar_basic\" style=\"width: 1000px; height: 350px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+          google.charts.load("current", {packages:["calendar"]});
+          google.charts.setOnLoadCallback(drawChart);
+
+          function drawChart() {
+          var dataTable = new google.visualization.DataTable();
+          dataTable.addColumn({ type: 'date', id: 'Date' });
+          dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
+          dataTable.addRows([
+            [ new Date(2015, 3, 13), 37032 ],
+            [ new Date(2015, 3, 14), 38024 ],
+            [ new Date(2015, 3, 15), 38024 ],
+            [ new Date(2015, 3, 16), 38108 ],
+            [ new Date(2015, 3, 17), 38229 ],
+            // Many rows omitted for brevity.
+            [ new Date(2016, 9, 4), 38177 ],
+            [ new Date(2016, 9, 5), 38705 ],
+            [ new Date(2016, 9, 12), 38210 ],
+            [ new Date(2016, 9, 13), 38029 ],
+            [ new Date(2016, 9, 19), 38823 ],
+            [ new Date(2016, 9, 23), 38345 ],
+            [ new Date(2016, 9, 24), 38436 ],
+            [ new Date(2016, 9, 30), 38447 ]
+          ]);
+
+          var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
+
+          var options = {
+           title: "Red Sox Attendance",
+           height: 350,
+          };
+
+          chart.draw(dataTable, options);
+          }
+
+        END
+      end
+      return html + script
+    end
+
+    def google_scatterchart id=nil, size=nil
+      html = "<div id=\"chart_div\" style=\"width: 900px; height: 500px;\"></div>".html_safe
+      script = javascript_tag do
+        <<-END.html_safe
+          google.charts.load('current', {'packages':['corechart']});
+          google.charts.setOnLoadCallback(drawChart);
+          function drawChart() {
+            var data = google.visualization.arrayToDataTable([
+              ['Age', 'Weight'],
+              [ 8,      12],
+              [ 4,      5.5],
+              [ 11,     14],
+              [ 4,      5],
+              [ 3,      3.5],
+              [ 6.5,    7]
+            ]);
+            var options = {
+              title: 'Age vs. Weight comparison',
+              hAxis: {title: 'Age', minValue: 0, maxValue: 15},
+              vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
+              legend: 'none'
+            };
+            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
+            chart.draw(data, options);
+          }
+
+        END
+      end
+      return html + script
+    end
+
+
+
+    # def google_area
+    #   html = "".html_safe
+    #   script = javascript_tag do
+    #     <<-END.html_safe
+    #     END
+    #   end
+    #   return html + script
+    # end
+
+
+end

data/app/helpers/highcharts_helper.rb

@@ -0,0 +1,275 @@
+module HighchartsHelper
+  #
+  # Highcharts
+  def highcharts_line
+    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 highcharts_area
+    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 highcharts_bar
+    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 highcharts_pie
+    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
+
+
+end