Merge branch 'leth-master'

Dfenestrator · Nov 20, 2016 · 7819f05 · 7819f05
2 parents ea55ec3 + a1d4533
commit 7819f05
Show file tree

Hide file tree

Showing 6 changed files with 442 additions and 341 deletions.
diff --git a/README.md b/README.md
@@ -24,19 +24,23 @@ Alternately, you can put gpcharts.py in your working directory or library path.
 from gpcharts import figure
 ```
 
-That's it. To get started, you can plot a simple graph with the following code:
+That's it. To get started, you can plot and display a simple graph with the following code:
 
 ```
 fig1 = figure()
 fig1.plot([8,7,6,5,4])
 ```
 
-This will open a webpage in your default browser with the plot. For more examples, see [testGraph.py](examples/testGraph.py). Examples include scatter plots, adding titles/plot labels, and datetime graphs. For simple bar and histogram examples, see [testGraph_barAndHist.py](examples/testGraph_barAndHist.py). For a jupyter notebook example, see [gpcharts test.ipynb](examples/gpcharts%20test.ipynb). The example does not display properly in Github, but the file should work if you download it and then do "Cell->Run All."
+This will open the chart in a Jupyter notebook if you're using one. If you aren't, it will open a webpage in your default browser with the plot.
+
+For more examples, see [testGraph.py](examples/testGraph.py). Examples include scatter plots, adding titles/plot labels, and datetime graphs. For simple bar and histogram examples, see [testGraph_barAndHist.py](examples/testGraph_barAndHist.py). For a jupyter notebook example, see [gpcharts test.ipynb](examples/gpcharts%20test.ipynb). The example does not display properly in Github, but the file should work if you download it and then do "Cell->Run All."
 
 For timeseries, use as your x-axis the following format (as a string): 'yyyy-mm-dd HH:MM:SS'. The 'HH:MM:SS' is optional, but be consistent throughout your input. GooPyCharts will take care of the rest.
 
+
+
 ## Features
-- line, scatter, bar, and histogram plots
+- line, scatter, bar, column, and histogram plots
 - plot multiple columns in one call
 - tooltips
 - best fit line for scatter plots
@@ -46,7 +50,10 @@ For timeseries, use as your x-axis the following format (as a string): 'yyyy-mm-
 - log scale for y-axis
 - automatic datetime/string/numeric detection on x-axis input (a huge pain point in both MATLAB and matplotlib)
 - Easy webpage integration (just copy and paste the HTML/Javascript from the output HTML file)
-- Jupyter notebook integration (use plot_nb, scatter_nb, bar_nb, and hist_nb for plots in notebooks)
+    - To get the HTML in code, cast a `figure` object to `str`. The
+      `figure.get_drawChart` method returns just the JavaScript function that
+      draws the chart.
+- Jupyter notebook integration
 
 ## Some Rules
 - Headers are column titles. The dependent variable header will be the title of the x axis, and the other headers will appear in the legend.

diff --git a/_templates.py b/_templates.py
@@ -0,0 +1,203 @@
+#The webpage templates. One each for numeric, datetime, and string as the independent variable.
+#Compressed the start and end of the template into 1 string to shorten number of lines of code.
+
+graphPgTemplateStart = """
+<html>
+<head>
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+    <script type="text/javascript">
+    $.getScript( "https://www.gstatic.com/charts/loader.js", function() {
+      if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) 
+      {
+         google.charts.load('current', {'packages':['corechart']});
+      }
+
+      google.charts.setOnLoadCallback(drawChart%(functionName)s);
+    });
+    
+    function drawChart%(functionName)s() {
+        var dataArr = %(data)s;
+        var grTitle = '%(title)s';
+        var height = %(height)d;
+        var width = %(width)d;
+        var logScaleFlag = %(logScaleFlag)s;
+        var vAxisTitle = '%(ylabel)s';
+        var vAxisOpt;
+        if(logScaleFlag)
+        {
+            vAxisOpt = { title: vAxisTitle, logScale: true, format: 'scientific'};
+        }
+        else
+        {
+            vAxisOpt = { title: vAxisTitle };
+        }
+"""
+
+graphPgTemplate_numeric = """
+        var options = {
+            width: width,
+            height: height,
+            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },
+            curveType: 'function',
+            title: grTitle,
+            titleTextStyle: { fontSize: 18, bold: true },
+            hAxis: { title: dataArr[0][0] },
+            vAxis: vAxisOpt,
+            %(trendLineStr)s
+        };
+
+        var data = new google.visualization.DataTable();
+        var csvOut = "data:text/csv;charset=utf-8";
+        // Add column headers
+        for (var j = 0; j < dataArr[0].length; j++)
+        {
+            data.addColumn('number',dataArr[0][j]);
+            csvOut += ',' + dataArr[0][j];
+        }
+        csvOut += '\\n';
+
+        // Add columns
+        for (var i = 1; i < dataArr.length; i++)
+        {
+            data.addRow(dataArr[i]);
+            csvOut += dataArr[i].join(",") + '\\n';
+        }
+"""
+
+graphPgTemplate_string = """
+        var options = {
+            width: width,
+            height: height,
+            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },
+            curveType: 'function',
+            title: grTitle,
+            titleTextStyle: { fontSize: 18, bold: true },
+            hAxis: { title: dataArr[0][0] },
+            vAxis: vAxisOpt,
+            %(trendLineStr)s
+        };
+
+        var data = new google.visualization.DataTable();
+        var csvOut = "data:text/csv;charset=utf-8";
+        // Add column headers
+        data.addColumn('string',dataArr[0][0]);
+        csvOut += ',' + dataArr[0][0];
+        for (var j = 0; j < dataArr[0].length-1; j++)
+        {
+           data.addColumn('number',dataArr[0][j+1]);
+           csvOut += ',' + dataArr[0][j+1];
+        }
+        csvOut += '\\n';
+
+        // Add columns
+        for (var i = 1; i < dataArr.length; i++)
+        {
+            data.addRow(dataArr[i]);
+            csvOut += dataArr[i].join(",") + '\\n';
+        }
+"""
+
+graphPgTemplate_dateTime = """
+        var options = {
+            width: width,
+            height: height,
+            explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 },
+            curveType: 'function',
+            title: grTitle,
+            titleTextStyle: { fontSize: 18, bold: true },
+            hAxis: { title: dataArr[0][0],
+               "gridlines": {
+                  "count": -1,
+                  "units": {
+                  "minutes": { "format": [ "HH:mm", "mm" ] },
+                  "hours": { "format": [ "MM/dd HH:mm", "HH" ] },
+                  "days": { "format": [ "MM/dd" ] },
+                  }
+               },
+               "minorGridlines": {
+                  "count": -1,
+                  "units": {
+                  "minutes": { "format": [ "HH:mm", "mm" ] },
+                  "hours": { "format": [ "MM/dd HH:mm", "HH" ] },
+                  "days": { "format": [ "MM/dd" ] },
+                  }
+               },
+            },
+            vAxis: vAxisOpt,
+            %(trendLineStr)s
+         };
+
+         var data = new google.visualization.DataTable();
+         var csvOut = "data:text/csv;charset=utf-8";
+         // Add column headers
+         data.addColumn('date',dataArr[0][0]);
+         csvOut += ',' + dataArr[0][0];
+         for (var j = 0; j < dataArr[0].length-1; j++)
+         {
+            data.addColumn('number',dataArr[0][j+1]);
+            csvOut += ',' + dataArr[0][j+1];
+         }
+         csvOut += '\\n';
+
+         var tmpArr;
+         // Add columns
+         for (var i = 0; i < dataArr.length-1; i++)
+         {
+            // Add time data
+            tempStr = dataArr[i+1][0];
+            year = parseInt(tempStr.substr(0,4));
+            month = parseInt(tempStr.substr(5,2))-1;
+            day = parseInt(tempStr.substr(8,2));
+            hour = parseInt(tempStr.substr(11,2));
+            minute = parseInt(tempStr.substr(14,2));
+            second = parseInt(tempStr.substr(17,2));
+            tmpArr = [new Date(year,month,day,hour,minute,second)];
+
+            data.addRow(tmpArr.concat(dataArr[i+1].slice(1,dataArr[i+1].length)));
+            csvOut += tempStr + ',' + dataArr[i+1].slice(1,dataArr[i+1].length).join(",") + '\\n';
+        }
+"""
+
+graphPgTemplate_hist = """
+        var options = {
+            width: width,
+            height: height,
+            title: grTitle,
+            titleTextStyle: { fontSize: 18, bold: true },
+            hAxis: { title: dataArr[0]},
+            vAxis: vAxisOpt,
+            %(trendLineStr)s
+        };
+
+        var data = new google.visualization.DataTable();
+        var csvOut = "data:text/csv;charset=utf-8";
+        // Add column header
+        data.addColumn('number',dataArr[0]);
+        csvOut += ',' + dataArr[0];
+        csvOut += '\\n';
+
+        // Add data
+        for (var i = 1; i < dataArr.length; i++)
+        {
+            data.addRow([dataArr[i]]);
+            csvOut += dataArr[i].toString()+'\\n';
+        }
+"""
+
+graphPgTemplateEnd = """
+        var chart = new google.visualization.%(plotType)s(document.getElementById('chart_div%(functionName)s'));
+
+        chart.draw(data, options);
+        document.getElementById('pic_div%(functionName)s').innerHTML = '<a href="' + chart.getImageURI() + '" download="'+grTitle+'.png">Download Figure</a>'
+        document.getElementById('csvFileDl%(functionName)s').innerHTML = '<a href="' + encodeURI(csvOut) + '" download="'+grTitle+'.csv">Download CSV</a>'
+    }
+    </script>
+</head>
+<body>
+    <div id="chart_div%(functionName)s"></div>
+    <div id="pic_div%(functionName)s"></div>
+    <div id="csvFileDl%(functionName)s"></div>
+</body>
+</html>
+"""
+