Does any of you know of a simple way to add distance on the X-axis of the Google maps elevation chart example (https://developers.google.com/maps/documentation/javascript/examples/elevation-paths)?
I have seen several entries here on SO about this but none has a working answer referring to a JSFiddle or similar.
Thanks in advance for any input!
Regards
/Peter
I created a simplified solution that uses the code provided by Google accompanied with some minor modifications that assign distance to each column based on the total distance divided by the amount of columns. See modified excerpt from the sample code below;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Distance');
data.addColumn('number', 'Height');
for (var i = 0; i < elevations.length; i++) {
data.addRow([Math.round(((totalDistance/amountOfColumns)*i)) + " m",elevations[i].elevation]);
}
// Draw the chart using the data within its DIV.
chart.draw(data, {
height: 150,
legend: 'Height profile',
titleY: 'Height (m)',
titleX: 'Distance (m)',
hAxis: {
title: 'Distance (m)',
},
vAxis: {
title: 'Height (m)'
},
colors: ['#000000']
});
}
Related
I used google chart library to render charts like bubble chart, trendline. I am fetching json data from api and converting to array and passing it to arrayToDataTable function. For trendline and bubble chart, the div shows error - Data column(s) for axis #0 cannot be of type string
function drawBubbleChart() {
var data = google.visualization.arrayToDataTable(arrays[1]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart2'));
chart.draw(data, options);
}
Im using google column chart in my application in my chart i need to remove the tiny space between my blue and grey bars and also to format the y axis values. Please suggest me, how to remove that tiny gap between them. My Chart
Code for the chart
google.load("visualization", "1", {packages: ["columnchart"]});
var datum=[];
datum=[[2,15,25]];
var data = google.visualization.arrayToDataTable([['column1', 'column2', 'column3']].concat(datum), false);
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
// vAxis: {minValue: 0, maxValue: maxValue, ticks: tick, format: '$'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
Updated
How to remove the yaxis line and need to format the y axis value like $10, $15, $30. Is there any way to do that in column chart package. The link i'have refered to do the chart is this
You can add the following to your options object: bar: {groupWidth: '100%'}.
This will remove the gap between your gray and your blue bar.
All options are also listed in the documentation.
First off, don't use the old version of the ColumnChart; it is deprecated and doesn't offer any features that the newer version doesn't also have. Load it like this:
google.load('visualization', '1', {packages: ['corechart']});
To format the axis values, you need to use the vAxis.format option:
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
vAxis: {
format: '$#'
}
};
Is there any JavaScript out there or examples for horizontally panning a Google Column Chart?
I have several months worth of data and I would like the users to be able to view it left to right. This is the functionality I would like: http://almende.github.io/chap-links-library/js/graph/examples/example05_gaps_in_data.html. My users have pushed back against using an Annotated TimeLine.
You can hook a ColumnChart up to a ChartRangeFilter and get the pan and zoom functionality of the AnnotatedTimeline.
[Edit]
The new version of the Visualization API supports zooming and panning charts via the explorer option. The default allows users to zoom with the scroll wheel and pan by clicking and dragging. Here's an example:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
var y = 50;
for (var i = 0; i < 1000; i++) {
y += Math.ceil(Math.random() * 3) * Math.pow(-1, Math.floor(Math.random() * 2));
data.addRow([i, y]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
explorer: {
axis: 'horizontal',
keepInBounds: true
}
});
}
google.load('visualization',
jsfiddle: http://jsfiddle.net/asgallant/KArng/
Ironically the library I referenced is actually using Google Visualization charts and doing some amazing things with them, including panning.
I would like to know if I can apply an animation to the charts on the first time it draws?
And not only when a change of data happens?
THanks!
UPDATED ANSWER
Google has updated chart options and added the option to animate the chart on the first time it draws.
So the only thing you have to do is psecify it in the options like that:
var options = {
animation: {
duration: 1500,
startup: true //This is the new option
}
};
So you dont have to load an empty chart on the beggining or to do any other hack.
DEMO
The Chart should be rendered before you can apply your animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.
To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.
var options = {
animation:{
duration: 1000,
easing: 'out',
}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
var chart = new google.visualization.ColumnChart...
chart.draw(data, options);
// Adding data
data.addRow(['V', 200]);
Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.
function drawChart() {
var option = {title:"Yearly Coffee Consumption in our company",
width:600, height:400,
animation: {duration: 1000, easing: 'out',},
vAxis: {title: "Cups of coffee", minValue:0, maxValue:500},
hAxis: {title: "Year"}};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 400);
data.setValue(1, 1, 300);
data.setValue(2, 1, 400);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Fellow Coders,
I'm trying to update a Google Visualization API that has already been populated with data. Here's the background:
The user get's to choose several options from drop down menu's. After which, the user may select to update the Google API from a button.
Do I need a QueryWrapper function, initiated through the button onlick, to update the Google API?
HTML code:
<div class="css_button_example" value="UpdateGraph" onclick="showUser()"><span>Update Graph</span></div>
In the above button code, showUser() is a JavaScript function that pulls an MySQL query through PHP - the result is json_encoded back into the Google API JavaScript code. Do I need another JavaScript function to update the Google API?
Here's the Google API code:
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cluster');
data.addColumn('number', 'Loans');
data.addColumn('number', 'Lines');
/* create for loops to add as many columns as necessary */
var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
data.addRows(len);
for(i=0; i<len; i++) {
var lines = (encoded_line_volume[i])/100000;
var loans = (encoded_loan_volume[i])/100000;
data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');
data.setValue(i, 1, loans);
data.setValue(i, 2, lines);
}
/*********************************end of loops***************************************/
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height: 300, is3D: true, title: 'Prospect Population', legend: 'right'});
}
Any suggestions on how I can augment the Google API code to update the graph? Maybe a QueryWrapper?