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>
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 trying to create a dual axis stacked column Chart using Google's Classic Charts.
just like the Google's Material charts.
but there seems in classic one, the new stacks gets render over the previous one.
check the code below: Switch in between classic and material, you will find the difference.
Why classic? As it support tooltip modification unlike Material Chart.
Is it possible to have all stacks adjacent to the previous stack in classic chart?
google.charts.load('current', {
'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness', 'Contrast', {
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
}],
['Canis Major Dwarf', 8000, 23.3, 2.8, 'Irregular galaxy'],
['Sagittarius Dwarf', 24000, 3.5, 6.6, '5,000 ly'],
['Ursa Major II Dwarf', 30000, 14.3, 10.67, 'Half-light radius'],
['Lg. Magellanic Cloud', 50000, 0.9, 3.6, null],
['Bootes I', 60000, 13.1, 10.23, null]
]);
var materialOptions = {
width: 900,
isStacked: true,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
series: {
0: {
axis: 'distance'
}, // Bind series 0 to an axis named 'distance'.
1: {
axis: 'brightness'
}, // Bind series 1 to an axis named 'brightness'.
2: {
axis: 'brightness'
} // Bind series 1 to an axis named 'brightness'.
},
axes: {
y: {
distance: {
label: 'parsecs'
}, // Left y-axis.
brightness: {
side: 'right',
label: 'apparent magnitude'
} // Right y-axis.
}
}
};
var classicOptions = {
width: 900,
isStacked: true,
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1
}
},
title: 'Nearby galaxies - distance on the left, brightness on the right',
vAxes: {
// Adds titles to each axis.
0: {
title: 'parsecs'
},
1: {
title: 'apparent magnitude'
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Bar(chartDiv);
materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
I'm using a Google Charts API Area Chart to display a simple Google Spreadsheet: Column 0 stores dates and Column 1 values. Actually the chart is displaying all values in annotation by default. But I only want to display the min and max value of column 1 in annotation.
I can't find the solution for my problem and maybe you can help me with my sourcecode.
Thanks Mags
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function initialize() {
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/MYSPREADSHEET', opts);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
var options = {
title: '',
curveType: 'function',
legend: {position: 'none'},
lineWidth: 4,
backgroundColor: '#2E4151',
colors:['white'],
fontSize: '26',
fontName: 'Open Sans',
animation:{
"startup": true,
duration: 800,
easing: 'inAndOut',
},
hAxis: {
gridlines: {color: 'transparent', count: 4},
textStyle: {color: '#FFF'}
},
vAxis: {
gridlines: {color: 'white', count: 5},
viewWindow: {min: 87, max: 101},
textStyle: {
color: '#FFF',
fontSize: 18
},
},
trendlines: {
0: {
type: 'polynomial',
color: 'yellow',
lineWidth: 5,
opacity: 0.7,
showR2: true,
visibleInLegend: true
}
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="chart_div" style="width:100%; height:100%"></div>
</body>
</html>
you can use data table method --> getColumnRange(columnIndex)
this will return an object with the min & max values of the column.
then you can use the calc function on the data view,
to determine if the value matches either the min or max,
and return the formatted value for the annotation.
return null if it does not, see following snippet...
var data = response.getDataTable();
var range = data.getColumnRange(1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: function (dt, row) {
var value = dt.getValue(row, 1);
if ((value === range.min) || (value === range.max)) {
return dt.getFormattedValue(row, 1);
}
return null;
}
}]);
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>
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>