From 1fb673c2ea7ce62c48bbda33c360becdc6ebf8c9 Mon Sep 17 00:00:00 2001
From: Jeremy Dorn <jeremy@jeremydorn.com>
Date: Thu, 13 Apr 2017 11:58:11 -0400
Subject: [PATCH] Add support for material charts (Bar and Line)

---
 classes/headers/ChartHeader.php          |  3 ++
 templates/default/html/chart_page.twig   |  2 +-
 templates/default/html/chart_report.twig | 50 +++---------------------
 3 files changed, 9 insertions(+), 46 deletions(-)

diff --git a/classes/headers/ChartHeader.php b/classes/headers/ChartHeader.php
index 9ddb7bb7..dadd141f 100644
--- a/classes/headers/ChartHeader.php
+++ b/classes/headers/ChartHeader.php
@@ -31,6 +31,9 @@ class ChartHeader extends HeaderBase {
 				'WordTree',
 				'Gauge',
 				'Gantt',
+				// Material charts
+				'Bar',
+				'Line',
 			),
 			'default'=>'LineChart'
 		),
diff --git a/templates/default/html/chart_page.twig b/templates/default/html/chart_page.twig
index cc631c9f..5cb012d3 100644
--- a/templates/default/html/chart_page.twig
+++ b/templates/default/html/chart_page.twig
@@ -3,7 +3,7 @@
 	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script src="{{base}}/public/js/jquery-2.0.3.min.js"></script>
 	<script>
-	google.charts.load("current", {packages:["corechart","geochart","annotatedtimeline","gauge","gantt"]});
+  google.charts.load('current', {packages:["corechart","geochart","annotatedtimeline","gauge","gantt","bar","line"]});
 	</script>
     <script src="{{ base }}/public/js/timeline.js"></script>
     <link rel="stylesheet" type="text/css" href="{{ base }}/public/css/timeline.css">
diff --git a/templates/default/html/chart_report.twig b/templates/default/html/chart_report.twig
index 8f8ba645..a4f7d248 100644
--- a/templates/default/html/chart_report.twig
+++ b/templates/default/html/chart_report.twig
@@ -82,57 +82,17 @@
 
         {% if chart.type == "Timeline" %}
             var chart_{{chart.num}} = new links.Timeline(document.getElementById('chart_div_{{chart.num}}'));
+        {% elseif chart.type == "Bar" or chart.type == "Line" %}
+          var chart_{{chart.num}} = new google.charts.{{chart.type}}(document.getElementById('chart_div_{{chart.num}}'));
+          options_{{chart.num}} = google.charts.{{chart.type}}.convertOptions(options_{{chart.num}});
         {% else %}
-			var chart_{{chart.num}} = new google.visualization.{{chart.type}}(document.getElementById('chart_div_{{chart.num}}'));
+          var chart_{{chart.num}} = new google.visualization.{{chart.type}}(document.getElementById('chart_div_{{chart.num}}'));
         {% endif %}
 
-            google.visualization.events.addListener(chart_{{chart.num}}, 'select', function () {
-                select2hide(chart_{{chart.num}}, data_{{chart.num}}, options_{{chart.num}}, columns_{{chart.num}}, series_{{chart.num}});
-            });
-
-        {% if chart.type == "BarChart" %}
-            google.visualization.events.addListener(chart_{{chart.num}}, 'ready', function () {
-                    $('#chart_div_{{chart.num}}').find('text[text-anchor=end]').each(function () {
-                        $(this).attr('x', 25);
-                        $(this).attr('text-anchor', 'front');
-                    });
-            });
-        {% endif %}
-            chart_{{chart.num}}.draw(data_{{chart.num}}, options_{{chart.num}});
+        chart_{{chart.num}}.draw(data_{{chart.num}}, options_{{chart.num}});
 		{% endfor %}
 	}
 
-    function select2hide (chart, data, options, columns, series) {
-        var sel = chart.getSelection();
-        // if selection length is 0, we deselected an element
-        if (sel.length > 0) {
-            // if row is undefined, we clicked on the legend
-            if (sel[0].row == null) {
-                var col = sel[0].column;
-                if (columns[col] == col) {
-                    // hide the data series
-                    columns[col] = {
-                        label: data.getColumnLabel(col),
-                        type: data.getColumnType(col),
-                        calc: function () {
-                            return null;
-                        }
-                    };
-
-                    // grey out the legend entry
-                    series[col - 1].color = '#CCCCCC';
-                } else {
-                    // show the data series
-                    columns[col] = col;
-                    series[col - 1].color = null;
-                }
-                var view = new google.visualization.DataView(data);
-                view.setColumns(columns);
-                chart.draw(view, options);
-            }
-        }
-    }
-
 	google.charts.setOnLoadCallback(drawCharts);
 	</script>
 {% endblock %}