I'm trying to create a POC of a stock portfolio.
I'm using Google charts to do it.
I want to generate 3 charts: one for each stock (I have two stocks) and one for both of them.
in my html I've created three divs (using some guids)
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
and I've generated a javascript that is supposed to populate the divs
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
The problem is that each time the page loads, only one of the three charts is being rendered. (Each time a different one)
Anyone has ever encountered such issue?
The same issue 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:["line"]});
3)Replace:
google.setOnLoadCallback(drawChart);
with
google.charts.setOnLoadCallback(drawChart);
Example
google.charts.load("43",{packages:["line"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
chart0.draw(data0, options0);
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
}
<script src="http://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
Option 2. Render charts synchronously
Since 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.
Example
google.load('visualization', '1.1', { 'packages': ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Company #4');
data.addColumn('number', 'Company #2');
data.addRow([new Date(2015, 11, 27), 12.7389789250395,4.10950499778125]);
data.addRow([new Date(2015, 11, 26), 6.76681987790708,8.38212726329552]);
data.addRow([new Date(2015, 11, 25), 15.7216755155109,4.36060299741132]);
data.addRow([new Date(2015, 11, 24), 7.44940381844035,3.34093286951116]);
data.addRow([new Date(2015, 11, 23), 9.02574470221333,10.0405249521325]);
data.addRow([new Date(2015, 11, 22), 11.9767397269498,5.29850781210629]);
data.addRow([new Date(2015, 11, 21), 14.5598888055235,6.3867255497662]);
data.addRow([new Date(2015, 11, 20), 12.2693184056642,3.70270192981823]);
data.addRow([new Date(2015, 11, 19), 8.29967047194935,17.0856299675469]);
data.addRow([new Date(2015, 11, 18), 12.9148372020176,4.37814835290338]);
var options = {
title: 'Stock Performance',
width: 900,
height: 500
};
var data0 = new google.visualization.DataTable();
data0.addColumn('date', 'Day');
data0.addColumn('number', 'Company #4');
data0.addRow([new Date(2015, 11, 27), 12.7389789250395]);
data0.addRow([new Date(2015, 11, 26), 6.76681987790708]);
data0.addRow([new Date(2015, 11, 25), 15.7216755155109]);
data0.addRow([new Date(2015, 11, 24), 7.44940381844035]);
data0.addRow([new Date(2015, 11, 23), 9.02574470221333]);
data0.addRow([new Date(2015, 11, 22), 11.9767397269498]);
data0.addRow([new Date(2015, 11, 21), 14.5598888055235]);
data0.addRow([new Date(2015, 11, 20), 12.2693184056642]);
data0.addRow([new Date(2015, 11, 19), 8.29967047194935]);
data0.addRow([new Date(2015, 11, 18), 12.9148372020176]);
var options0 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Day');
data1.addColumn('number', 'Company #2');
data1.addRow([new Date(2015, 11, 27), 4.10950499778125]);
data1.addRow([new Date(2015, 11, 26), 8.38212726329552]);
data1.addRow([new Date(2015, 11, 25), 4.36060299741132]);
data1.addRow([new Date(2015, 11, 24), 3.34093286951116]);
data1.addRow([new Date(2015, 11, 23), 10.0405249521325]);
data1.addRow([new Date(2015, 11, 22), 5.29850781210629]);
data1.addRow([new Date(2015, 11, 21), 6.3867255497662]);
data1.addRow([new Date(2015, 11, 20), 3.70270192981823]);
data1.addRow([new Date(2015, 11, 19), 17.0856299675469]);
data1.addRow([new Date(2015, 11, 18), 4.37814835290338]);
var options1 = {
title: 'Stock Performance',
width: 300,
height: 300
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart0 = new google.charts.Line(document.getElementById('e480c510499e4bbdaa8ae8e4a1001cd8'));
google.visualization.events.addOneTimeListener(chart0, 'ready', function(){
var chart1 = new google.charts.Line(document.getElementById('2dea80b0fabd43bba019dbc3ddf342aa'));
chart1.draw(data1, options1);
});
chart0.draw(data0, options0);
});
chart.draw(data, options);
}
<script src="http://www.google.com/jsapi"></script>
<div id="e480c510499e4bbdaa8ae8e4a1001cd8"></div>
<div id="2dea80b0fabd43bba019dbc3ddf342aa"></div>
<div id="linechart_material"></div>
Related
I'm using a line graph in Google Chart and there's just one thing left I need to configure, the hAxis dates.
The dates have 2 days gap only, like Feb 2, Feb 4, Feb 6, Feb 8, and so on, and so it shows 15 dates on the hAxis. I want to widen the gap maybe by 7 days or lessen the number of dates displayed by just 4 dates. How to achieve that? I can't seem to find the right config for it here: https://developers.google.com/chart/interactive/docs/gallery/linechart.
Here's my chart: https://jsfiddle.net/hpx7Lj91/1/
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
the ticks option offers the most flexibility
it takes an array of the ticks you want to display, such as...
[new Date(2022, 1, 1), new Date(2022, 1, 8), new Date(2022, 1, 15), ...]
you can obviously hard-code them as shown above, or...
we can use data table method getColumnRange(colIndex) to find the min and max dates from the data table.
here is a routine to display a certain number of dates,
evenly spaced between the min and max dates from the data table.
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
then add the ticks option...
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks // <-- ticks option
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
The example for ChartRangeFilter is showing only years, I would like to set it up to hours, for example: starting from midnight to 23:59:59 pm.
range :
00:00:00
01:00:00
02:00:00
03:00:00
04:00:00
...
23:00:00
here is the example code on jsfiddle from Alex https://jsfiddle.net/alex4uthis/ZmVcZ/128/
code :
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRow([new Date(2014, 0, 1), 1,123]);
data.addRow([new Date(2014, 1, 1), 6,42 ]);
data.addRow([new Date(2014, 2, 1), 4,49 ]);
data.addRow([new Date(2014, 3, 1), 23,486 ]);
data.addRow([new Date(2014, 4, 1), 89,476 ]);
data.addRow([new Date(2014, 5, 1), 46,444 ]);
data.addRow([new Date(2014, 6, 1), 178,442 ]);
data.addRow([new Date(2014, 7, 1), 12,274 ]);
data.addRow([new Date(2014, 8, 1), 123,4934 ]);
data.addRow([new Date(2014, 9, 1), 144,4145 ]);
data.addRow([new Date(2014, 10, 1), 135,946 ]);
data.addRow([new Date(2014, 11, 1), 178,747 ]);
data.addRow([new Date(2015, 0, 1), 31,1253]);
data.addRow([new Date(2015, 1, 1), 24,4532 ]);
data.addRow([new Date(2015, 2, 1), 234,349 ]);
data.addRow([new Date(2015, 3, 1), 2009,3486 ]);
data.addRow([new Date(2015, 4, 1), 589,4756 ]);
data.addRow([new Date(2015, 5, 1), 946,4744 ]);
data.addRow([new Date(2015, 6, 1), 878,4542 ]);
data.addRow([new Date(2015, 7, 1), 1562,9874 ]);
data.addRow([new Date(2015, 8, 1), 4123,934 ]);
data.addRow([new Date(2015, 9, 1), 7144,145 ]);
data.addRow([new Date(2015, 10, 1), 8135,46 ]);
data.addRow([new Date(2015, 11, 1), 9178,47 ]);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 620,
chartArea: {
width: '80%'
},
hAxis: {
format: 'MMM',
slantedText: false,
maxAlternation: 1
}
}
});
function setOptions() {
var firstDate;
var lastDate;
var v = control.getState();
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
var ticks = [];
for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
ticks.push(data.getValue(i, 0));
}
chart.setOption('hAxis.ticks', ticks);
chart.setOption('hAxis.viewWindow.min', firstDate);
chart.setOption('hAxis.viewWindow.max', lastDate);
if (dash) {
chart.draw();
}
}
setOptions();
google.visualization.events.addListener(control, 'statechange', setOptions);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([control], [chart]);
dash.draw(data);
}
</script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<p><span id='dbgchart'></span></p>
</div>
How to set the range to show only hours?, please help
While using google dual y line chart, one problem appeared - when both y lines have same trend, they tend to overlap which hides one of the lines. Is there any solution for this?
example data:
data.addRows([
[new Date(2014, 0), 1, 10],
[new Date(2014, 1), 2, 20],
[new Date(2014, 2), 4, 40],
[new Date(2014, 3), 8, 80],
[new Date(2014, 4), 16, 160],
[new Date(2014, 5), 32, 320],
[new Date(2014, 6), 64, 640],
[new Date(2014, 7), 128, 1280],
[new Date(2014, 8), 256, 2560],
[new Date(2014, 9), 512, 5120],
[new Date(2014, 10),1024,10240],
[new Date(2014, 11), 2048, 20480]
]);
fiddle: https://jsfiddle.net/gxq1ykfw/
I have a Google area chart that plots some data, approx 5 years of daily data. The user can zoom in and out and this all works fine.
I wanted though to have a button next to the chart that they could click to see the last years worth of data. However, I am not sure how I can change the x-axis range on a Google chart?
you can use axis option viewWindow
which has properties for min & max,
these properties should match the data type of the axis they are applied
see following working snippet,
the x-axis are dates, so we can set the min & max dates to be displayed on the chart...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[new Date(2017, 1, 20), 10, null],
[new Date(2017, 2, 21), 5, null],
[new Date(2017, 3, 22), 0, 0],
[new Date(2017, 4, 23), null, -5],
[new Date(2017, 5, 24), null, -10],
[new Date(2017, 6, 25), null, -5],
[new Date(2017, 7, 26), 0, 0],
[new Date(2017, 8, 27), 10, null],
[new Date(2017, 9, 28), 5, null],
[new Date(2017, 11, 29), 0, 0],
[new Date(2018, 0, 20), 00, null],
[new Date(2018, 0, 21), 5, null],
[new Date(2018, 0, 22), 0, 0],
[new Date(2018, 0, 23), null, -5],
[new Date(2018, 0, 24), null, -10],
[new Date(2018, 0, 25), null, -5],
[new Date(2018, 0, 26), 0, 0],
[new Date(2018, 0, 27), 00, null],
[new Date(2018, 0, 28), 5, null],
[new Date(2018, 0, 29), 0, 0],
[new Date(2018, 1, 20), 10, null],
[new Date(2018, 1, 21), 5, null],
[new Date(2018, 1, 22), 0, 0],
[new Date(2018, 1, 23), null, -5],
[new Date(2018, 1, 24), null, -10],
[new Date(2018, 1, 25), null, -5],
[new Date(2018, 1, 26), 0, 0],
[new Date(2018, 1, 27), 10, null],
[new Date(2018, 1, 28), 5, null],
[new Date(2018, 1, 29), 0, 0],
[new Date(2018, 2, 20), 10, null],
[new Date(2018, 2, 21), 5, null],
[new Date(2018, 2, 22), 0, 0],
[new Date(2018, 2, 23), null, -5],
[new Date(2018, 2, 24), null, -10],
[new Date(2018, 2, 25), null, -5],
[new Date(2018, 2, 26), 0, 0],
[new Date(2018, 2, 27), 10, null],
[new Date(2018, 2, 28), 5, null],
[new Date(2018, 2, 29), 0, 0],
[new Date(2018, 3, 20), 10, null],
[new Date(2018, 3, 21), 5, null],
[new Date(2018, 3, 22), 0, 0],
[new Date(2018, 3, 23), null, -5],
[new Date(2018, 3, 24), null, -10],
[new Date(2018, 3, 25), null, -5],
[new Date(2018, 3, 26), 0, 0],
[new Date(2018, 3, 27), 10, null],
[new Date(2018, 3, 28), 5, null],
[new Date(2018, 3, 29), 0, 0],
[new Date(2018, 4, 20), 10, null],
[new Date(2018, 4, 21), 5, null],
[new Date(2018, 4, 22), 0, 0],
[new Date(2018, 4, 23), null, -5],
[new Date(2018, 4, 24), null, -10],
[new Date(2018, 4, 25), null, -5],
[new Date(2018, 4, 26), 0, 0],
[new Date(2018, 4, 27), 10, null],
[new Date(2018, 4, 28), 5, null],
[new Date(2018, 4, 29), 0, 0],
[new Date(2018, 5, 20), 10, null],
[new Date(2018, 5, 21), 5, null],
[new Date(2018, 5, 22), 0, 0],
[new Date(2018, 5, 23), null, -5],
[new Date(2018, 5, 24), null, -10],
[new Date(2018, 5, 25), null, -5],
[new Date(2018, 5, 26), 0, 0],
[new Date(2018, 5, 27), 10, null],
[new Date(2018, 5, 28), 5, null],
[new Date(2018, 5, 29), 0, 0],
[new Date(2018, 6, 20), 10, null],
[new Date(2018, 6, 21), 5, null],
[new Date(2018, 6, 22), 0, 0],
[new Date(2018, 6, 23), null, -5],
[new Date(2018, 6, 24), null, -10],
[new Date(2018, 6, 25), null, -5],
[new Date(2018, 6, 26), 0, 0],
[new Date(2018, 6, 27), 10, null],
[new Date(2018, 6, 28), 5, null],
[new Date(2018, 6, 29), 0, 0],
[new Date(2018, 9, 20), 10, null],
[new Date(2018, 9, 21), 5, null],
[new Date(2018, 9, 22), 0, 0],
[new Date(2018, 9, 23), null, -5],
[new Date(2018, 9, 24), null, -10],
[new Date(2018, 9, 25), null, -5],
[new Date(2018, 9, 26), 0, 0],
[new Date(2018, 9, 27), 10, null],
[new Date(2018, 9, 28), 5, null],
[new Date(2018, 9, 29), 0, 0],
[new Date(2018, 11, 20), 10, null],
[new Date(2018, 11, 21), 5, null],
[new Date(2018, 11, 22), 0, 0],
[new Date(2018, 11, 23), null, -5],
[new Date(2018, 11, 24), null, -10],
[new Date(2018, 11, 25), null, -5],
[new Date(2018, 11, 26), 0, 0],
[new Date(2018, 11, 27), 10, null],
[new Date(2018, 11, 28), 5, null],
[new Date(2018, 11, 29), 0, 0],
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart-area',
dataTable: data,
options: {
height: 280,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var chartDateRange = data.getColumnRange(0);
var oneYear = (365.25 * 24 * 60 * 60 * 1000);
$('#range-buttons button').on('click', function (sender) {
var hAxis;
var visibleRange = parseInt($(sender.target).data('range'));
if (isNaN(visibleRange)) {
hAxis = null;
} else {
hAxis = {
viewWindow: {
min: new Date(chartDateRange.max.getTime() - oneYear),
max: chartDateRange.max
}
};
}
chart.setOption('hAxis', hAxis);
chart.draw();
});
chart.draw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="range-buttons">
<span>Zoom: </span>
<button class="ui-button ui-widget ui-corner-all" data-range="31104000000">Last Year</button>
<button class="ui-button ui-widget ui-corner-all">All</button>
</div>
<div id="chart-area"></div>
<div id="filter-range"></div>
</div>
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.
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>