examples/gpcharts test.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# GooPyCharts Demo Notebook\n",
    "## Import GooPyCharts\n",
    "To cut down on syntax, import figure directly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from gpcharts import figure"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Simple Line Graph\n",
    "Same graph as described in the readme."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Fig1);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Fig1() {\n",
       "        var dataArr = [['', 'data1'], [0, 8], [1, 7], [2, 6], [3, 5], [4, 4]];\n",
       "        var grTitle = 'Fig1';\n",
       "        var height = 600;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = '';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0] },\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column headers\n",
       "        for (var j = 0; j < dataArr[0].length; j++)\n",
       "        {\n",
       "            data.addColumn('number',dataArr[0][j]);\n",
       "            csvOut += ',' + dataArr[0][j];\n",
       "        }\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add columns\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow(dataArr[i]);\n",
       "            csvOut += dataArr[i].join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.LineChart(document.getElementById('chart_div_Fig1'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Fig1').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Fig1').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Fig1\"></div>\n",
       "    <div id=\"pic_div_Fig1\"></div>\n",
       "    <div id=\"csvFileDl_Fig1\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig1 = figure()\n",
    "fig1.plot([8,7,6,5,4])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line Graph with Two Lines\n",
    "Another line graph, but with two dependent variables. Also customizing plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Two_lines);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Two_lines() {\n",
       "        var dataArr = [['Days', 'data1', 'data2'], ['Mon', 5, 4], ['Tues', 8, 7], ['Wed', 4, 8], ['Thurs', 10, 10], ['Fri', 3, 12]];\n",
       "        var grTitle = 'Two lines';\n",
       "        var height = 600;\n",
       "        var width = 600;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = 'Count';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0] },\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column headers\n",
       "        data.addColumn('string',dataArr[0][0]);\n",
       "        csvOut += ',' + dataArr[0][0];\n",
       "        for (var j = 0; j < dataArr[0].length-1; j++)\n",
       "        {\n",
       "           data.addColumn('number',dataArr[0][j+1]);\n",
       "           csvOut += ',' + dataArr[0][j+1];\n",
       "        }\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add columns\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow(dataArr[i]);\n",
       "            csvOut += dataArr[i].join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.LineChart(document.getElementById('chart_div_Two_lines'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Two_lines').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Two_lines').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Two_lines\"></div>\n",
       "    <div id=\"pic_div_Two_lines\"></div>\n",
       "    <div id=\"csvFileDl_Two_lines\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig2 = figure(title='Two lines',xlabel='Days',ylabel='Count',height=600,width=600)\n",
    "xVals = ['Mon','Tues','Wed','Thurs','Fri']\n",
    "yVals = [[5,4],[8,7],[4,8],[10,10],[3,12]]\n",
    "fig2.plot(xVals,yVals)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## DateTime Graph\n",
    "A graph with dates and times. Title is assigned afterwards, and data is given header information."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "fig3 = figure()\n",
    "fig3.title = 'Weather over Days'\n",
    "fig3.ylabel = 'Temperature'\n",
    "#modify size of graph\n",
    "fig3.height = 800\n",
    "fig3.width = 1000"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "X datetime data can take either of the following formats: \"yyyy-mm-dd HH:MM:SS\" or \"yyyy-mm-dd\", but be consistent."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Weather_over_Days);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Weather_over_Days() {\n",
       "        var dataArr = [['Dates', 'Shakuras', 'Korhal', 'Aiur'], ['2016-03-20 00:00:00', 10, 30, 40], ['2016-03-21 00:00:00', 12, 28, 41], ['2016-03-25 00:00:00', 15, 34, 38], ['2016-04-01 00:00:00', 8, 33, 47]];\n",
       "        var grTitle = 'Weather over Days';\n",
       "        var height = 800;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = 'Temperature';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0],\n",
       "               \"gridlines\": {\n",
       "                  \"count\": -1,\n",
       "                  \"units\": {\n",
       "                  \"minutes\": { \"format\": [ \"HH:mm\", \"mm\" ] },\n",
       "                  \"hours\": { \"format\": [ \"MM/dd HH:mm\", \"HH\" ] },\n",
       "                  \"days\": { \"format\": [ \"MM/dd\" ] },\n",
       "                  }\n",
       "               },\n",
       "               \"minorGridlines\": {\n",
       "                  \"count\": -1,\n",
       "                  \"units\": {\n",
       "                  \"minutes\": { \"format\": [ \"HH:mm\", \"mm\" ] },\n",
       "                  \"hours\": { \"format\": [ \"MM/dd HH:mm\", \"HH\" ] },\n",
       "                  \"days\": { \"format\": [ \"MM/dd\" ] },\n",
       "                  }\n",
       "               },\n",
       "            },\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "         };\n",
       "\n",
       "         var data = new google.visualization.DataTable();\n",
       "         var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "         // Add column headers\n",
       "         data.addColumn('date',dataArr[0][0]);\n",
       "         csvOut += ',' + dataArr[0][0];\n",
       "         for (var j = 0; j < dataArr[0].length-1; j++)\n",
       "         {\n",
       "            data.addColumn('number',dataArr[0][j+1]);\n",
       "            csvOut += ',' + dataArr[0][j+1];\n",
       "         }\n",
       "         csvOut += '\\n';\n",
       "\n",
       "         var tmpArr;\n",
       "         // Add columns\n",
       "         for (var i = 0; i < dataArr.length-1; i++)\n",
       "         {\n",
       "            // Add time data\n",
       "            tempStr = dataArr[i+1][0];\n",
       "            year = parseInt(tempStr.substr(0,4));\n",
       "            month = parseInt(tempStr.substr(5,2))-1;\n",
       "            day = parseInt(tempStr.substr(8,2));\n",
       "            hour = parseInt(tempStr.substr(11,2));\n",
       "            minute = parseInt(tempStr.substr(14,2));\n",
       "            second = parseInt(tempStr.substr(17,2));\n",
       "            tmpArr = [new Date(year,month,day,hour,minute,second)];\n",
       "\n",
       "            data.addRow(tmpArr.concat(dataArr[i+1].slice(1,dataArr[i+1].length)));\n",
       "            csvOut += tempStr + ',' + dataArr[i+1].slice(1,dataArr[i+1].length).join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.LineChart(document.getElementById('chart_div_Weather_over_Days'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Weather_over_Days').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Weather_over_Days').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Weather_over_Days\"></div>\n",
       "    <div id=\"pic_div_Weather_over_Days\"></div>\n",
       "    <div id=\"csvFileDl_Weather_over_Days\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#xVals = ['Dates','2016-03-20 00:00:00','2016-03-21 00:00:00','2016-03-25 00:00:00','2016-04-01 00:00:00']\n",
    "xVals = ['Dates','2016-03-20','2016-03-21','2016-03-25','2016-04-01']\n",
    "yVals = [['Shakuras','Korhal','Aiur'],[10,30,40],[12,28,41],[15,34,38],[8,33,47]]\n",
    "fig3.plot(xVals,yVals)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## A Log Scale Example\n",
    "Set \"logScale=True\" when calling plot (or plot_nb for notebooks) to plot the y axis in log scale."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Population_Growth);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Population_Growth() {\n",
       "        var dataArr = [['Year', 'Gotham City', 'Central City'], [1700, 0, 10], [1800, 100, 200], [1900, 100000, 500000], [2000, 5000000, 10000000]];\n",
       "        var grTitle = 'Population Growth';\n",
       "        var height = 600;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = true;\n",
       "        var vAxisTitle = 'Population';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0] },\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column headers\n",
       "        for (var j = 0; j < dataArr[0].length; j++)\n",
       "        {\n",
       "            data.addColumn('number',dataArr[0][j]);\n",
       "            csvOut += ',' + dataArr[0][j];\n",
       "        }\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add columns\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow(dataArr[i]);\n",
       "            csvOut += dataArr[i].join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.LineChart(document.getElementById('chart_div_Population_Growth'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Population_Growth').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Population_Growth').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Population_Growth\"></div>\n",
       "    <div id=\"pic_div_Population_Growth\"></div>\n",
       "    <div id=\"csvFileDl_Population_Growth\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig4 = figure(title='Population Growth',ylabel='Population')\n",
    "xVals = ['Year',1700,1800,1900,2000]\n",
    "yVals = [['Gotham City', 'Central City'],[0,10],[100,200],[100000,500000],[5000000,10000000]]\n",
    "fig4.plot(xVals,yVals,logScale=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Scatter Plot\n",
    "Scatter plot arguments are the same as for normal line graph arguments, but use \"scatter\" (or \"scatter_nb\" for notebooks) to plot instead. Scatter plots also support trend lines. Set \"trendline=True\" in the arguments to get a trendline on your graph. Currently only a trendline for the first dependent variable is supported."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Strong_Correlation);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Strong_Correlation() {\n",
       "        var dataArr = [['', 'data1', 'data2'], [1, 1, 5], [2, 2, 4], [3, 3, 3], [4, 4, 2], [5, 5, 1]];\n",
       "        var grTitle = 'Strong Correlation';\n",
       "        var height = 600;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = '';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0] },\n",
       "            vAxis: vAxisOpt,\n",
       "            trendlines: { 0: {showR2: true, visibleInLegend: true} }\n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column headers\n",
       "        for (var j = 0; j < dataArr[0].length; j++)\n",
       "        {\n",
       "            data.addColumn('number',dataArr[0][j]);\n",
       "            csvOut += ',' + dataArr[0][j];\n",
       "        }\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add columns\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow(dataArr[i]);\n",
       "            csvOut += dataArr[i].join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_Strong_Correlation'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Strong_Correlation').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Strong_Correlation').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Strong_Correlation\"></div>\n",
       "    <div id=\"pic_div_Strong_Correlation\"></div>\n",
       "    <div id=\"csvFileDl_Strong_Correlation\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig5 = figure('Strong Correlation')\n",
    "fig5.scatter([1,2,3,4,5],[[1,5],[2,4],[3,3],[4,2],[5,1]],trendline=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bar Graph\n",
    "Simple horizontal bar graphs are supported. Use function \"bar\" (or \"bar_nb\" for notebooks)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Percent_Alcohol_Consumption);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Percent_Alcohol_Consumption() {\n",
       "        var dataArr = [['Percentage', 'Type'], ['Beer', 40], ['Wine', 50], ['Liquor', 10]];\n",
       "        var grTitle = 'Percent Alcohol Consumption';\n",
       "        var height = 600;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = '';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },\n",
       "            curveType: 'function',\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0][0] },\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column headers\n",
       "        data.addColumn('string',dataArr[0][0]);\n",
       "        csvOut += ',' + dataArr[0][0];\n",
       "        for (var j = 0; j < dataArr[0].length-1; j++)\n",
       "        {\n",
       "           data.addColumn('number',dataArr[0][j+1]);\n",
       "           csvOut += ',' + dataArr[0][j+1];\n",
       "        }\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add columns\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow(dataArr[i]);\n",
       "            csvOut += dataArr[i].join(\",\") + '\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.BarChart(document.getElementById('chart_div_Percent_Alcohol_Consumption'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Percent_Alcohol_Consumption').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Percent_Alcohol_Consumption').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Percent_Alcohol_Consumption\"></div>\n",
       "    <div id=\"pic_div_Percent_Alcohol_Consumption\"></div>\n",
       "    <div id=\"csvFileDl_Percent_Alcohol_Consumption\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig6 = figure('Percent Alcohol Consumption')\n",
    "fig6.bar(['Percentage','Beer','Wine','Liquor'],['Type',40,50,10])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Histogram\n",
    "Simple histograms are also supported. Histograms take in 1 list of input. Use function \"hist\" (or \"hist_nb\" for notebooks)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "<head>\n",
       "    <script src=\"https://code.jquery.com/jquery-1.10.2.js\"></script>\n",
       "    <script type=\"text/javascript\">\n",
       "    $.getScript( \"https://www.gstatic.com/charts/loader.js\", function() {\n",
       "      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) \n",
       "      {\n",
       "         google.charts.load('current', {'packages':['corechart']});\n",
       "      }\n",
       "\n",
       "      google.charts.setOnLoadCallback(drawChart_Distribution);\n",
       "    });\n",
       "    \n",
       "    function drawChart_Distribution() {\n",
       "        var dataArr = ['value', 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 5, 6, 7, 8, 8, 8, 8, 8, 9, 9, 9, 10, 11, 12, 13, 13, 13, 13, 14];\n",
       "        var grTitle = 'Distribution';\n",
       "        var height = 600;\n",
       "        var width = 1000;\n",
       "        var logScaleFlag = false;\n",
       "        var vAxisTitle = '';\n",
       "        var vAxisOpt;\n",
       "        if(logScaleFlag)\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};\n",
       "        }\n",
       "        else\n",
       "        {\n",
       "            vAxisOpt = { title: vAxisTitle };\n",
       "        }\n",
       "\n",
       "        var options = {\n",
       "            width: width,\n",
       "            height: height,\n",
       "            title: grTitle,\n",
       "            titleTextStyle: { fontSize: 18, bold: true },\n",
       "            hAxis: { title: dataArr[0]},\n",
       "            vAxis: vAxisOpt,\n",
       "            \n",
       "        };\n",
       "\n",
       "        var data = new google.visualization.DataTable();\n",
       "        var csvOut = \"data:text/csv;charset=utf-8\";\n",
       "        // Add column header\n",
       "        data.addColumn('number',dataArr[0]);\n",
       "        csvOut += ',' + dataArr[0];\n",
       "        csvOut += '\\n';\n",
       "\n",
       "        // Add data\n",
       "        for (var i = 1; i < dataArr.length; i++)\n",
       "        {\n",
       "            data.addRow([dataArr[i]]);\n",
       "            csvOut += dataArr[i].toString()+'\\n';\n",
       "        }\n",
       "\n",
       "        var chart = new google.visualization.Histogram(document.getElementById('chart_div_Distribution'));\n",
       "\n",
       "        chart.draw(data, options);\n",
       "        document.getElementById('pic_div_Distribution').innerHTML = '<a href=\"' + chart.getImageURI() + '\" download=\"'+grTitle+'.png\">Download Figure</a>'\n",
       "        document.getElementById('csvFileDl_Distribution').innerHTML = '<a href=\"' + encodeURI(csvOut) + '\" download=\"'+grTitle+'.csv\">Download CSV</a>'\n",
       "    }\n",
       "    </script>\n",
       "</head>\n",
       "<body>\n",
       "    <div id=\"chart_div_Distribution\"></div>\n",
       "    <div id=\"pic_div_Distribution\"></div>\n",
       "    <div id=\"csvFileDl_Distribution\"></div>\n",
       "</body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "fig7 = figure('Distribution',xlabel='value')\n",
    "fig7.hist([1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,3,3,3,3,4,4,5,6,7,8,8,8,8,8,9,9,9,10,11,12,13,13,13,13,14])"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}