Hey guys,
I have been developing an app where I am using the Google API charts to
display various forms of information. A functionality i wish to incorporate
is allowing a user to click on a bar of the ComboChart (x-axis: Name,
y-axis: numbers) and display a modal with corresponding indexed values of
the name.
I am feeding the chart with a CSV where column 0 is the Name and column 1
is the number value. I have a column 2 which contains the information i
wish to return to the user based on their bar click.
I have coded as much as to get it working when the user clicks the names on
the x-axis but will not return anything unless the column is a 0 or 1. It
returns an error if the getValue() is returning anything that is not a 0 or
1. I have my CSVreader reading all 3 columns and allows the chart to use
columns 0 and 1.
Included below is the jQuery from one of my pages.
Any tips and/or help is appreciated, I have been stuck on this all day.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("barSumtest.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.
castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var totalColumns = 2
var view = new google.visualization.DataView(data);
var columns = [];
for (var i = 0; i <= totalColumns-1; i++) {
if (i > 0) {
columns.push(i);
columns.push({
calc: "stringify",
type: "string",
role: "annotation"
});
} else {
columns.push(i);
}
}
view.setColumns(columns);
// set chart options
var options = {
title: "Top 50 Individual Contributors by Contribution Sum",
hAxis: {title: "Contributor Name", textStyle : {
fontSize: 7, bold: true,
}},
vAxis: {title: "Contribution Sum ($)"},
seriesType: 'bars',
series: {3: {type: 'line'}},
//bar: {groupWidth: 1000}
};
// create the chart object and draw it
var chart = new google.visualization.ComboChart(document.getElementById
('barSum'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'click', function(e) {
var match = e.targetID.match(/hAxis#\d#label#(\d)/);
if (match != null && match.length) {
var rowIndex = parseInt(match[1]);
var label = data.getValue(rowIndex, 2);
alert('You clicked on ' + label);
}
});
});
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/d9895cb2-d9c8-41a0-b1a7-08ff54039577%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
