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>
Related
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>
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>
Would like to remove the coloraxis legend on a Google calendar chart. The color axis sits at the top right of the chart. My chart is trying to illustrate dates of activity for Kansas amphibians and reptiles and the type of activity (calling vs not) for frogs and toads. The coloraxis as displayed is uninformative... however another solution would be to change the coloraxis label to a text label (e.g. calling, other active).
Example at http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=30&t=3
<script type="text/javascript">
google.charts.load("current", { packages: ["calendar"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Activity' });
dataTable.addRows([
[new Date(2012, 4, 3), 1],
[new Date(2012, 4, 16), -1],
[new Date(2012, 5, 6), -1],
// many rows removed
[new Date(2012, 7, 15), 1],
[new Date(2012, 7, 25), -2],
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
legend: 'none',
title: '',
calendar: {
daysOfWeek: '',
yearLabel: {
fontName: 'Times-Roman',
fontSize: 1,
color: '#000000',
bold: false,
italic: false
},
}
};
chart.draw(dataTable, options);
}
drawChart();
</script>
I wanted to remove the entire legend, and working with WhiteHat's answer I tweaked it to this. Basically I tried to find the relevant attributes that only affected the legend and hid them:
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).hide();
$($('#calendar_basic text')[1]).hide();
$($('#calendar_basic text')[2]).hide();
$('#calendar_basic linearGradient').hide();
$('#calendar_basic')
.find('[fill-opacity="1"]').hide();
});
no standard options exist for removing the legend or even changing the text
however, once the chart's 'ready' event fires,
you can change manually...
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).text('Calling');
$($('#calendar_basic text')[1]).text('');
$($('#calendar_basic text')[2]).text('Other');
});
see following working snippet...
google.charts.load('current', {
callback: function () {
$(window).resize(drawChart);
drawChart();
},
packages: ["calendar"]
});
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Activity' });
dataTable.addRows([
[new Date(2012, 4, 3), 1],
[new Date(2012, 4, 16), -1],
[new Date(2012, 5, 6), -1],
[new Date(2012, 7, 15), 1],
[new Date(2012, 7, 25), -2],
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
legend: 'none',
title: '',
calendar: {
daysOfWeek: '',
yearLabel: {
fontName: 'Times-Roman',
fontSize: 1,
color: '#000000',
bold: false,
italic: false
},
}
};
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).text('Calling');
$($('#calendar_basic text')[1]).text('');
$($('#calendar_basic text')[2]).text('Other');
});
chart.draw(dataTable, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></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
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