I am trying to add annotations to a bar chart but it doesn't work. When I use the package 'corechart' it works but I want to use the package 'bar'. This is my code :
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Hour');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'annotation'})
data.addRows([
[[00, 00], 200, 'one'],
[[01, 00], 230, 'two'],
[[02, 00], 400, 'three'],
]);
var options = {
hAxis: {
title: 'Hour',
format: 'hh:mm',
},
vAxis: {
title: 'Value'
},
backgroundColor: '#e3f2fd',
legend: 'none',
height: 450,
width: 3000,
colors: ['#00ACC1'],
alwaysOutside: true,
textStyle: {
fontSize: 17,
auraColor: 'none',
color: '#FFFFFF'
} ,
};
var chart = new
google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
Everything works perfectly, just the annotations are missing.
Thank you!
Related
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I am new to google charts, trying to make calendar chart.
I am using this :
`google.charts.load('current', {'packages':['calendar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date' , 'date');
dataTable.addColumn('number', 'num');
dataTable.addColumn({ type: 'string', role:'tooltip'});
dataTable.addRows([
[ new Date(2017, 11, 20), 150,'Hello'],
[ new Date(2017, 11, 21), 130,'Hello']
]);
var chart = new google.visualization.Calendar(document.getElementById('tooltip_action'));
var options = {
title: "Calendar Chart",
colors: ['#e0440e'],
height: 350
};
chart.draw(dataTable, options);
`
It is working fine. But when I move cursor to 20/12/2017 and 21/12/2017 it is showing 'Hello' in very small text and small size.
And when I move cursor to other dates it is showing in bigger.
I want to change height and width of this text.
How to change properties of this tooltip text ???
you can use html tooltips, then use a css class to style them
set the following option...
tooltip: {
isHtml: true
}
and column property --> p: {html: true}
dataTable.addColumn({ type: 'string', role:'tooltip', p: {html: true}});
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date' , 'date');
dataTable.addColumn('number', 'num');
dataTable.addColumn({ type: 'string', role:'tooltip', p: {html: true}});
dataTable.addRows([
[ new Date(2017, 11, 20), 150,'<div class="tooltip">Hello</div>'],
[ new Date(2017, 11, 21), 130,'<div class="tooltip">Hello</div>']
]);
var chart = new google.visualization.Calendar(document.getElementById('tooltip_action'));
var options = {
title: "Calendar Chart",
colors: ['#e0440e'],
height: 350,
tooltip: {
isHtml: true
}
};
chart.draw(dataTable, options);
});
body {
overflow: auto;
}
#tooltip_action {
width: 1000px;
}
.tooltip {
font-size: 24px;
padding: 12px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="tooltip_action"></div>
Google Charts focusTarget: 'category' works when I draw the chart in one way but not in the other one.
In the example below, the BAR I has a broken tooltip (not triggering the way intended) and it's working perfectly fine with the BAR II
google.charts.load('current', {
'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// _____ BAR I ______
var data = google.visualization.arrayToDataTable([
['Form', 'Visitors', 'Starters', 'Conversions'],
['Form 1', 1000, 650, 490],
['Form 2', 485, 460, 350],
['Form 3', 335, 250, 105]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
focusTarget: 'category',
},
focusTarget: 'category',
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
// ______ BAR II ______
var data = google.visualization.arrayToDataTable([
['Form', 'Visitors', 'Starters', 'Conversions'],
['Form 1', 1000, 650, 490],
['Form 2', 485, 460, 350],
['Form 3', 335, 250, 105]
]);
var options = {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: {
isHtml: true
}
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('columnchart_material_2')).draw(data, options);
}
Please also take a look at this JSFiddle of the problem.
Besides different tooltip behavior, the charts also look rather different, what is the cause?
one is considered a Classic chart, the other Material
Classic --> google.visualization.ColumnChart -- requires package: 'corechart'
Material --> google.charts.Bar -- requires package: 'bar'
Material charts are newer, but also do not support several options...
see --> Tracking Issue for Material Chart Feature Parity
which includes...
focusTarget
there is an option for Classic charts, to style them similar to Material
theme: 'material'
Here is the codepen link for using google charts
google.charts.load('visualization', '1', {
'packages': ['corechart'],
"callback": drawChart
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Year", "Relevance", {
role: "style"
}],
["Forward ref..", 108, "#25C16F"],
["Case ref..", 20, "#25C16F"],
["Approved", 30, "#25C16F"],
["Disapproved", 50, "#25C16F"],
["Distinguish", 25.67, "#25C16F"],
["Followed", 28.9, "color: #25C16F"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Case Relevance",
width: 350,
height: 300,
bar: {
groupWidth: "50%",
},
hAxis: {
title: 'Relevance',
viewWindow: {
min: 0,
max: 120
},
ticks: [0, 30, 60, 90, 120] // display labels every 25
},
legend: {
position: "none"
},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(vieenter code herew, options);
google.visualization.events.addListener(chart, 'select', function() {
var row = chart.getSelection()[0].row;
if (row == 0) {
$("#right_panel h2").children(".small-font").html("Forward Reference in");
} else if (row == 1) {
$("#right_panel h2").children(".small-font").html("Case Reference");
} else if (row == 2) {
$("#right_panel h2").children(".small-font").html("Approved");
} else if (row == 3) {
$("#right_panel h2").children(".small-font").html("Disapproved");
} else if (row == 4) {
$("#right_panel h2").children(".small-font").html("Distinguish");
} else if (row == 5) {
$("#right_panel h2").children(".small-font").html("Followed");
}
});
}
});
https://codepen.io/shray04/pen/Poogmjq?editors=1000
When using Google charts, usually you can change the colors of individual columns by using the "role: style" function, but when I attempt it with the new material design charts I only get blue columns.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['', '', { role: 'style' } ],
["Strongly disagree", 0, 'color: black'],
["Disagree", 0, 'color: #000000'],
["Neutral", 6, 'color: #212121'],
["Agree", 45, 'color: #212121'],
['Stongly agree', 98, 'color: black']
]);
var options = {
title: 'Instructor presented the subject matter clearly',
width: 900,
legend: { position: 'none' },
chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
axes: {
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You can try with netx code:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawColColors);
function drawColColors() {
var data = new google.visualization.arrayToDataTable([
['', '', { role: 'style' } ],
["Strongly disagree", 12, 'brown'],
["Disagree", 30, 'gray'],
["Neutral", 26, 'blue'],
["Agree", 45, 'color: #F05921'],
['Stongly agree', 58, 'black']
]);
var options = {
title: 'Instructor presented the subject matter clearly',
width: 900,
legend: { position: 'none' },
chart: { subtitle: 'General physics 221 CSUSB winter 2017' },
axes: {
},
bar: { groupWidth: "90%" }
};
//var chart = new google.charts.Bar(document.getElementById('chart_div'));
// Convert the Classic options to Material options.
//chart.draw(data, google.charts.Bar.convertOptions(options));
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
My google bar chart options variable is:
var Baroptions = {
legend: {position: 'none'},
hAxis: {
textPosition: 'none',
gridlines: {
color: "#FFFFFF"
},
baselineColor: '#FFFFFF'
},
bars: 'horizontal',
animation:{
duration: 500,
easing: 'out',
}
};
But axis line and text are still being displayed.
I need to remove that 0 and 50k text.
Regards
instead of --> textPosition: 'none'
try...
textStyle: {
color: "#FFFFFF"
},
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var chart = new google.charts.Bar(document.getElementById('chart_div'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addRows([
['18-25', 25],
['26-35', 46],
['36-45', 30],
['46-55', 10],
['55 Above', 7]
]);
var Baroptions = {
legend: {position: 'none'},
hAxis: {
textStyle: {
color: "#FFFFFF"
},
gridlines: {
color: "#FFFFFF"
},
baselineColor: '#FFFFFF'
},
bars: 'horizontal'
};
chart.draw(dataTable, google.charts.Bar.convertOptions(Baroptions));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
also, not sure from the question, but if using a material chart as in the above example
animation.* is among the several options that don't work on material charts