Google charts text padding and hide axis lines

Google charts text padding and hide axis lines - javascript

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

Related

How can I render a ColumnChart slider

I'm here because I'm in struggle with some sliders for my dataviz app.
I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... :
Here is the working code :
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 28), 32],
//there is very much lines here but for simplicity i removed them
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
colors: ['#f6c7b6']
}}
rootProps={{ "data-testid": "0" }}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
colors: ['green'],
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 1, 1),
end: new Date(2000, 4, 6),
},
},
},
},
]}
/>
Here is the result : Here is the result
Now I want the same data but with ColumnChart,
I did that :
<Chart
width={"100%"}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
// vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
But when I uncomment the code of time slider, i have a weird result :
weirdResult
What I missing ? how can i have the same kind of slider with ColumnChart ?
Thanks for any helps !
I'm working with React and React google Chart which is a wrapper for Google Chart

as noted in the reference for the ChartRangeFilter,
ColumnChart is not a valid chart type (see option --> ui.chartType)
try using ComboChart instead,
and set the seriesType chart option to bars
see following snippet...
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ComboChart", // <-- use ComboChart
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
seriesType: "bars", // <-- set series type
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}

Multi-colored line chart with google visualization

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>

Google Charts fractionDigits

I have a problem. Im relatively new to Javascript but I am working on a project where people want to have charts about their improvements. I have sucessfuly made 2 charts, while I do have problems for the 3rd one. The numbers consist of 0.000yyyyy when y stands for random numbers, and when you hover the chart, info shows 0. I put fractionDigits in options, but cant get them to work right.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}

to format the number in the tooltip, use NumberFormat, after data is built
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15), 0.000125],
[new Date(2015 , 04 , 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875]
]);
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: 'transparent',
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
before styling annotations, you must include an annotation column
use a DataView to add the column using a function to "stringify" the series column
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015, 03, 15), 0.000125],
[new Date(2015, 04, 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
[new Date(2015, 05, 22), 0.000126211199625],
[new Date(2015, 06, 07), 0.000127017994375],
[new Date(2015, 06, 08), 0.000127487763],
[new Date(2015, 06, 09), 0.000128022515125],
[new Date(2015, 06, 10), 0.00012886722975],
[new Date(2015, 06, 11), 0.00012921927025],
]);
// add annotation column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#876c3c',
strokeWidth:3
},
textStyle: {
color: '#876c3c'
}
},
backgroundColor: "transparent",
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
// use data view to draw chart
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charta_div"></div>

Uncaught TypeError: google.visualization.LineChart [duplicate]

This question already has an answer here:
Google Visualization Display Issue
(1 answer)
Closed 6 years ago.
Hi i'm getting Uncaught TypeError: google.visualization.LineChart in my console.
My code was working before today.
This is my full code of 2 google line chart:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Muli:400,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>//<![CDATA[
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChart2);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Month');
data.addColumn('number', "Total Donation Ratio");
data.addColumn('number', "Total Trophies");
data.addRows([
[new Date(2016, 1, 28, 1, 45), 0.4815, 48592],
[new Date(2016, 1, 28, 15, 01), 0.4963, 48693],
[new Date(2016, 1, 28, 16, 02), 0.4963, 48711],
[new Date(2016, 1, 28, 16, 02), 0.4963, 48711]
]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);
var classicOptions = {
crosshair: { trigger: 'both' },
title: 'Total Donation Ratio and Total Trophies',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli'
},
height: 450,
series: {
0: { //Donation
targetAxisIndex: 0,
pointSize: 5,
lineWidth: 5,
curveType: 'function'
},
1: { //Trophies
targetAxisIndex: 1,
pointSize: 3,
lineWidth: 4,
curveType: 'function',
color: '#b8860b'
}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Donation Ratio'},
1: {title: 'Trophies'}
},
hAxis: {
title: 'Timeline (GMT +8)',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 18,
italic: false
}
},
vAxis: {
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 20,
italic: true,
bold: true
}
}
};
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
}
// CHART 2
function drawChart2() {
var chartDiv2 = document.getElementById('chart_div2');
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Month');
data.addColumn('number', "Troops Donated");
data.addColumn({type: 'number', role:'annotation'});
data.addRows([
[new Date(2016, 1, 27, 16, 45), 73, 73],
[new Date(2016, 1, 27, 17, 15), 7, 7],
[new Date(2016, 1, 27, 18, 15), 60, 60],
[new Date(2016, 1, 27, 18, 45), 50, 50],
[new Date(2016, 1, 27, 20, 15), 56, 56],
[new Date(2016, 1, 27, 20, 45), 90, 90],
[new Date(2016, 1, 27, 21, 15), 20, 20],
[new Date(2016, 1, 27, 22, 15), 76, 76],
[new Date(2016, 1, 27, 22, 45), 10, 10],
[new Date(2016, 1, 27, 23, 15), 45, 45],
[new Date(2016, 1, 27, 23, 45), 6, 6],
[new Date(2016, 1, 28, 1, 45), 61, 61],
[new Date(2016, 1, 28, 15, 01), 652, 652],
]);
var formatter = new google.visualization.DateFormat({pattern: 'd MMM, yyyy, hh:mm a'});
formatter.format(data,0);
var classicOptions = {
//backgroundColor: '#f7f7f7',
legend: { position: 'top', alignment: 'start' },
title: 'Troops Donated in the Last 24 Hours',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli'
},
height: 250,
series: {
0: {
pointSize: 8,
lineWidth: 3,
curveType: 'function',
color: '#001f3f'
}
},
vAxes: {
0: {title: 'Troops Donated'},
},
hAxis: {
title: 'Timeline (GMT +8)',
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 18,
italic: false
}
},
vAxis: {
viewWindow: {
min: [0]
},
textStyle: {
fontName: 'Muli'
},
titleTextStyle: {
fontName: 'Muli',
fontSize: 20,
italic: true,
bold: true
}
}
};
var classicChart2 = new google.visualization.LineChart(chartDiv2);
classicChart2.draw(data, classicOptions);
}
//]]>
</script>
</head>
<body>
<div id="chart_div2"></div>
<div id="chart_div"></div>
</body>
And here is my fiddler https://jsfiddle.net/4nsas23k/
I followed the examples from google charts documentation. Any idea what is wrong?

Just found out they had an update...
It appears that when we push out a new version, there are some hiccups
in the system until the changes fully propagate. We will be working to
fix this in the future, but for now, if you get these kinds of errors,
I suggest you refresh the page, flushing your cache if necessary. You
can also change 'current' to '43' or '44' and it will work more
reliably.
Changing it to 44 google.charts.load('44', worked for me!
Thanks to https://stackoverflow.com/a/35661581/1700554

Trendline On Google Line Chart

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.

Develop Reference

JavaScript is the programming language of the Web.

Google charts text padding and hide axis lines - javascript

Related

How can I render a ColumnChart slider

Multi-colored line chart with google visualization

Google Charts fractionDigits

Uncaught TypeError: google.visualization.LineChart [duplicate]

Trendline On Google Line Chart

Categories

Resources