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>
Related
The following is my code, an example on echarts, referring to echarts.min.js, but changing to echarts.js will not display the chart, and the dom will also display。
<head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="main" style="height:600px; width:600px;background-color: aqua;"></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
I'm not sure how to change color of specific column (named 'Different color here' in example bellow) when using ComboChart? Playing with { role: 'style' } didn't gave me desired result.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart']
});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', 'Avg.'],
['1', 165, 145],
['2', 135, 145],
['Different color here', 157, 145],
['4', 139, 145],
['5', 136, 145]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title: 'TITLE',
width: 600,
height: 400,
vAxis: {
title: "AAA"
},
hAxis: {
title: "BBB"
},
seriesType: "bars",
series: {
0: {
color: "yellow"
},
1: {
type: "line",
color: "green"
},
},
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
JSFIDDLE:
http://jsfiddle.net/2emzos38/1/
the style role should follow the series for which the style should be applied.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', {role: 'style', type: 'string'}, 'Avg.'],
['1', 165, null, 145],
['2', 135, null, 145],
['Different color here', 157, 'magenta', 145],
['4', 139, null, 145],
['5', 136, null, 145]
]);
see following working snippet...
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Test', {role: 'style', type: 'string'}, 'Avg.'],
['1', 165, null, 145],
['2', 135, null, 145],
['Different color here', 157, 'magenta', 145],
['4', 139, null, 145],
['5', 136, null, 145]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title: 'TITLE',
width: 600,
height: 400,
vAxis: {
title: "AAA"
},
hAxis: {
title: "BBB"
},
seriesType: "bars",
series: {
0: {
color: "yellow"
},
1: {
type: "line",
color: "green"
},
},
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
NOTE:
the jsapi loader is out of date and should no longer be used.
instead, use loader.js,
this will only change the load and setOnLoadCallback statements.
see above snippet.
I'm new on chart.js and try to build something simple.
I've not error in the console but chart doesn't display on my web page. I have no idea where it's from.
It would be really great if somebody could help.
<!DOCTYPE>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
</head>
<body>
<div id="center"><canvas id="canvas" width="600" height="400"></canvas></div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var datas = {
labels: ["2010", "2011", "2012", "2013"],
datasets: [
{
type: "line",
data : [150,200,250,150],
color:"#878BB6",
},
{
type: "line",
data : [250,100,150,10],
color : "#4ACAB4",
}
]
}
</script>
</body>
</html>
You are not constructing the chart correctly. Here is how it should be created ...
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013"],
datasets: [{
label: 'Dataset 1',
data: [150, 200, 250, 150],
color: "#878BB6",
}, {
label: 'Dataset 2',
data: [250, 100, 150, 10],
color: "#4ACAB4",
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="center">
<canvas id="canvas" width="600" height="400"></canvas>
</div>
To learn more about ChartJS, refer to the official documentation.
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>
Using: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Loading
There isn't any options to put the y axis on the right side of the chart? For reals?! :P
Anyone know how to do such a 'radical' thing? The charting API lets you do this, but not the visualization?
Thanks SO.
You can get around this via the series option, and specifying a dummy data series for series[0]. Like so:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'xAxis');
data.addColumn('number', 'dummySeries');
data.addColumn('number', 'realSeries');
data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below
data.addRow(...iterate & add the rest of your data);
new google.visualization.LineChart(document.getElementById('graphdiv')).
draw(data, {curveType: 'function',
series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth
);
}
google.setOnLoadCallback(drawVisualization);
</script>
function singleUserChart() {
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
var dataPercentage = new google.visualization.DataTable();
dataPercentage.addColumn('string', 'Productivity');
dataPercentage.addColumn('number', 'Ravi');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addColumn('number', 'Avg Data');
dataPercentage.addColumn({ type: 'string', role: 'annotation' });
dataPercentage.addRows([
['%Score1', 12, '12%', 15, '15%'],
['%Score2', 25, '25%', 21, '21%']
]);
singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450);
}
}
function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) {
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 15,
color: '#000',
auraColor: 'none'
}
},
vAxis: { format: (isShowPercent == true) ? '#\'%\'' : '', ticks :[0,10,20,30,40,50]},
hAxis: {
slantedText: true,
slantedTextAngle: -45,
textStyle: { fontSize: 11 }
},
series: {
0: { targetAxisIndex: 0, },
1: { targetAxisIndex: 1, }
},
vAxes: {
0: { textPosition: 'none' },
1: {}
},
legend: { position: 'top' },
width: chartWidth,
height: 400
};
var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
chart.draw(chartData, options);
}
singleUserChart();
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="individualUserPercentageChart" style="height: 500px; width: 100%"></div>
</body>
</html>