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>
Related
I would like to set the Min and Max date in Google timeline charts.
I have tried :
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
legend: 'none',
tooltip: {isHtml: true},
hAxis: {
minValue : new Date(2018, 11, 31),
maxValue : new Date(2020, 1, 3)
},
};
As you see, i see 2015 so it doesn't work :
Someone said in another post:
you can use options --> hAxis.minValue & hAxis.maxValue
I thought that's what I was doing. How to do?
Here is my code :
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline'],'language': 'fr'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'President' });
data.addColumn({ type: 'string', id: 'dummy bar label' });
data.addColumn({ type: 'string', role: 'tooltip' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
data.addRows([
[ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ],
[ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ],
[ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ]]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
legend: 'none',
tooltip: {isHtml: true},
hAxis: {
minValue : new Date(2018, 11, 31),
maxValue : new Date(2020, 1, 3)
},
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
options hAxis.minValue & hAxis.maxValue only work to expand the x-axis.
where hAxis.minValue is less than the earliest date in the data table,
and hAxis.maxValue is greater than the latest date in the data table.
they will not reduce the x-axis within the dates that exist in the data table.
see following working snippet...
google.charts.load('current', {
packages: ['timeline'],
language: 'fr'
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'President' });
data.addColumn({ type: 'string', id: 'dummy bar label' });
data.addColumn({ type: 'string', role: 'tooltip' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
data.addRows([
[ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ],
[ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ],
[ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ]
]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
legend: 'none',
tooltip: {isHtml: true},
hAxis: {
minValue: new Date(2010, 11, 31),
maxValue: new Date(2030, 1, 3)
}
};
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'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>
How to customize color of specific date point on data chart from Google analytics embedded API .
After I read Google Visualization API documentation I tried this code but it didn't work:
var sessionsOverMonth = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'sessions-over-month',
options: {width: '100%' ,
series: {
0: { pointShape: { type: 'star', sides: 5, dent: 0.05 }},
}
}
}
});
how to catch specific date on chart and customize it ?
settings within the series option, will affect the entire data series, or column of data
to change a specific point within a series, requires using a column role,
specifically --> style
the following working snippet shows how in the google-visualization library
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'y', {role: 'style'}],
[new Date(2017, 2, 1), 0, null],
[new Date(2017, 2, 2), 1, null],
[new Date(2017, 2, 3), 2, 'point {size: 16; shape-type: star; fill-color: #d81b60;}'],
[new Date(2017, 2, 4), 3, null],
[new Date(2017, 2, 5), 4, null],
[new Date(2017, 2, 6), 5, null]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
pointSize: 6
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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>