I've managed to implement a continuous axis google chart on my page and got it formatted the way I want it. Now my requirements have changed and I'm trying to load this chart from a CSV as opposed to hard coded and randomly generated data.
I've confused myself and gotten in over my head on how to convert my working chart into pulling from a CSV. I'm going to post a few things here,
One of my other charts that utilizes a CSV, this is what I was trying to recreate
My working continuous axis chart running off hard coded data
My current state of the chart now that I've tried to implement the change.
Here is #1:
function drawPieVisualization() {
$.get("Thornton.M2.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// CAPACITY - En-route ATFM delay - YY - CHART
var pieMain = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'pieMain',
dataTable: data,
options:{
title: 'Bar Chart Test',
'vAxis': { title: "Bar Chart Test" },
'width': 1100,
'height': 540,
'backgroundColor': 'Ivory',
'color':'Black',
'hAxis': {
title: "Date",
gridlines: { count: 3, color: '#CCC' },
format: 'dd-MMM-yyyy'
},
title: 'Bar Chart Test',
titleTextStyle : {color: 'Black', fontSize: 16},
}
});
pieMain.draw();
});
}
google.setOnLoadCallback(drawPieVisualization)
changeRange = function() {
pieMain.sort({column: 0, desc: false});
pieMain.draw();
};
changeRangeBack = function() {
pieMain.sort({column: 0, desc: true});
pieMain.draw();
};
Here is #2:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Value');
// add 100 rows of pseudo-random-walk data
for (var i = 0, val = 50; i < 100; i++) {
val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
if (val < 0) {
val += 5;
}
if (val > 100) {
val -= 5;
}
data.addRow([new Date(2014, 0, i + 1), val]);
}
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'slider_chart_div',
options: {
'title': 'Average Ratings',
'vAxis': { title: "Average Rating" },
'backgroundColor': 'Ivory',
'color':'Black',
width: 1100,
height: 400,
// omit width, since we set this in CSS
chartArea: {
width: '75%' // this should be the same as the ChartRangeFilter
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
'backgroundColor': 'Ivory',
'color':'Black',
width: 1100,
height: 50,
// omit width, since we set this in CSS
chartArea: {
width: '75%' // this should be the same as the ChartRangeFilter
}
}
}
}
});
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
function zoomLastDay () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
end: range.max
}
});
control.draw();
}
function zoomLastWeek () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
end: range.max
}
});
control.draw();
}
function zoomLastMonth () {
// zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
// eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
// you can tweak this to make it function differently if you want
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
end: range.max
}
});
control.draw();
}
var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
google.visualization.events.removeListener(runOnce);
if (document.addEventListener) {
document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
}
else if (document.attachEvent) {
document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
}
else {
document.querySelector('#lastDay').onclick = zoomLastDay;
document.querySelector('#lastWeek').onclick = zoomLastWeek;
document.querySelector('#lastMonth').onclick = zoomLastMonth;
}
});
}
And Here is #3:
function drawVisualization() {
$.get("Source7Days.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'slider_chart_div',
dataTable: data,
options: {
'title': 'Average Ratings',
'vAxis': { title: "Average Rating" },
'backgroundColor': 'Ivory',
'color':'Black',
width: 1100,
height: 400,
// omit width, since we set this in CSS
chartArea: {
width: '75%' // this should be the same as the ChartRangeFilter
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
'backgroundColor': 'Ivory',
'color':'Black',
width: 1100,
height: 50,
// omit width, since we set this in CSS
chartArea: {
width: '75%' // this should be the same as the ChartRangeFilter
}
}
}
}
});
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
function zoomLastDay () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
end: range.max
}
});
control.draw();
}
function zoomLastWeek () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
end: range.max
}
});
control.draw();
}
function zoomLastMonth () {
// zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
// eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
// you can tweak this to make it function differently if you want
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
end: range.max
}
});
control.draw();
}
var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
google.visualization.events.removeListener(runOnce);
if (document.addEventListener) {
document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
}
else if (document.attachEvent) {
document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
}
else {
document.querySelector('#lastDay').onclick = zoomLastDay;
document.querySelector('#lastWeek').onclick = zoomLastWeek;
document.querySelector('#lastMonth').onclick = zoomLastMonth;
}
});
}
)}
And here is a sample of the CSV Data I'm utilizing
Time,Value
2017/05/22 00:05:00,6710.4305066168
2017/05/22 00:10:00,6667.5043776631
2017/05/22 00:15:00,6615.6655550003
2017/05/22 00:20:00,6554.988194257
2017/05/22 00:25:00,6532.4164219201
2017/05/22 00:30:00,6520.8965539932
The bottom part 'runOnce' in both #2 and #3 are to change the slider control on the chart from 1 day - 1 week - or 1 month of range on the chart, for clarification.
My chart is currently giving me the errors:
One or more participants failed to draw(). (Two of these)
And
The filter cannot operate on a column of type string. Column type must
be one of: number, date, datetime or timeofday. Column role must be
domain, and correlate to a continuous axis.
the second error message reveals that arrayToDataTable
creates the first column as --> type: 'string'
instead of --> type: 'date'
use a DataView to convert the string to a date
you can create calculated columns in a data view using method --> setColumns
use view in place of data when drawing the dashboard
see following snippet...
$.get("Source7Days.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
// this is a static method, "new" keyword should not be used here
var data = google.visualization.arrayToDataTable(arrayData);
// create view
var view = new google.visualization.DataView(data);
view.setColumns([
// first column is calculated
{
calc: function (dt, row) {
// convert string to date
return new Date(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'date'
},
// just use index # for second column
1
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'slider_chart_div',
options: {
title: 'Average Ratings',
vAxis: { title: 'Average Rating' },
backgroundColor: 'Ivory',
color: 'Black',
width: 1100,
height: 400,
chartArea: {
width: '75%'
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
backgroundColor: 'Ivory',
color: 'Black',
width: 1100,
height: 50,
chartArea: {
width: '75%'
}
}
}
}
});
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [chart]);
// use data view
dashboard.draw(view);
...
Related
I'm new to coding but over the last several months I've managed to fumble my way through creating a web site that utilises a Google Line Chart and embedded linear trendline to display historical Mean Sea Level and the rate of Mean Sea Level rise for various locations around New Zealand and the Pacific. Each location has it's own Google Line Chart with a linear trendline to show the rate of Mean Sea Level Change for a user selected period. I now want to extend the functionality of each Google Line Chart such that both a linear and polynomial trendline extend to the year 2120 (they currently only show up to the year 2018) even though the available data from which they are calculated uses observed data up to the year 2018. This will allow the user to predict the sea level height up to the year 2020. I realise this explanation may be confusing, so please see my web site www.sealevel.nz to see the existing charts which I hope will aid in understanding my problem.
Below is the code for the extended version of the chart that shows both a linear and second degree polynomial trendline with the x axis of the Google Line Chart now showing up the year 2120. My problem is that I need the y axis to adjust dynamically to show the entirety of both trendlines no matter which time period the user selects. For example if you select the years 1971 and 2018 from the date range slider, then both trendlines are cut off at the years 2017 (linear) and 2031 (polynomial) respectively. I need to be able to see both trendlines and their values up to the year 2120.
Please excuse my novice coding skills. My Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://unpkg.com/mathjs/dist/math.min.js"></script>
<script type="text/javascript">
google.load('visualization', 'current', {'packages':['controls','corechart']});
google.setOnLoadCallback(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1vn1iuhsG33XzFrC4QwkTdUnxOGdcPQOj-cuaEZeX-eA/edit#gid=0');
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
//Asign units of 'mm' to data.
var formatMS = new google.visualization.NumberFormat({
pattern: '# mm'
});
// format into data mm..
for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {
formatMS.format(data, colIndex);
}
var YearPicker = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Year',
'ui': {
cssClass: 'filter-date',
'format': { pattern: '0000' },
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
});
var MSLChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'fontSize': '14',
'title': 'Timbucktoo Annual Mean Sea Level Summary',
hAxis: {title: 'Year', format:'0000', maxValue: 2120},
vAxis: {title: 'Height above Chart Datum (mm)', format:'0000'},
'height': 600,
chartArea: {height: '81%', width: '85%', left: 100},
'legend': {'position': 'in', 'alignment':'end', textStyle: {fontSize: 13} },
colors: ['blue'],
trendlines: {
0: {
type: 'polynomial',
degree: 2,
color: 'green',
visibleInLegend: true,
},
1: {
type: 'linear',
color: 'black',
visibleInLegend: true,
},
},
series: {
0: { visibleInLegend: true },
1: { visibleInLegend: false },
},
},
'view': {'columns': [0,1,2]}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(YearPicker, MSLChart).
draw(data)
</script>
first, I'm not sure why the chart would draw a trend line that isn't visible
which makes this a bit tricky, because we first have to draw the chart,
in order to find the min & max y-axis values.
but there are chart methods we can use to find the max value.
first, we get the chart's layout interface.
var chartLayout = MSLChart.getChart().getChartLayoutInterface();
since we're using a ChartWrapper, we have to get the chart from the wrapper (MSLChart.getChart()).
next, we use method getBoundingBox to find the min & max values of each line.
var yAxisCoords = {min: null, max: null};
var lineIndex = 0;
var boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
do {
yAxisCoords.max = yAxisCoords.max || boundsLine.top;
yAxisCoords.max = Math.min(yAxisCoords.max, boundsLine.top);
yAxisCoords.min = yAxisCoords.min || (boundsLine.top + boundsLine.height);
yAxisCoords.min = Math.max(yAxisCoords.min, (boundsLine.top + boundsLine.height));
lineIndex++;
boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
} while (boundsLine !== null);
then we use method getVAxisValue to determine what each y-axis value should be,
set the viewWindow on the y-axis, and re-draw the chart.
MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
MSLChart.draw();
we do all this in a function.
we use a one time 'ready' event on the chart wrapper for the first calculation.
then again, on the chart.
google.visualization.events.addOneTimeListener(MSLChart, 'ready', filterChange);
function filterChange() {
// get chart layout
var chartLayout = MSLChart.getChart().getChartLayoutInterface();
// get y-axis bounds
var yAxisCoords = {min: null, max: null};
var lineIndex = 0;
var boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
do {
yAxisCoords.max = yAxisCoords.max || boundsLine.top;
yAxisCoords.max = Math.min(yAxisCoords.max, boundsLine.top);
yAxisCoords.min = yAxisCoords.min || (boundsLine.top + boundsLine.height);
yAxisCoords.min = Math.max(yAxisCoords.min, (boundsLine.top + boundsLine.height));
lineIndex++;
boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
} while (boundsLine !== null);
// re-draw chart
MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
MSLChart.draw();
google.visualization.events.addOneTimeListener(MSLChart.getChart(), 'ready', filterChange);
}
see following working snippet...
(when you run the snippet, click "full page" at the top right)
google.charts.load('current', {
packages: ['controls']
}).then(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1vn1iuhsG33XzFrC4QwkTdUnxOGdcPQOj-cuaEZeX-eA/edit#gid=0');
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
//Asign units of 'mm' to data.
var formatMS = new google.visualization.NumberFormat({
pattern: '# mm'
});
// format into data mm..
for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {
formatMS.format(data, colIndex);
}
var YearPicker = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'Year',
ui: {
cssClass: 'filter-date',
format: {pattern: '0000'},
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
},
});
var MSLChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
fontSize: '14',
title: 'Timbucktoo Annual Mean Sea Level Summary',
hAxis: {title: 'Year', format: '0000', maxValue: 2120},
vAxis: {title: 'Height above Chart Datum (mm)', format:'###0'},
height: 600,
chartArea: {height: '81%', width: '85%', left: 100},
legend: {position: 'in', alignment: 'end', textStyle: {fontSize: 13}},
colors: ['blue'],
trendlines: {
0: {
type: 'polynomial',
degree: 2,
color: 'green',
visibleInLegend: true,
},
1: {
type: 'linear',
color: 'black',
visibleInLegend: true,
},
},
series: {
0: { visibleInLegend: true },
1: { visibleInLegend: false },
},
},
view: {columns: [0,1,2]}
});
google.visualization.events.addOneTimeListener(MSLChart, 'ready', filterChange);
function filterChange() {
// get chart layout
var chartLayout = MSLChart.getChart().getChartLayoutInterface();
// get y-axis bounds
var yAxisCoords = {min: null, max: null};
var lineIndex = 0;
var boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
do {
yAxisCoords.max = yAxisCoords.max || boundsLine.top;
yAxisCoords.max = Math.min(yAxisCoords.max, boundsLine.top);
yAxisCoords.min = yAxisCoords.min || (boundsLine.top + boundsLine.height);
yAxisCoords.min = Math.max(yAxisCoords.min, (boundsLine.top + boundsLine.height));
lineIndex++;
boundsLine = chartLayout.getBoundingBox('line#' + lineIndex);
} while (boundsLine !== null);
// re-draw chart
MSLChart.setOption('vAxis.viewWindow.max', chartLayout.getVAxisValue(yAxisCoords.max));
MSLChart.setOption('vAxis.viewWindow.min', chartLayout.getVAxisValue(yAxisCoords.min));
MSLChart.draw();
google.visualization.events.addOneTimeListener(MSLChart.getChart(), 'ready', filterChange);
}
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div')
).bind(YearPicker, MSLChart).draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="chart_div"></div>
<div id="filter_div"></div>
</div>
note: it appears you're using an old load statement, to load google chart.
see above snippet for update...
I have a category filtering combochart, which is perfectly working with the following code:
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
// you can comment out this next line if you want to have a default selection other than the whole list
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'myPieChart2',
dataTable: data,
options: {
height: 300,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Flight Hours (min)'
},
title: 'Annual Flight Times by Pilot',
bar: {groupWidth: '90%'},
seriesType: 'bars',
series: {
0: {type: 'line',
lineDashStyle: [4, 4]},
1: {type: 'line',
lineDashStyle: [14, 2, 2, 7]},
}
//theme: 'material'
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div2',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Pilots',
allowTyping: false,
allowMultiple: true,
allowNone: false,
//selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
});
In my data, first two columns (Series 0 and Series 1) belongs to Total and Average of the relevant months. So, I would like to make them constant, which means that they can not be closed (See the image).
Alternatively, if there is a method to exclude them from dropdown & filtering options, but still show at the chart, this can be accepted. In the end, I would like to prevent user to close these items.
How can I do that? I spent two hours for it but still I am stucked.
Thanks for your help in advance.
To change the point size, I set pointsize to 10 (for example).
options: {
pointSize: 10,
}
I would like to add a border to this point. Any idea ?
using a data view, you can apply a style to all the rows using a column role...
here, the view will include columns 0, 1 from the data,
and add a third calculated column for the style...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return 'point {stroke-color: #F00; stroke-width: 2;}';
},
role: 'style',
type: 'string'
}]);
then you must use the view when drawing the dashboard...
dashboard.draw(view);
see following working snippet...
google.charts.load('current', {packages: ['corechart', 'controls'],'language': 'fr'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1AOVg0jYaDvoHQeXBcDtJ6HdkBkkcQhEBi9Xo_crOvlk/edit?usp=sharing');
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
options: {
// width and chartArea.width should be the same for the filter and chart
height: 400,
colors: ['#4aadde'],
curveType: 'function',
pointSize: 5,
chartArea: {
width: '75%'
},
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'},format: 'd MMM yyyy' },
vAxis: {minValue: 0}
}
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
return 'point {stroke-color: #F00; stroke-width: 2;}';
},
role: 'style',
type: 'string'
}]);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
'chartType': 'AreaChart',
chartOptions: {
height: 50,
areaOpacity: 0.9,
colors: ['#5dade0'],
chartArea: {
width: '75%'
}
},
minRangeSize: 86400000, // 86400000ms = 1 day
snapToData: true
}
},
state: {
range: {
// set the starting range to January 2012
start: new Date(2017, 05, 15),
}
}
});
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(view);
function zoomLastDay () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
end: range.max
}
});
control.draw();
}
function zoomLastWeek () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
end: range.max
}
});
control.draw();
}
function zoomLastMonth () {
// zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
// eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
// you can tweak this to make it function differently if you want
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
end: range.max
}
});
control.draw();
}
var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
google.visualization.events.removeListener(runOnce);
if (document.addEventListener) {
document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
}
else if (document.attachEvent) {
document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
}
else {
document.querySelector('#lastDay').onclick = zoomLastDay;
document.querySelector('#lastWeek').onclick = zoomLastWeek;
document.querySelector('#lastMonth').onclick = zoomLastMonth;
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<input id="lastDay" type="button" value="Hier" />
<input id="lastWeek" type="button" value="Dernière semaine" />
<input id="lastMonth" type="button" value="Dernier mois" />
<div id="chart_div"></div>
<div id="control_div"></div>
</div>
note: the following line (last in the fiddle) is for the old jsapi library
it isn't needed and should be removed...
google.load('visualization', '1', {packages:['controls'], callback: drawChart});
I am working on a small class to handle Google Chart and for some odd reason I keep getting
googleChart.js:86 Uncaught TypeError: this.swapChart is not a function
On the page I have a button with id "btnSwitch", click on which triggers a switch of the chart from chart view to the table view and vice-versa. This is defined within this.addChartSwitchListener() and called within this.init_chart()
I can call this.swapChart() within init method so I have to assume that issue is with:
_button.addEventListener('click', this.switchChart, false);
Here is my code below:
google.load('visualization', '1.0', {'packages': ['charteditor', 'controls']});
//google.setOnLoadCallback(drawDashboard);
var GChart = GChart || (function () {
var _graphType;
var _minTime;
var _maxTime;
var _hAxisTitle;
var _vAxisTitle;
var _tableData;
var _data;
var _dashboard;
var _lineChart;
var _button;
var _showChart;
return {
init: function (tableData, graphType, minTime, maxTime, hAxisTitle, vAxisTitle) {
// google charts
//_google = google;
_tableData = tableData;
// load chart params
_graphType = graphType;
_minTime = minTime;
_maxTime = maxTime;
_hAxisTitle = hAxisTitle;
_vAxisTitle = vAxisTitle;
// some other initialising
this.build_googlechart();
},
build_googlechart: function ()
{
this.init_chart();
// also tried this - with the same result.
// google.load('visualization', '1.0', {'packages':['corechart'], 'callback': this.drawChart});
},
init_chart: function ()
{
// var data = new google.visualization.DataTable();
_data = new google.visualization.DataTable(_tableData);
// Create a dashboard.
_dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
if (_graphType === 'LineChart') {
this.lineChart();
} else {
this.columnChart();
}
this.addChartSwitchListener();
},
addChartSwitchListener: function ()
{
_button = document.getElementById('btnSwitch');
_button.addEventListener('click', this.switchChart, false);
_showChart = "Chart";
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(_lineChart, 'ready', function () {
if (_showChart !== 'Table') {
$('.save_chart').show();
$('.save_chart').removeClass('disabled');
$('.save_chart').attr('href', _lineChart.getChart().getImageURI());
$('#filter_div').show();
} else {
$('.save_chart').hide();
$('#filter_div').hide();
}
});
},
swapChart: function ()
{
var chart = "Table";
if (_showChart === "Chart") {
chart = _graphType;
}
_lineChart.setChartType(chart);
_lineChart.setOptions(this.getOptions(_showChart));
_lineChart.draw();
},
switchChart: function ()
{
_showChart = _button.value;
this.swapChart();
_showChart = (_showChart === 'Table') ? 'Chart' : 'Table';
_button.value = _showChart;
},
getOptions: function (chartType)
{
var options;
switch (chartType) {
case 'Chart':
options = {
backgroundColor: {
fill: 'transparent'
},
legend: 'right',
pointSize: 5,
crosshair: {
trigger: 'both'
},
hAxis: {
},
vAxis: {
}
};
break;
case 'Table':
options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
break;
default:
options = {};
}
return options;
},
lineChart: function ()
{
var lineChartRangeFilter = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
backgroundColor: {fill: 'transparent'},
height: '50',
chartArea: {
width: '90%'
}
}
}
}
});
// Create a pie chart, passing some options
_lineChart = new google.visualization.ChartWrapper({
'chartType': "LineChart",
'containerId': 'chart_div',
'options': {
backgroundColor: {fill: 'transparent'},
'legend': 'right',
'pointSize': 5,
crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection.
hAxis: {
title: _hAxisTitle,
viewWindow: {
min: _minTime,
max: _maxTime
},
},
vAxis: {
title: _vAxisTitle
}
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
_dashboard.bind(lineChartRangeFilter, _lineChart);
// Draw the dashboard.
_dashboard.draw(_data);
},
columnChart: function () {
_lineChart = new google.visualization.ChartWrapper({
'chartType': "ColumnChart",
'containerId': 'chart_div',
'dataTable': _data,
'options': {backgroundColor: {fill: 'transparent'},
'legend': 'right',
'pointSize': 5,
crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection.
hAxis: {
title: _hAxisTitle,
},
vAxis: {
title: _vAxisTitle,
}
}
});
_lineChart.draw();
}
};
}());
This is because you pass a reference to that method to addEventListener, which will later be called with the window object as context, and not your this object.
To overrule this behaviour, you can use several solutions, but here is one with bind():
_button.addEventListener('click', this.switchChart.bind(this), false);
I am writing to seek help, in how do can I create multi-series line chart from [name] column below. Currently, I am plotting the chart using [date] and [tag] points. However, I would like to show multi-series line chart for each names. Is this plausible or does this task require manual functions to be created to link in with the API.
Please advice.
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Tag', 'Date'],
['ACCA', 45, 'May 14'],
['ABBA', 85, 'May 14'],
['ANNA', 100, 'May 14'],
['AMMA', 100.5, 'May 14'],
['ACCA', 99.5, 'May 15'],
['ABBA', 85.5, 'May 15'],
['ACCA', 99.6, 'May 15'],
['BACM', 94, 'May 15'],
['MMBS', 96, 'May 15']
]);
// Define category pickers for 'Name',
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Name',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1',
'options': {
'width': 400,
'height': 300,
'chartArea': { top: 0, right: 0, bottom: 0 }
},
// Configure the Linechart to use columns 2 (Date) and 1 (Tag)
'view': { 'columns': [2, 1] }
});
// Define a table.
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [barChart, table]).draw(data);
}
Edit:
Thanks.
To make this work, I would suggest removing the LineChart from your Dashboard, and using the Table's "ready" event to get the filtered data, create appropriate settings for the chart's view.columns parameter, and then drawing the chart with the filtered data:
google.visualization.events.addListener(table, 'ready', function () {
var filteredData = table.getDataTable();
// get a list of all the labels in column 0
var group = filteredData.getDistinctValues(0);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.length; i++) {
var label = group[i];
// set the columns to use in the chart's view
// calculated columns put data belonging to each country 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)
});
}
var view = barChart.getView() || {};
view.columns = columns;
barChart.setView(view);
barChart.setDataTable(filteredData);
barChart.draw();
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [table]).draw(data);