{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <script>\n",
       "  requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min'] }})\n",
       "  </script>\n",
       "\n",
       "\n",
       "<div id=\"15364e44-e887-419b-baf4-95d87b7f3345\" style=\"height: 100%; width: 100%;\"></div>\n",
       "\n",
       "<script>\n",
       " require(['plotly'], function(Plotly) { \n",
       "Plotly.newPlot(\n",
       "  '15364e44-e887-419b-baf4-95d87b7f3345',\n",
       "  [{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[20,14,23],\"type\":\"bar\"}],\n",
       "  {},\n",
       "  {\"linkText\":\"Export to plot.ly\",\"showLink\":true}\n",
       ")\n",
       "\n",
       "window.addEventListener('resize', function() {\n",
       "  Plotly.Plots.resize(document.getElementById('15364e44-e887-419b-baf4-95d87b7f3345'))\n",
       "})\n",
       " }) \n",
       "</script>"
      ],
      "text/plain": [
       "#<Plotly::Offline::HTML:0x007f99a3875f20 @id=\"15364e44-e887-419b-baf4-95d87b7f3345\", @data=[{:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[20, 14, 23], :type=>:bar}], @layout={}, @config={:linkText=>\"Export to plot.ly\", :showLink=>true}, @embedded=true>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Basic Bar Chart\n",
    "require 'rbplotly'\n",
    "\n",
    "trace = { \n",
    "  x: %w(giraffes orangutans monkeys),\n",
    "  y: [20, 14, 23],\n",
    "  type: :bar\n",
    "}\n",
    "\n",
    "plot = Plotly::Plot.new(data: [trace])\n",
    "plot.show"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <script>\n",
       "  requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min'] }})\n",
       "  </script>\n",
       "\n",
       "\n",
       "<div id=\"c4af18d6-ca92-4bd0-8e5a-1fe6b3bcc084\" style=\"height: 100%; width: 100%;\"></div>\n",
       "\n",
       "<script>\n",
       " require(['plotly'], function(Plotly) { \n",
       "Plotly.newPlot(\n",
       "  'c4af18d6-ca92-4bd0-8e5a-1fe6b3bcc084',\n",
       "  [{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[20,14,23],\"type\":\"bar\",\"name\":\"SF Zoo\"},{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[12,18,29],\"type\":\"bar\",\"name\":\"LA Zoo\"}],\n",
       "  {},\n",
       "  {\"linkText\":\"Export to plot.ly\",\"showLink\":true}\n",
       ")\n",
       "\n",
       "window.addEventListener('resize', function() {\n",
       "  Plotly.Plots.resize(document.getElementById('c4af18d6-ca92-4bd0-8e5a-1fe6b3bcc084'))\n",
       "})\n",
       " }) \n",
       "</script>"
      ],
      "text/plain": [
       "#<Plotly::Offline::HTML:0x007f99a301e458 @id=\"c4af18d6-ca92-4bd0-8e5a-1fe6b3bcc084\", @data=[{:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[20, 14, 23], :type=>:bar, :name=>\"SF Zoo\"}, {:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[12, 18, 29], :type=>:bar, :name=>\"LA Zoo\"}], @layout={}, @config={:linkText=>\"Export to plot.ly\", :showLink=>true}, @embedded=true>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Grouped Bar Chart\n",
    "require 'rbplotly'\n",
    "\n",
    "trace1 = {\n",
    "  x:    %w(giraffes orangutans monkeys),\n",
    "  y:    [20, 14, 23],\n",
    "  type: :bar,\n",
    "  name: 'SF Zoo'\n",
    "}\n",
    "trace2 = {\n",
    "  x:    %w(giraffes orangutans monkeys),\n",
    "  y:    [12, 18, 29],\n",
    "  type: :bar,\n",
    "  name: 'LA Zoo'\n",
    "}\n",
    "\n",
    "plot = Plotly::Plot.new(data: [trace1, trace2])\n",
    "plot.show"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <script>\n",
       "  requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min'] }})\n",
       "  </script>\n",
       "\n",
       "\n",
       "<div id=\"0fc03d39-3ef1-4d46-a2de-286272798cd1\" style=\"height: 100%; width: 100%;\"></div>\n",
       "\n",
       "<script>\n",
       " require(['plotly'], function(Plotly) { \n",
       "Plotly.newPlot(\n",
       "  '0fc03d39-3ef1-4d46-a2de-286272798cd1',\n",
       "  [{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[20,14,23],\"type\":\"bar\",\"name\":\"SF Zoo\"},{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[12,18,29],\"type\":\"bar\",\"name\":\"LA Zoo\"}],\n",
       "  {\"barmode\":\"stack\"},\n",
       "  {\"linkText\":\"Export to plot.ly\",\"showLink\":true}\n",
       ")\n",
       "\n",
       "window.addEventListener('resize', function() {\n",
       "  Plotly.Plots.resize(document.getElementById('0fc03d39-3ef1-4d46-a2de-286272798cd1'))\n",
       "})\n",
       " }) \n",
       "</script>"
      ],
      "text/plain": [
       "#<Plotly::Offline::HTML:0x007f99a32c9720 @id=\"0fc03d39-3ef1-4d46-a2de-286272798cd1\", @data=[{:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[20, 14, 23], :type=>:bar, :name=>\"SF Zoo\"}, {:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[12, 18, 29], :type=>:bar, :name=>\"LA Zoo\"}], @layout={:barmode=>:stack}, @config={:linkText=>\"Export to plot.ly\", :showLink=>true}, @embedded=true>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Grouped to Stacked\n",
    "plot.layout.barmode = :stack\n",
    "plot.show"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <script>\n",
       "  requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min'] }})\n",
       "  </script>\n",
       "\n",
       "\n",
       "<div id=\"83a0745a-84f0-4cd3-be13-af2a424a08f5\" style=\"height: 100%; width: 100%;\"></div>\n",
       "\n",
       "<script>\n",
       " require(['plotly'], function(Plotly) { \n",
       "Plotly.newPlot(\n",
       "  '83a0745a-84f0-4cd3-be13-af2a424a08f5',\n",
       "  [{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[20,14,23],\"type\":\"bar\",\"name\":\"SF Zoo\"},{\"x\":[\"giraffes\",\"orangutans\",\"monkeys\"],\"y\":[12,18,29],\"type\":\"bar\",\"name\":\"LA Zoo\"}],\n",
       "  {\"barmode\":\"stack\"},\n",
       "  {\"linkText\":\"Export to plot.ly\",\"showLink\":true}\n",
       ")\n",
       "\n",
       "window.addEventListener('resize', function() {\n",
       "  Plotly.Plots.resize(document.getElementById('83a0745a-84f0-4cd3-be13-af2a424a08f5'))\n",
       "})\n",
       " }) \n",
       "</script>"
      ],
      "text/plain": [
       "#<Plotly::Offline::HTML:0x007f99a3e19cb0 @id=\"83a0745a-84f0-4cd3-be13-af2a424a08f5\", @data=[{:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[20, 14, 23], :type=>:bar, :name=>\"SF Zoo\"}, {:x=>[\"giraffes\", \"orangutans\", \"monkeys\"], :y=>[12, 18, 29], :type=>:bar, :name=>\"LA Zoo\"}], @layout={:barmode=>:stack}, @config={:linkText=>\"Export to plot.ly\", :showLink=>true}, @embedded=true>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Stacked Bar Chart\n",
    "require 'rbplotly'\n",
    "\n",
    "trace1 = {\n",
    "  x:    %w(giraffes orangutans monkeys),\n",
    "  y:    [20, 14, 23],\n",
    "  type: :bar,\n",
    "  name: 'SF Zoo'\n",
    "}\n",
    "trace2 = {\n",
    "  x:    %w(giraffes orangutans monkeys),\n",
    "  y:    [12, 18, 29],\n",
    "  type: :bar,\n",
    "  name: 'LA Zoo'\n",
    "}\n",
    "\n",
    "plot = Plotly::Plot.new(data: [trace1, trace2], layout: { barmode: :stack } )\n",
    "plot.show"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Ruby 2.3.1",
   "language": "ruby",
   "name": "ruby"
  },
  "language_info": {
   "file_extension": ".rb",
   "mimetype": "application/x-ruby",
   "name": "ruby",
   "version": "2.3.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}