Insert Links into Google Charts api data? - javascript

I have been playing around with Google charts quite a bit over in the google charts play ground here:
Link
The code I have been playing with is this:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
and that gives me a nice chart that looks like this:
I am trying to have this chart fit the needs of my website, and to do this, I need to make the bar names on the left links to another page. So for example 2003 would be a link that the user can click ans so would 2004 etc.
I tried to do something like this:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['Link text', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
But I could only hope for it to be that easy and it wasn't. Does anyone know if this is at all possible?


Manzoid's answer is good, but "some assembly is still required" as it just displays an alert box rather than following the link. Here is a more complete answer BUT it makes the bars clickable rather than the labels. I create a DataTable that includes the links then create a DataView from that to select the columns I want to display. Then when the select event occurs, I just retrieve the link from the original DataTable.
<html>
<head>
<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([
['Year', 'link', 'Austria'],
['2003', 'http://en.wikipedia.org/wiki/2003', 1336060],
['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 900px;"></div>
</body>
</html>


This is non-trivial because the output you are seeing is SVG, not HTML. Those labels in your example ("2004", "2005", etc) are embedded inside SVG text nodes, so inserting raw HTML markup inside them will not be rendered as HTML.
The workaround is to scan for the text nodes containing the target values (again, "2004", "2005" etc) and replace them with ForeignObject elements. ForeignObject elements can contain regular HTML. These then need to be positioned more-or-less where the original SVG text nodes had been.
Here is a sample snippet illustrating all this. It is tuned to your specific example, so when you switch to rendering whatever your real data is, you will want to modify and generalize this snippet accordingly.
// Note: You will probably need to tweak these deltas
// for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
if (years.indexOf(el.textContent) != -1) {
var g = el.parentNode;
var x = el.getAttribute('x');
var y = el.getAttribute('y');
var width = el.getAttribute('width') || 50;
var height = el.getAttribute('height') || 15;
// A "ForeignObject" tag is how you can inject HTML into an SVG document.
var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
fo.setAttribute('x', x - xDelta);
fo.setAttribute('y', y - yDelta);
fo.setAttribute('height', height);
fo.setAttribute('width', width);
var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
var a = document.createElement("A");
a.href = "http://yahoo.com";
a.setAttribute("style", "color:blue;");
a.innerHTML = el.textContent;
body.appendChild(a);
fo.appendChild(body);
// Remove the original SVG text and replace it with the HTML.
g.removeChild(el);
g.appendChild(fo);
}
});
Minor note, there is a bit of jQuery in there for convenience but you can replace $('text') with document.getElementsByTagName("svg")[0].getElementsByTagName("text").


Since the SVG-embedding route is (understandably) too hairy for you to want to muck with, let's try a completely different approach. Assuming that you have the flexibility to alter your functional specification a bit, such that the bars are clickable, not the labels, then here's a much simpler solution that will work.
Look for the alert in this snippet, that's the part that you will customize to do the redirect.
function drawVisualization() {
// Create and populate the data table.
var rawData = [
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
];
var data = google.visualization.arrayToDataTable(rawData);
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
var handler = function(e) {
var sel = chart.getSelection();
sel = sel[0];
if (sel && sel['row'] && sel['column']) {
var year = rawData[sel['row'] + 1][0];
alert(year); // This where you'd construct the URL for this row, and redirect to it.
}
}
google.visualization.events.addListener(chart, 'select', handler);
}


I apparently don't have enough reputation points to comment directly to a previous reply, so my apologies for doing so as a new post. manzoid's suggestion is great but has one issue I found, and it looks like Mark Butler might have run into the same problem (or unknowingly sidestepped it).
if (sel && sel['row'] && sel['column']) {
That line keeps the first data point from being clickable. I used it on a Jan-Dec bar chart, and only Feb-Dec were clickable. Removing sel['row'] from the condition allows Jan to work. I don't know that the if() condition is really even necessary, though.


Here's another solution that wraps each text tag for label with anchor tag.
no ForeignObject
clickable label
stylable by css (hover effect)
Here's a sample: https://jsfiddle.net/tokkonoPapa/h3eq9m9p/
/* find the value in array */
function inArray(val, arr) {
var i, n = arr.length;
val = val.replace('…', ''); // remove ellipsis
for (i = 0; i < n; ++i) {
if (i in arr && 0 === arr[i].label.indexOf(val)) {
return i;
}
}
return -1;
}
/* add a link to each label */
function addLink(data, id) {
var n, p, info = [], ns = 'hxxp://www.w3.org/1999/xlink';
// make an array for label and link.
n = data.getNumberOfRows();
for (i = 0; i < n; ++i) {
info.push({
label: data.getValue(i, 0),
link: data.getValue(i, 2)
});
}
$('#' + id).find('text').each(function(i, elm) {
p = elm.parentNode;
if ('g' === p.tagName.toLowerCase()) {
i = inArray(elm.textContent, info);
if (-1 !== i) {
/* wrap text tag with anchor tag */
n = document.createElementNS('hxxp://www.w3.org/2000/svg', 'a');
n.setAttributeNS(ns, 'xlink:href', info[i].link);
n.setAttributeNS(ns, 'title', info[i].label);
n.setAttribute('target', '_blank');
n.setAttribute('class', 'city-name');
n.appendChild(p.removeChild(elm));
p.appendChild(n);
info.splice(i, 1); // for speeding up
}
}
});
}
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', {role: 'link'}],
['New York City, NY', 8175000, 'hxxp://google.com/'],
['Los Angeles, CA', 3792000, 'hxxp://yahoo.com/' ],
['Chicago, IL', 2695000, 'hxxp://bing.com/' ],
['Houston, TX', 2099000, 'hxxp://example.com'],
['Philadelphia, PA', 1526000, 'hxxp://example.com']
]);
var options = {...};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
addLink(data, 'chart_div');
}


You should use formatters.
If you replace value with HTML then sorting will not work properly.

Related

How to display a single data point on Google Area OR Line chart

I've tried every configuration possible to get a Google Area Chart to display a single point but nothing has worked. I'm also totally open to any solutions using the Google Line Chart as long as it has a filled area. However, I couldn't find a solution for making this work with a line chart either.
Already tried setting the pointSize as well as setting the pointSize conditionally if there is only a single row. Tried numerous different ways of configuring the chart including.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Updated');
data.addColumn('number', 'Amount');
data.addRow([new Date(1548266417060.704),100]);
AND
var mets = [['Updated', 'Amount'], [new Date(1548266417060.704),100]];
var data = google.visualization.arrayToDataTable(mets);
Area Chart Example JSFiddle
Line Chart Example JSFiddle
This Line Chart would need the area below the line filled in but I haven't been able to determine how to do so with this API
Example of the chart I'm trying to achieve using CanvasJs but I'm trying to implement it with Google Visualization API and allow for a single point to be shown if there is only a single point on the chart.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100],
//[new Date(1548716961817.513),100],
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I'm expecting the chart to display a single point when there is only one data row. As you can see by the JSFiddle when there is a single row nothing appears but as soon as you uncomment the second row everything works just fine.

there is a bug with the most recent version of google charts,
when the x-axis is a continuous axis (date, number, not string, etc.),
and only one row exists in the data table,
you must set an explicit view window on the axis --> hAxis.viewWindow
to use a date type with only one row,
first, use data table method --> getColumnRange
this will return an object with min & max properties for the x-axis
then we can increase the max and decrease the min by one day,
and use that for our view window.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var oneDay = (24 * 60 * 60 * 1000);
var dateRange = data.getColumnRange(0);
if (data.getNumberOfRows() === 1) {
dateRange.min = new Date(dateRange.min.getTime() - oneDay);
dateRange.max = new Date(dateRange.max.getTime() + oneDay);
}
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
viewWindow: dateRange
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you'll notice if we go back to an old version ('45'),
a single date row displays without issue...
google.charts.load('45', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

I dont know if you understod but the date format you are passing is wrong, so when you write Date() it return the current date formatted as string.
now if we understand that much then the currect way of writing the date array should be
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704).toString(),100],
]);
This will return the date formatted as string.
and the library will accept it.
if you are still want to pass on an object then you need to specify the dataTable column as Date.
read here for more information
https://developers.google.com/chart/interactive/docs/datesandtimes

Multiple Google charts not displaying properly on the same page

I've got 4 charts displayed on a single page. When drawn individually they work perfectly fine, but when I try to have more than 1 they're not all displayed. I have also noticed that when resizing the window (hence refreshing the charts), the "active" chart can change.
Here's my method that draws the charts:
function drawChart() {
// Occurrences per step
var data_occ = new google.visualization.DataTable();
data_occ.addColumn('string', 'Step');
data_occ.addColumn('number', 'Number');
data_occ.addRows([
['NO_STOP_DEP', 2057],
['FIND_STOPS_DEP', 795],
['FIND_STOPS_ARR', 423],
['FIND_ROUTES', 416],
['FIND_PATHS_0', 416],
['NO_STOP_ARR', 371],
['FIND_PATHS_1', 359],
['JOURNEY_GET_1CONNECTION_FAILED', 274],
['FIND_PATHS_2', 274],
['JOURNEY_GET_1CONNECTION_t1d', 185],
['OK', 147],
['JOURNEY_GET_2CONNECTION_t1d', 145],
['JOURNEY_GET_1CONNECTION_t1a', 138],
['NO_PATH', 129],
['JOURNEY_GET_2CONNECTION_FAILED', 118],
['NO_JOURNEY', 118],
['JOURNEY_GET_1CONNECTION_cs1', 117],
['JOURNEY_GET_1CONNECTION_t2d', 115],
['JOURNEY_GET_DIRECT_t1d', 111],
['JOURNEY_GET_2CONNECTION_t1a', 79],
['JOURNEY_GET_2CONNECTION_cs1', 75],
['JOURNEY_GET_2CONNECTION_t2d', 73],
['JOURNEY_GET_2CONNECTION_t2a', 66],
['JOURNEY_GET_2CONNECTION_cs2', 66],
['JOURNEY_GET_2CONNECTION_t3d', 66],
['JOURNEY_GET_1CONNECTION', 65],
['JOURNEY_GET_DIRECT', 56],
['JOURNEY_GET_DIRECT_FAILED', 54],
['JOURNEY_GET_2CONNECTION', 26],
['NO_ROUTE_ARR', 4],
['NO_ROUTE_DEP', 3]
]);
var opt_occ = {
chart: {
title: 'Occurrences of each step'
}
};
var chart_occ = new google.charts.Bar(document.getElementById('chart_occ'));
chart_occ.draw(data_occ, opt_occ);
// Sum of durations per step
var data_dur = new google.visualization.DataTable();
data_dur.addColumn('string', 'Step');
data_dur.addColumn('number', 'Duration');
data_dur.addRows([
['JOURNEY_GET_2CONNECTION_t2d', 4271651.423530579],
['NO_STOP_DEP', 954578.8992916346],
['FIND_STOPS_DEP', 711477.470664978],
['JOURNEY_GET_DIRECT_t1d', 604728.3424301147],
['JOURNEY_GET_1CONNECTION_t2d', 483084.8451423645],
['JOURNEY_GET_1CONNECTION_t1d', 399811.6393585205],
['JOURNEY_GET_2CONNECTION_t3d', 391471.8716468811],
['FIND_PATHS_1', 173883.78058815002],
['FIND_STOPS_ARR', 164751.4531224966],
['JOURNEY_GET_2CONNECTION_t1d', 158291.4034690857],
['FIND_PATHS_2', 154918.55130004883],
['FIND_ROUTES', 125470.71777877212],
['NO_STOP_ARR', 82222.14379951358],
['JOURNEY_GET_1CONNECTION_cs1', 45374.44926452637],
['JOURNEY_GET_1CONNECTION_t1a', 29688.884063720703],
['JOURNEY_GET_2CONNECTION_cs2', 21626.706924438477],
['JOURNEY_GET_2CONNECTION_cs1', 13983.793979644775],
['JOURNEY_GET_2CONNECTION_t2a', 13081.894062042236],
['JOURNEY_GET_1CONNECTION', 11718.449104309082],
['JOURNEY_GET_2CONNECTION_FAILED', 9777.992935180664],
['JOURNEY_GET_1CONNECTION_FAILED', 9182.082992315292],
['JOURNEY_GET_DIRECT', 8991.909969329834],
['JOURNEY_GET_2CONNECTION_t1a', 8132.20499420166],
['NO_ROUTE_ARR', 5709.329235076904],
['JOURNEY_GET_DIRECT_FAILED', 5620.268951416016],
['FIND_PATHS_0', 4501.938883662224],
['JOURNEY_GET_2CONNECTION', 3359.796012878418],
['NO_PATH', 1778.0850104540586],
['OK', 1419.4850099533796],
['NO_JOURNEY', 1267.5709964483976],
['NO_ROUTE_DEP', 334.49600982666016]
]);
var opt_dur = {
chart: {
title: 'Cumulative duration of each step (ms)'
}
};
var chart_dur = new google.charts.Bar(document.getElementById('chart_dur'));
chart_dur.draw(data_dur, opt_dur);
// Average of durations per step
var data_dur_avg = new google.visualization.DataTable();
data_dur_avg.addColumn('string', 'Step');
data_dur_avg.addColumn('number', 'Duration');
data_dur_avg.addRows([
['NO_ROUTE_DEP', 111.49866994222005],
['NO_ROUTE_ARR', 1427.332308769226],
['JOURNEY_GET_DIRECT', 160.5698208808899],
['NO_PATH', 13.783604732202004],
['JOURNEY_GET_1CONNECTION_cs1', 387.8158056797125],
['JOURNEY_GET_1CONNECTION_t2d', 4200.737783846648],
['JOURNEY_GET_1CONNECTION', 180.2838323739859],
['JOURNEY_GET_2CONNECTION_t1a', 102.93930372407165],
['JOURNEY_GET_2CONNECTION_cs1', 186.45058639526368],
['JOURNEY_GET_2CONNECTION_t2d', 58515.77292507642],
['JOURNEY_GET_2CONNECTION_t2a', 198.21051609154904],
['JOURNEY_GET_2CONNECTION_cs2', 327.6773776430072],
['JOURNEY_GET_2CONNECTION_t3d', 5931.3919946497135],
['JOURNEY_GET_2CONNECTION', 129.22292357224686],
['OK', 9.656360611927752],
['NO_STOP_ARR', 221.623029109201],
['JOURNEY_GET_1CONNECTION_t1a', 215.13684104145437],
['NO_STOP_DEP', 464.06363601926813],
['FIND_STOPS_DEP', 894.9402146729284],
['FIND_STOPS_ARR', 389.483340715122],
['FIND_ROUTES', 301.6123023528176],
['FIND_PATHS_0', 10.821968470341885],
['JOURNEY_GET_DIRECT_t1d', 5448.003084955989],
['JOURNEY_GET_DIRECT_FAILED', 104.07905465585215],
['FIND_PATHS_1', 484.35593478593324],
['JOURNEY_GET_1CONNECTION_t1d', 2161.1439965325435],
['JOURNEY_GET_1CONNECTION_FAILED', 33.51125179677114],
['FIND_PATHS_2', 565.3961726279155],
['JOURNEY_GET_2CONNECTION_t1d', 1091.6648515109357],
['JOURNEY_GET_2CONNECTION_FAILED', 82.86434690831071],
['NO_JOURNEY', 10.742127088545743]
]);
var opt_dur_avg = {
chart: {
title: 'Average duration of each step (ms)'
}
};
var chart_dur_avg = new google.charts.Bar(document.getElementById('chart_dur_avg'));
chart_dur_avg.draw(data_dur_avg, opt_dur_avg);
// Average duration comparison today vs yesterday
var data_dur_avg_cmp = new google.visualization.DataTable();
data_dur_avg_cmp.addColumn('string', 'Step');
data_dur_avg_cmp.addColumn('number', 'Yesterday');
data_dur_avg_cmp.addColumn('number', 'Today');
data_dur_avg_cmp.addRows([
]);
var opt_dur_avg_cmp = {
chart: {
title: 'Average duration of each step (ms)'
}
};
var chart_dur_avg_cmp = new google.charts.Bar(document.getElementById('chart_dur_avg_cmp'));
chart_dur_avg_cmp.draw(data_dur_avg_cmp, opt_dur_avg_cmp);
}
I have also uploaded the code to a jsfiddle so that you can see for yourself. You can play with the integer at the top, to select which graphs will be displayed. Having a value that is not a power of 2 (that is, display more than one graph) will cause the following:
the div will be sized, I mean the layout indicates that it is present
nothing will be drawn in the div
Here's an example with 2 graphs drawn, one is properly drawn and the second one is blank:
We can clearly see that the Average duration div has a size, but is blank.

It's the known issue that was reported in google-visualization-issues repository:
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load "1.1" now so that when the candidate release
becomes available, you will be using it.
There are at least two solutions available at the moment.
Option 1. Using the frozen version loader.
Since the rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script src="http://www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
3)Replace google.setOnLoadCallback(drawChart); with google.charts.setOnLoadCallback(drawChart);
Modified jsfiddle
Option 2. Render charts synchronously
Since a draw function is asynchronous, we utilize ready event handler to draw charts sequentially, in that case multiple chart should be rendered properly as demonstrated below.
function drawChart(chartsQueue,index) {
index = index || 0;
if (index === chartsQueue.length)
return;
var chart = new google.charts.Bar(document.getElementById(chartsQueue[index].id));
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
drawChart(chartsQueue, index + 1); //draw next chart
});
chart.draw(chartsQueue[index].data, chartsQueue[index].options);
}
Modified jsfiddle

How to color Google Column Chart's every bar differently and keep them as it is

Though I have successfully colored the bars of google chart individually but not able to keep them when we hover mouse over it. It is getting reset back to blue(which is default).
Here is the jsfiddle of what I have done jsfiddle.
I tried to control the hover behaviour with multiple ways like below.
This I am keeping outside (document.ready) but inside script tag.
1)
$('#chart_div').hover(
function() {
$('#chart_client').hide(); // chart_client is another google chart div.
}, function() { // just for testing I was doing hide/show of that.
$('#chart_client').show();
}
);
2)
$("#chart_div").on({
mouseenter: function () {
$('#chart_client').hide();
},
mouseleave:function () {
$('#chart_client').show();
}
},'rect');
3)
google.visualization.events.addListener('#chart_div', 'ready', function () {
$('#chart_div rect').mouseover(function (e) {
alert('hello');
});
});
I must be doing something wrong, could you please tell me what and where.

I solved it using below code. Earlier I was trying to create charts using dynamically adding rows into chart(please visit my jsfiddle) but with this below approach I am first preparing data(converting dynamic to static) and adding that static data in to chart's 'arrayToDataTable' method.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawUserKeywordChart);
function drawUserKeywordChart() {
var val = 'Tax:47;Finance:95;Awards:126;Bank:137;Debt:145;';
var length = val.length;
var array = [];
//preparing data
while(length>0){
var sepAt = val.indexOf(";");
var value = parseInt(val.substring(val.indexOf(":")+1, sepAt));
array.push(val.substring(0, val.indexOf(":")));
array.push(value);
val = val.substring(val.indexOf(";")+1, length);
length = val.length;
}
var data = google.visualization.arrayToDataTable([
['Keyword', 'Occurences', { role: 'style' }],
[array[0], array[1], '#8AA3B3'],
[array[2], array[3], '#A9B089'],
[array[4], array[5], '#848C49'],
[array[6], array[7], '#44464A'],
[array[8], array[9], '#704610'],
]);
var options = {
title: 'Keyword Matches',
width: 660,
height: 450,
titleTextStyle:{bold:true,fontSize:20},
legend:{position:'none'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_keyword1'));
chart.draw(data, options);
}
Please advice if you find anything wrong here or you have better approach than this.

Region not highlighted within Geo Chart

When a State of the US is selected from a dropdown containing all the states, I wish to show that state highlighted in the US map. I want to accomplish this using Geo Chart of the Google Charts API.
While trying to achieve that, I tried this sample in the Google Code Playground (where you can edit existing samples)
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country'],
['US-AK' ],
['US-AZ' ],
['US-HI' ],
]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {region:"US",legend:"none",width: 556, height: 347});
}
Although Alaska ('US-AK') & Hawaii ('US-HI') show up in the map, Arizona ('US-AZ' ) doesn't. How can I get Arizona to be highlighted as well? I'll also appreciate any pointers on my original goal of showing a state highlighted dynamically when a state within the dropdown is chosen.

The reason Arizona doesn't show up on the map is because you have to set the resolution option to "provinces" to get a map of the states. Using a dropdown to highlight a selected state is a bit more complex, but certainly doable. Here's one way you could do it; in your javascript:
function drawChart () {
var data = google.visualization.arrayToDataTable([
['State', ''],
['US-AK', 0],
['US-AZ', 0],
['US-HI', 0]
]);
var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {
region:"US",
legend:"none",
width: 556,
height: 347,
resolution: 'provinces',
colorAxis: {
minValue: 0,
maxValue: 1,
colors: ['green', 'red']
}
};
var stateSelector = document.querySelector('#state');
function updateChart () {
var index = this.selectedIndex;
var selectedState = this.options[index].value;
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 0) == selectedState) ? 1 : 0;
}
}]);
geochart.draw(view, options);
}
if (document.addEventListener) {
stateSelector.addEventListener('change', updateChart, false);
}
else if (document.attachEvent) {
stateSelector.attachEvent('onchange', updateChart);
}
else {
stateSelector.onchange = updateChart;
}
geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChart});
And then in your HTML:
<select id="state">
<option value="" selected="selected">Select a state to highlight</option>
<option value="US-AK">Alaska</option>
<option value="US-AZ">Arizona</option>
<option value="US-HI">Hawaii</option>
</select>
<div id="chart_div"></div>
Here's a jsfiddle of this that you can play around with: http://jsfiddle.net/asgallant/wwDyU/

No need to add states code for US or any country. You can give full names of states in US as is and just one modification in your code.
Just change the options like this....
var options={
region:"US",
resolution: 'provinces',//This is the property due to which U can see regions.
colors:['green', 'red'],
dataMode:'regions'
}

Google Charts - Change the color of bars

I want to change the color of each bar in my bar graph. Currently, I tried setting the colors option as specified in the documentation:
var options = {
'title' : results.title,
'width' : 400,
'height' : 300,
'is3D' : true,
'colors' : ["#194D86","#699A36", "#000000"],
'allowHtml' : true
}
But it does not work. Basically, I would want each bar in the following graph to be the same color: http://jsfiddle.net/etiennenoel/ZThMp/12/
Is there a way to do that or do I have to change my code structure to do so ?

[Edit - there is a better method outlined in edit below]
The Visualization API colors data by series (or column in the DataTable, if you prefer). The solution is to split the data into multiple series using a DataView:
// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
var label = group.getValue(i, 0);
// set the columns to use in the chart's view
// calculated columns put data belonging to each label in the proper column
columns.push({
type: 'number',
label: label,
calc: (function (name) {
return function (dt, row) {
return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
}
})(label)
});
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);
Set the "isStacked" option in the chart to "true" to fix the column spacing issues that result, and draw the chart using the view instead of the DataTable:
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
// options
isStacked: true
});
See an example here.
[Edit: new (improved) method available with update to the Visualization API]
You can now use the new "style" column role to specify styles for your columns. It works like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #ac6598'],
['Bar', 7, 'color: #3fb0e9'],
['Baz', 3, 'color: #42c698']
]);
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
legend: {
position: 'none'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see example here: http://jsfiddle.net/asgallant/gbzLB/

There is a solution for your problem.You need to add series in your options. I have already answered for the similar type of question. Refer my answer here. I hope this will help you.

Categories