I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
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},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
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});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/
Just add more columns of your data:
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), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle
Related
I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
i have faced the problem while creating triple y-axis in google charts .
The problem is space between right side axis. could you please help me.
i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2},
3: {targetAxisIndex: 3}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'},
2: {title: 'third'},
3: {title: 'foruth'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div"></div>
i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this
if you must have three, try textPosition
have one 'in' and the other 'out'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
chartArea: {
width: '50%'
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2}
},
vAxes: {
0: {
textPosition: 'out',
title: 'Temps (Celsius)'
},
1: {
textPosition: 'in',
title: 'Daylight',
viewWindow: {
max: 30
}
},
2: {
textPosition: 'out',
title: 'third',
viewWindow: {
max: 40
}
}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to remove labels(c1,c2,c3,c4) from my bars.
I tried styling with:
timeline: {barLabelStyle: ...}
but nothing works for me (I thought about set font color to color of bar, but docs says ,,You can't set the color of barLabel text."
jsfiddle: https://jsfiddle.net/550wb2t0/1/
You can use --> timeline: { showBarLabels: false }
google.charts.load('44', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Category', 'Start Time', 'End Time'],
['Sleep', 'c1',
new Date(2014, 10, 15, 12, 30, 0, 120),
new Date(2014, 10, 15, 14, 30, 20, 550)
],
['Eat Breakfast', 'c2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['Commute Home', 'c3',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['Commute Home', 'c4',
new Date(2014, 10, 15, 14, 30),
new Date(2014, 10, 15, 18)
]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
c1: '#e63b6f',
c2: '#19c362',
c3: '#592df7',
c4: '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
console.log(JSON.stringify(colors));
var options = {
height: 450,
colors: colors,
timeline: { showBarLabels: false }
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to load three different google charts on page, one gauge, one line and one bar chart. But something fails when i try to implement the third chart. Sometimes the gauge chart and the line chart loads but not the bar chart, other times only the gauge and the bar chart loads. I cant get all three to load at the same time. Can i please get some help?
Here is my code:
<html>
<head>
<title>Usage statistic</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
function init() {
drawLine();
drawBar();
drawGauge();
}
function drawGauge() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Month', 73.6],
['Today', 62.7],
['Week', 73.6],
]);
var options = {
width: 800,
height: 240,
greenFrom: 40,
greenTo: 100,
redFrom: 0,
redTo: 20,
yellowFrom: 20,
yellowTo: 40,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
chart.draw(data, options);
}
function drawLine() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Logins');
data.addRows([
[new Date(2015, 10, 16), 1971],
[new Date(2015, 10, 17), 1973],
[new Date(2015, 10, 18), 1964],
[new Date(2015, 10, 19), 1981],
[new Date(2015, 10, 20), 1919],
[new Date(2015, 10, 21), 1185],
[new Date(2015, 10, 22), 1104],
[new Date(2015, 10, 23), 2009],
[new Date(2015, 10, 24), 1955],
[new Date(2015, 10, 25), 1933],
[new Date(2015, 10, 26), 1923],
[new Date(2015, 10, 27), 1854],
[new Date(2015, 10, 28), 1159],
[new Date(2015, 10, 29), 1107],
[new Date(2015, 10, 30), 2006],
[new Date(2015, 11, 01), 1998],
[new Date(2015, 11, 02), 1951],
[new Date(2015, 11, 03), 1921],
[new Date(2015, 11, 04), 1870],
[new Date(2015, 11, 05), 1174],
[new Date(2015, 11, 06), 1128],
[new Date(2015, 11, 07), 2030],
[new Date(2015, 11, 08), 1912],
[new Date(2015, 11, 09), 1956],
[new Date(2015, 11, 10), 1942],
[new Date(2015, 11, 11), 1895],
[new Date(2015, 11, 12), 1168],
[new Date(2015, 11, 13), 1148],
[new Date(2015, 11, 14), 2004],
[new Date(2015, 11, 15), 1954],
]);
var options = {
title: 'Logins',
width: 800,
height: 400,
hAxis: {
format: 'MMM d, y',
gridlines: {
count: 15
}
},
vAxis: {
gridlines: {
color: 'none'
},
minValue: 0
}
};
var chart = new google.charts.Line(document.getElementById('line_div'));
chart.draw(data, options);
}
function drawBar() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
[
[8, 30, 45], 5
],
[
[9, 0, 0], 10
],
[
[10, 0, 0, 0], 12
],
[
[10, 45, 0, 0], 13
],
[
[11, 0, 0, 0], 15
],
[
[12, 15, 45, 0], 20
],
[
[13, 0, 0, 0], 22
],
[
[14, 30, 0, 0], 25
],
[
[15, 12, 0, 0], 30
],
[
[16, 45, 0], 32
],
[
[16, 59, 0], 42
]
]);
var options = google.charts.Bar.convertOptions({
title: 'Total Emails Received Throughout the Day',
width: 800,
height: 400
});
var chart = new google.charts.Bar(document.getElementById('bar_div'));
chart.draw(data, options);
}
</script>
<style>
.menu {
border-radius: 5px;
border: 1px solid black;
float: left;
padding: 0px 6px;
margin-right: 6px;
color: #686868;
}
.menu a {
text-decoration: none;
color: #686868;
}
.active a {
color: black !important;
}
</style>
</head>
<body style="background-color: #F0F0F0; margin: 20px;">
<div>
<h2>Logins in percentages</h2>
</div>
<div id="gauge_div"></div>
<div>
<h2>Logins last 30 days</h2>
</div>
<div id="line_div"></div>
<div>
<h2>Emails Received</h2>
</div>
<div id="bar_div"></div>
</body>
</html>
I can't really answer why, but if you look at the documentation for loading libraries link, you see that they have updated how it's done. And it's quite differente from before.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
would have to be changed to
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart", "gauge", "line", "bar"]});
google.charts.setOnLoadCallback(init);
....
</script>
It looks like everything is still working in my applications, with the old loading style, but trying your scenario didn't work at all with the old style. Changeing it to the new one works.
Jsfiddle
EDIT:
If anyone is interested I found out why my things are working. I'm working exclusively with Wrappers, and apparantly you should use google.load (the old way) and not the new google.charts.load.
Source
I need to set custom month names in Charts.
How set custom month names in Google Charts API?
You can specify custom ticks on the hAxis...
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[new Date(2015, 1, 1), 5, 'January'],
[new Date(2015, 2, 1), 7, 'February'],
[new Date(2015, 3, 1), 3, 'March'],
[new Date(2015, 4, 1), 2, 'April'],
[new Date(2015, 5, 1), 2, 'May']
]);
var options = {
width: 900,
height: 500,
hAxis: {
format: 'MMM',
gridlines: {count: 5},
ticks: [
{v: new Date(2015, 1, 1), f:'custom 1'},
{v: new Date(2015, 2, 1), f:'custom 2'},
{v: new Date(2015, 3, 1), f:'custom 3'},
{v: new Date(2015, 4, 1), f:'custom 4'},
{v: new Date(2015, 5, 1), f:'custom 5'}
]
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>