Switched to Google Material design line charts.

This commit is contained in:
James Cole
2015-03-15 08:38:12 +01:00
parent 6c1e093ebd
commit 8b4f656d90
2 changed files with 12 additions and 23 deletions

View File

@@ -1,5 +1,5 @@
var google = google || {};
google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'sankey', 'table']});
google.load('visualization', '1.1', {'packages': ['corechart', 'bar','line', 'sankey', 'table']});
function googleChart(chartType, URL, container, options) {
if ($('#' + container).length === 1) {
@@ -26,13 +26,16 @@ function googleChart(chartType, URL, container, options) {
*/
var chart = false
var options = false;
var isMaterialDesign = false;
if (chartType === 'line') {
chart = new google.visualization.LineChart(document.getElementById(container));
chart = new google.charts.Line(document.getElementById(container));
options = options || defaultLineChartOptions;
isMaterialDesign = true;
}
if (chartType === 'column') {
chart = new google.charts.Bar(document.getElementById(container));
options = options || defaultColumnChartOptions;
isMaterialDesign = true;
}
if (chartType === 'pie') {
chart = new google.visualization.PieChart(document.getElementById(container));
@@ -41,6 +44,7 @@ function googleChart(chartType, URL, container, options) {
if (chartType === 'bar') {
chart = new google.charts.Bar(document.getElementById(container));
options = options || defaultBarChartOptions;
isMaterialDesign = true;
}
if (chartType === 'stackedColumn') {
chart = new google.visualization.ColumnChart(document.getElementById(container));
@@ -54,7 +58,12 @@ function googleChart(chartType, URL, container, options) {
if (chart === false) {
alert('Cannot draw chart of type "' + chartType + '".');
} else {
chart.draw(gdata, options);
if(isMaterialDesign && chartType == 'line') {
chart.draw(gdata, google.charts.Line.convertOptions(options));
} else {
chart.draw(gdata, options);
}
}
}).fail(function () {

View File

@@ -12,26 +12,6 @@ var defaultLineChartOptions = {
height: '80%'
},
height: 400,
colors: ["#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
hAxis: {
textStyle: {
color: '#838383',
fontName: 'Roboto2',
fontSize: '12'
},
gridlines: {
color: 'transparent'
}
},
vAxis: {
textStyle: {
color: '#838383',
fontName: 'Roboto2',
fontSize: '12'
},
format: '\u20AC #'
}
};