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>
Related
I am trying to make the background transparent for countries which don't have any data for tooltip but I can't find anything helpful in documentation.
Where do I need to set up the color attribute or is even possible to change the color ?
var options = {
sizeAxis: {
minValue: 0,
maxSize: 100
},
colorAxis: {
colors: ['#8a4cab', '#8a4cab']
},
legend: 'none',
backgroundColor: 'transparent',
keepAspectRatio: true,
tooltip: {
isHtml: true
}
};
This is how is looking now: https://imgur.com/XRl7F8Z
use option --> datalessRegionColor
e.g.
datalessRegionColor: 'transparent'
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'value'],
['United States', 1],
['Canada', 1],
]);
var options = {
sizeAxis: {
minValue: 0,
maxSize: 100
},
colorAxis: {
colors: ['#8a4cab', '#8a4cab']
},
legend: 'none',
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
keepAspectRatio: true,
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
background-color: #000000;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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!
I am just starting with using google charts. I have a question. I would like to add data labels to my columns, in fact I have succeeded in this. However, I would like to add a suffix to these labels (percentages %). I have tried to use NumberFormat, but then no chart appears. What am I doing wrong?
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
google.load('visualization', '1', { 'packages': ['corechart'] } );
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Kenmerk', 'Belangrijkheid', { role: 'style' } ],
['Uitstellen', 10, 'color: gray'],
['bijwerkingen', 20, 'color: yellow'],
['behandelingen', 30, 'color: red'],
['Schema', 40, 'color: blue']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
// Set chart options
var options = {
width: 800,
height: 600,
title: 'Uitslag',
vAxis: { title: 'belangrijkheid van elk kenmerk in percentages uitgedrukt', format: '#\'%\'', maxValue: '100', minValue: '0'},
legend: { position: 'none'},
bar: { groupWidth: '75%' },
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script></p>
<div id="columnchart_values" style="width: 800px; height: 600px;">
</div>
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