I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>
After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I'm developing a Gannt graph that shows the reservations for each room in a hotel from the first booking to the last one. But I wanted to be able to apply a filter to select a date range.
Below I leave the graph I have and an example of what I wanted. Thanks in advance.
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['1', 'Room 1', 'room1',
new Date(2021, 2, 22), new Date(2021, 5, 20), null, 100, null],
['2', 'Room 2', 'room2',
new Date(2021, 5, 21), new Date(2021, 8, 20), null, 100, null],
['3', 'Room 3', 'room3',
new Date(2021, 8, 21), new Date(2021, 11, 20), null, 100, null],
['4', 'Room 4', 'room4',
new Date(2021, 11, 21), new Date(2022, 2, 21), null, 100, null],
['5', 'Room 5', 'room5',
new Date(2022, 2, 22), new Date(2022, 5, 20), null, 100, null],
['6', 'Room 6', 'room6',
new Date(2022, 5, 21), new Date(2022, 8, 20), null, 100, null],
['7', 'Room 7', 'room7',
new Date(2022, 8, 21), new Date(2022, 11, 20), null, 100, null],
['8', 'Room 8', 'room8',
new Date(2022, 11, 21), new Date(2023, 2, 21), null, 100, null],
['9', 'Room 9', 'room9',
new Date(2023, 11, 21), new Date(2024, 2, 21), null, 100, null],
]);
var options = {
height: 800,
gantt: {
trackHeight: 40,
innerGridTrack: {fill: '#fff'},
innerGridDarkTrack: {fill: '#ededed'},
shadowEnabled: true,
defaultStartDate: (new Date(2022,3,17))
},
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div"></div>
<div id="control_div"></div>
<script src="index.js"></script>
</body>
</html>
Example below. I need this type of filter to filter the interval of dates that is shown on the graph:
google.load('visualization', '1.1', {
packages: ['corechart', 'controls']
});
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {
'width': '100%'
},
'hAxis': {
'baselineColor': 'none',
format: "dd.MM.yyyy"
}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0, 3]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {
'range': {
'start': new Date(2012, 1, 9),
'end': new Date(2012, 2, 20)
}
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {
'height': '80%',
'width': '100%'
},
'hAxis': {
'slantedText': false
},
'vAxis': {
'viewWindow': {
'min': 0,
'max': 2000
}
},
'legend': {
'position': 'none'
}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4]
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
// Create random stock values, just like it works in reality.
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
var date = new Date(2012, 0, day);
data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
}
/* Change the format of the date column, used in chart, but not chart range filter */
var formatter = new google.visualization.DateFormat({
pattern: "dd.MM.yyyy"
});
formatter.format(data, 0);
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
<script src="index2.js"></script>
</body>
</html>
I want to create bar chart using google charts
Condition to create chart is like Bar should have fixed width and padding between the bars and it should be plot at center of grid lines.
I used google chart for this .
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: getValueAt.bind(undefined, 1),
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {
groupWidth: 20
},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
JsFiddle for the same
I want to create something like this.
in order to get the bars between the gridlines,
will need to use a continuous data type for the x-axis,
timeofday will work, which takes an array of either 3 or 4 numbers,
representing hours, minutes, seconds, and optionally milliseconds, respectively
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...
set the data values at the half minute mark,
then use ticks at the full minute mark...
ticks: [
[9, 0, 0],
[10, 0, 0],
...
for padding between the bars, use a percentage...
bar: {
groupWidth: '95%'
},
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
EDIT
to expand the gridlines, use option hAxis.viewWindow.min & max
and chartArea.width can extend the chart to the edges of the chart container
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
[[11, 30, 0], 57],
[[12, 30, 0], 70],
[[13, 30, 0], 80],
[[14, 30, 0], 55],
[[15, 30, 0], 45],
[[16, 30, 0], 20],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: '#cb4335',
length: 20,
},
},
bar: {
groupWidth: '95%'
},
chartArea: {
width: '100%'
},
colors: ['#cb4335'],
hAxis: {
format: 'ha',
gridlines: {
color: 'transparent'
},
ticks: [
[9, 0, 0],
[10, 0, 0],
[11, 0, 0],
[12, 0, 0],
[13, 0, 0],
[14, 0, 0],
[15, 0, 0],
[16, 0, 0],
],
viewWindow: {
min: [6, 0, 0],
max: [20, 0, 0]
}
},
height: 400,
legend: {position: 'none'},
tooltip: {trigger: 'none'},
vAxis: {
textStyle: {
color: 'transparent'
}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
I'm using Google Charts' Annotation Chart to display data. Everything's working but it's not showing the volume section, as seen in this google finance chart that, I believe, uses the same chart.
Here's what I have so far, but I don't know how to include that section:
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
This is what the google finance chart looks like, but I can't seem to include the volume section marked in red:
the annotation chart does not include an option for the middle chart / volume section
this could be added manually by drawing another, separate chart
however, the second chart cannot be placed in between the annotation chart and it's range filter
as such, you would need to turn off the annotation's range filter
and draw your own ChartRangeFilter
typically, custom filters are bound to charts using a dashboard
however, while building the example for this answer,
i noticed the annotation chart doesn't re-draw properly
after the filter has been applied, and then removed,
the annotation chart does not return to the original state
to correct, need to create the annotation chart every time it is drawn
see following working snippet,
a column chart is used for the volume section
the range filter is bound manually using the 'statechange' event
google.charts.load('current', {
callback: drawDashboard,
packages: ['annotationchart', 'controls', 'corechart']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
dataTable: data,
options: {
filterColumnLabel: 'Date',
ui: {
chartOptions: {
height: 60,
width: '100%',
chartArea: {
width: '100%'
},
chartType: 'AreaChart'
}
}
},
view: {
columns: [0, 1, 4]
}
});
google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);
rangeFilter.draw();
function drawCharts() {
var filterState = rangeFilter.getState();
var filterRows = data.getFilteredRows([{
column: 0,
minValue: filterState.range.start,
maxValue: filterState.range.end
}]);
var viewAnn = new google.visualization.DataView(data);
viewAnn.setRows(filterRows);
var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
var optionsAnn = {
displayAnnotations: false,
displayRangeSelector: false
};
chartAnn.draw(viewAnn, optionsAnn);
var viewCol = new google.visualization.DataView(data);
viewCol.setColumns([0, 1, 4]);
viewCol.setRows(filterRows);
var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
var optionsCol = {
hAxis: {
textStyle: {
color: 'transparent'
}
},
height: 72,
legend: 'none',
theme: 'maximized',
vAxis: {
textStyle: {
color: 'transparent'
}
}
};
chartCol.draw(viewCol, optionsCol);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_ann"></div>
<div id="chart_col"></div>
<div id="control_div"></div>
I have a problem with google charts.
How to make padding between horizontal axil line and labels. And align them differently (first to right, last - to left) - so, they will be inside chart area
How can i remove vertical axis at the end of the chart and leave only zero axis.
code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(this.drawBasic);
function drawBasic () {
let data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'K/D');
data1.addRows([
[new Date(2016, 11, 11), 0], [new Date(2016, 11, 12), 10], [new Date(2016, 11, 13), 43], [new Date(2016, 11, 14), 20], [new Date(2016, 11, 15), 56],]);
let options1 = {
height: 125,
chartArea: {
left: 30,
top: 10,
right: 30,
bottom: 20
},
legend: {position: 'none'},
colors: ['#3ec8de'],
tooltip: {trigger: 'none'},
backgroundColor: 'transparent',
hAxis: {
format: 'dd.M',
gridlines: {
color: '#333',
},
ticks: [new Date(2016, 11, 11), new Date(2016, 11, 15)]
},
vAxis: {
gridlines: {
count: 3,
color: 'transparent',
}
},
crosshair: {trigger: 'both', orientation: 'vertical', color: '#b5b5b5'}
};
let chart1 = new google.visualization.LineChart(document.getElementById('overtime-chart1'));
chart1.draw(data1, options1);
}
Here the picture.
And this is link to codepen with code
I am trying to figure out how to add a trendline to my google line chart but am failing miserably. Is anyone able to point me in the right direction? I have seen that google do not provide a way to do this on a line chart but have also seen that it is possible to add a new series into the chart to achieve something similar. Here is what I have so far which works great besides not having a trendline. I have tried a few suggestions I found online but none of them made the maths clear to get the trendline to be a straight line:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('string', Date);
data.addColumn('number', 'Sales Value');
data.addRow(['Apr 2013', 271176.940000000]);
data.addRow(['May 2013', 419031.540000000]);
data.addRow(['Jun 2013', 429155.540000000]);
data.addRow(['Jul 2013', 443780.400000000]);
data.addRow(['Aug 2013', 320353.540000000]);
data.addRow(['Sep 2013', 310640.910000000]);
data.addRow(['Oct 2013', 252187.700000000]);
data.addRow(['Nov 2013', 301414.560000000]);
data.addRow(['Dec 2013', 224296.850000000]);
data.addRow(['Jan 2014', 291131.140000000]);
data.addRow(['Feb 2014', 354750.680000000]);
data.addRow(['Mar 2014', 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
{
color: 'green',
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
EDIT:
I have now attempted to put the code in suggested to me but it still shows no trendline:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 4, 1), 184656.440000000]);
data.addRow([new Date(2013, 5, 1), 420286.250000000]);
data.addRow([new Date(2013, 6, 1), 431562.840000000]);
data.addRow([new Date(2013, 7, 1), 446187.800000000]);
data.addRow([new Date(2013, 8, 1), 320353.540000000]);
data.addRow([new Date(2013, 9, 1), 313364.960000000]);
data.addRow([new Date(2013, 10, 1), 252187.700000000]);
data.addRow([new Date(2013, 11, 1), 303874.560000000]);
data.addRow([new Date(2013, 12, 1), 224296.850000000]);
data.addRow([new Date(2014, 1, 1), 297499.970000000]);
data.addRow([new Date(2014, 2, 1), 354950.680000000]);
data.addRow([new Date(2014, 3, 1), 315529.610000000]);
data.addRow([new Date(2014, 4, 1), 145219.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 320;
var chartWidth = 400;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: Test Name',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy',
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 8),
height: (chartHeight - 72)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
First, as #mcgyver5 pointed out, trendlines are not supported for discrete (string-based) axes. Since your data is monthly, you can switch to a Date axis instead of a string axis, which would fix that issue. Also, your trendlines option is not specified correctly.
Here's an example that fixes both issues:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 3, 1), 271176.940000000]);
data.addRow([new Date(2013, 4, 1), 419031.540000000]);
data.addRow([new Date(2013, 5, 1), 429155.540000000]);
data.addRow([new Date(2013, 6, 1), 443780.400000000]);
data.addRow([new Date(2013, 7, 1), 320353.540000000]);
data.addRow([new Date(2013, 8, 1), 310640.910000000]);
data.addRow([new Date(2013, 9, 1), 252187.700000000]);
data.addRow([new Date(2013, 10, 1), 301414.560000000]);
data.addRow([new Date(2013, 11, 1), 224296.850000000]);
data.addRow([new Date(2014, 0, 1), 291131.140000000]);
data.addRow([new Date(2014, 1, 1), 354750.680000000]);
data.addRow([new Date(2014, 2, 1), 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
}
see it working here: http://jsfiddle.net/asgallant/j8N48/
check it out: Google charts trendline not showing
that says your first column cannot be a string because it is not a continuous domain axis.