Is there any way to make the AreaChart use/be styled with Material Design "theme"?
Here's the snippet for the chart:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(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" style="width: 100%; height: 500px;"></div>
recommend using config option --> theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
theme: 'material'
};
var chart = new google.visualization.AreaChart(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" style="width: 100%; height: 500px;"></div>
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>
Does anyone know how to format the vAxis to percent? I've tried so many things, to no avail. Code is below. I've tried NumberFormatter vAxis options...
Thanks!
Chelsea
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
series: {
vAxis: {format: "###'%'"},
}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
vAxis should not be defined within series
it should at the first level within options
var options = {
vAxis: {format: "#,##0%"}
...
as for the format string,
adding % to the end, will convert the number to a percentage
see following working snippet...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
vAxis: {format: "#,##0%"}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Set to show only the 100 and -100 grids ticks: [-100, 100], but the horizontal 0 (zero) grid appears. How to hide?
<table class="columns">
<tr>
<th>Linear Scale</th>
</tr>
<tr>
<td><div id="linear_div"></div></td>
</tr>
</table>
<script>
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Population');
data.addRows([
[new Date(1400, 1, 1), -44],
[new Date(1500, 1, 1), 33],
[new Date(1600, 1, 1), 88],
[new Date(1700, 1, 1), 100],
[new Date(1750, 1, 1), 200],
]);
var linearOptions = {
title: 'World Population Since 1400 A.D. in Linear Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
ticks: [-100, 100]
}
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
</script>
https://jsfiddle.net/dnsaudd8/
use following option to hide 0 (baseline)
baselineColor: 'transparent'
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Population');
data.addRows([
[new Date(1400, 1, 1), -44],
[new Date(1500, 1, 1), 33],
[new Date(1600, 1, 1), 88],
[new Date(1700, 1, 1), 100],
[new Date(1750, 1, 1), 200]
]);
var linearOptions = {
baselineColor: 'transparent',
title: 'World Population Since 1400 A.D. in Linear Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
ticks: [-100, 100]
}
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linear_div"></div>
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>
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