Google Dashboard - chartRangeFilter , how to know when slider controls move, then stop
1
I can add an event handler to the ChartRangeFilter controlWrapper to find out when the sliders are moving:
google.visualization.events.addListener(control, 'statechange', selectHandler);
and I have a handler for it:
function selectHandler(e){
var state = control.getState();
console.log(state);
if (state != 'inProgress') {
currentLeftSliderPos = control.getState().range.start;
currentRightSliderPos = control.getState().range.end;
console.log(currentLeftSliderPos);
console.log(currentRightSliderPos);
}
}
It's not working and I know why. control.getstate()returns an object and is not really what I want. I know there is a way to check if the sliders are 'inProgress', but I can't figure out from what I have read on how to do that. Or do I check the 'ready' status? I don't want to reload graph data until the slider has stopped because I have a large dataset.
javascript charts google-visualization
edited Nov 20 at 17:17
WhiteHat
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
add a comment |
1
I can add an event handler to the ChartRangeFilter controlWrapper to find out when the sliders are moving:
google.visualization.events.addListener(control, 'statechange', selectHandler);
and I have a handler for it:
function selectHandler(e){
var state = control.getState();
console.log(state);
if (state != 'inProgress') {
currentLeftSliderPos = control.getState().range.start;
currentRightSliderPos = control.getState().range.end;
console.log(currentLeftSliderPos);
console.log(currentRightSliderPos);
}
}
It's not working and I know why. control.getstate()returns an object and is not really what I want. I know there is a way to check if the sliders are 'inProgress', but I can't figure out from what I have read on how to do that. Or do I check the 'ready' status? I don't want to reload graph data until the slider has stopped because I have a large dataset.
javascript charts google-visualization
edited Nov 20 at 17:17
WhiteHat
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
add a comment |
1
1
1
I can add an event handler to the ChartRangeFilter controlWrapper to find out when the sliders are moving:
google.visualization.events.addListener(control, 'statechange', selectHandler);
and I have a handler for it:
function selectHandler(e){
var state = control.getState();
console.log(state);
if (state != 'inProgress') {
currentLeftSliderPos = control.getState().range.start;
currentRightSliderPos = control.getState().range.end;
console.log(currentLeftSliderPos);
console.log(currentRightSliderPos);
}
}
It's not working and I know why. control.getstate()returns an object and is not really what I want. I know there is a way to check if the sliders are 'inProgress', but I can't figure out from what I have read on how to do that. Or do I check the 'ready' status? I don't want to reload graph data until the slider has stopped because I have a large dataset.
javascript charts google-visualization
edited Nov 20 at 17:17
WhiteHat
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
I can add an event handler to the ChartRangeFilter controlWrapper to find out when the sliders are moving:
google.visualization.events.addListener(control, 'statechange', selectHandler);
and I have a handler for it:
function selectHandler(e){
var state = control.getState();
console.log(state);
if (state != 'inProgress') {
currentLeftSliderPos = control.getState().range.start;
currentRightSliderPos = control.getState().range.end;
console.log(currentLeftSliderPos);
console.log(currentRightSliderPos);
}
}
It's not working and I know why. control.getstate()returns an object and is not really what I want. I know there is a way to check if the sliders are 'inProgress', but I can't figure out from what I have read on how to do that. Or do I check the 'ready' status? I don't want to reload graph data until the slider has stopped because I have a large dataset.
javascript charts google-visualization
javascript charts google-visualization
edited Nov 20 at 17:17
WhiteHat
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
edited Nov 20 at 17:17
WhiteHat
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
edited Nov 20 at 17:17
WhiteHat
35.7k61475
edited Nov 20 at 17:17
WhiteHat
35.7k61475
edited Nov 20 at 17:17
WhiteHat
35.7k61475
35.7k61475
asked Jul 27 '17 at 21:41
Eli Morris
668
asked Jul 27 '17 at 21:41
Eli Morris
668
asked Jul 27 '17 at 21:41
Eli Morris
668
668
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
use the inProgress property on the argument sent to the event handler
it has the following properties...
{
"inProgress": false,
"startChanged": true,
"endChanged": false
}
see following working snippet...
google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45361480%2fgoogle-dashboard-chartrangefilter-how-to-know-when-slider-controls-move-the%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
use the inProgress property on the argument sent to the event handler
it has the following properties...
{
"inProgress": false,
"startChanged": true,
"endChanged": false
}
see following working snippet...
google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
add a comment |
2
use the inProgress property on the argument sent to the event handler
it has the following properties...
{
"inProgress": false,
"startChanged": true,
"endChanged": false
}
see following working snippet...
google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
add a comment |
2
2
2
use the inProgress property on the argument sent to the event handler
it has the following properties...
{
"inProgress": false,
"startChanged": true,
"endChanged": false
}
see following working snippet...
google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
use the inProgress property on the argument sent to the event handler
it has the following properties...
{
"inProgress": false,
"startChanged": true,
"endChanged": false
}
see following working snippet...
google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>google.charts.load('current', {
callback: drawDashboard,
packages: ['corechart', 'controls']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 6, 12), 9],
[new Date(2017, 6, 13), 8],
[new Date(2017, 6, 14), 10],
[new Date(2017, 6, 15), 8],
[new Date(2017, 6, 16), 22],
[new Date(2017, 6, 17), 25],
[new Date(2017, 6, 18), 24],
[new Date(2017, 6, 19), 14],
[new Date(2017, 6, 20), 12],
[new Date(2017, 6, 21), 8],
[new Date(2017, 6, 22), 9],
[new Date(2017, 6, 23), 4]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart'
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0
}
});
google.visualization.events.addListener(control, 'statechange', function (eventArgs) {
document.getElementById('info').innerHTML = 'control is moving = ' + eventArgs.inProgress;
});
dashboard.bind(control, chart);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>
<div id="info"></div>answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
answered Jul 28 '17 at 11:38
WhiteHat
35.7k61475
35.7k61475
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
add a comment |
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
The solution works great. Thank you!
– Eli Morris
Jul 28 '17 at 19:21
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45361480%2fgoogle-dashboard-chartrangefilter-how-to-know-when-slider-controls-move-the%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
