Line Chart, How do I select two points and grab dates

315 views
Skip to first unread message

tez

unread,
Dec 12, 2017, 1:15:50 PM12/12/17
to Google Visualization API
I am charting historical Stock Exchange Data and I want to know how to select two points, so I can store them in form inputs as a Start Date and End Date to use in my code for another API. 

I have

function drawChart(chartData, data) {
google.charts.load('current', { 'packages': ['line'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', `${addCompanyName} Closing Price`);
for (var x = 0; x < chartData.length; x++) {
const chartDate = (chartData[x].date);
const chartClose = (chartData[x].close)
data.addRows([
[new Date(chartDate), chartClose],
]);
}
var options = {
selectionMode: 'multiple',
chart: {
title: `${addCompanyName}`,
subtitle: '5 years Growth'
},
width: 900,
height: 500,
axes: {
x: {
0: { side: 'top' }
}
}
};

var chart = new google.charts.Line(document.getElementById('line_top_x'));

chart.draw(data, google.charts.Line.convertOptions(options));

}

}

So far I have Selection mode set to multiple, Is there any way I can limit that Selection to 2? And how can I grab the date to use for later?  Thanks for an advance to anyone reading this, any help would be greatly appreciated!

tez

unread,
Dec 12, 2017, 2:59:52 PM12/12/17
to Google Visualization API
So I successfully created an event listener
var chart = new google.charts.Line(document.getElementById('line_top_x'));

chart.draw(data, google.charts.Line.convertOptions(options));

google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
alert('A chart row was selected');
}

Now I am figuring out how to select specifically chartData[x].date
Mentioned previously
Reply all
Reply to author
Forward
0 new messages