I am not able to create a logarithmic vertical axis for my material Google Line Chart. Documentation states that I should set vAxis.logScale to true in the options, but this leads to no result.
Currently my test reads:
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { "packages": [ "line", "corechart" ]});
google.charts.setOnLoadCallback(function() {
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows([
[ new Date(2016, 0, 27), 684130172, -1 ], [ new Date(2016, 0, 28), 684189642, -1 ], [ new Date(2016, 0, 29), 684837381, 122895 ], [ new Date(2016, 0, 30), 685595817, 238244 ], [ new Date(2016, 0, 31), 686690845, 239450 ], [ new Date(2016, 1, 1), 688391639, 536141 ], [ new Date(2016, 1, 2), 691181274, 1651530 ], [ new Date(2016, 1, 3), 693040518, 1698813 ], [ new Date(2016, 1, 4), 694335907, 2271617 ], [ new Date(2016, 1, 5), 694978502, 2314718 ], [ new Date(2016, 1, 6), 696142818, 2314758 ], [ new Date(2016, 1, 7), 698869181, 3234042 ], [ new Date(2016, 1, 8), 700446296, 3338104 ], [ new Date(2016, 1, 9), 705552668, 6175539 ], [ new Date(2016, 1, 10), 707540295, 6812427 ], [ new Date(2016, 1, 11), 707766077, 6831641 ], [ new Date(2016, 1, 12), 707922926, 6839607 ], [ new Date(2016, 1, 13), 708061736, 6883806 ], [ new Date(2016, 1, 14), 713986011, 10366780 ], [ new Date(2016, 1, 15), 717491978, 12527120 ], [ new Date(2016, 1, 16), 719057078, 12794871 ], [ new Date(2016, 1, 17), 723813184, 14959625 ], ]);
var chart = new google.charts.Line($(".chart")[0]);
chart.draw(data, {
chart: {
title: "History for ..."
},
height: 400,
width: 800,
vAxis: {
logScale: true,
minValue: 0
}
});
});
</script>
And produces:
I have used a lot of combinations of options but I haven't yet produced any logarithmic result.
The reason that these features are not working is because the 'line' package that you are loading and the google.charts.Line(...) object that you are using are creating what Google calls a Material Chart.
This is a completely redesigned implementation of the Google Visualization API adhering to Google's "Material Design" specification and is still currently in beta (see details here).
A lot of the features found in what they call the "Classic" chart library have not yet been carried over to the "Material Design" charts (see this Github issue).
You can solve your issue by using the older (but much better supported) Google Visualization "Classic" corechart package. In this case you have to replace only one line in your code. Instead of:
var chart = new google.charts.Line($(".chart")[0]);
you have to write this line:
var chart = new google.visualization.LineChart($(".chart")[0]);
Or, if you do not want to use jQuery (you do not need it) then replace it with this line:
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
and delete jQuery calling.
Complete solution
google.charts.load("current", {"packages": ["line", "corechart"]});
google.charts.setOnLoadCallback(function()
{
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows(
[
[new Date(2016, 0, 27), 684130172, -1],
[new Date(2016, 0, 28), 684189642, -1],
[new Date(2016, 0, 29), 684837381, 122895],
[new Date(2016, 0, 30), 685595817, 238244],
[new Date(2016, 0, 31), 686690845, 239450],
[new Date(2016, 1, 1), 688391639, 536141],
[new Date(2016, 1, 2), 691181274, 1651530],
[new Date(2016, 1, 3), 693040518, 1698813],
[new Date(2016, 1, 4), 694335907, 2271617],
[new Date(2016, 1, 5), 694978502, 2314718],
[new Date(2016, 1, 6), 696142818, 2314758],
[new Date(2016, 1, 7), 698869181, 3234042],
[new Date(2016, 1, 8), 700446296, 3338104],
[new Date(2016, 1, 9), 705552668, 6175539],
[new Date(2016, 1, 10), 707540295, 6812427],
[new Date(2016, 1, 11), 707766077, 6831641],
[new Date(2016, 1, 12), 707922926, 6839607],
[new Date(2016, 1, 13), 708061736, 6883806],
[new Date(2016, 1, 14), 713986011, 10366780],
[new Date(2016, 1, 15), 717491978, 12527120],
[new Date(2016, 1, 16), 719057078, 12794871],
[new Date(2016, 1, 17), 723813184, 14959625]
]);
//var chart = new google.charts.Line($(".chart")[0]);
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
chart.draw(data,
{
chart: {title: "History for ..."},
height: 400,
width: 800,
vAxis:
{
logScale: true,
minValue: 0
}
});
});
<div class="chart"></div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
Is this what you need?
This is the only change needed:
var chart = new google.visualization.LineChart($(".chart")[0]);
Here are the interactive docs with links to JSFiddle examples
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { "packages": [ "line", "corechart" ]});
google.charts.setOnLoadCallback(function() {
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "1");
data.addColumn("number", "2");
data.addRows([
[ new Date(2016, 0, 27), 684130172, -1 ], [ new Date(2016, 0, 28), 684189642, -1 ], [ new Date(2016, 0, 29), 684837381, 122895 ], [ new Date(2016, 0, 30), 685595817, 238244 ], [ new Date(2016, 0, 31), 686690845, 239450 ], [ new Date(2016, 1, 1), 688391639, 536141 ], [ new Date(2016, 1, 2), 691181274, 1651530 ], [ new Date(2016, 1, 3), 693040518, 1698813 ], [ new Date(2016, 1, 4), 694335907, 2271617 ], [ new Date(2016, 1, 5), 694978502, 2314718 ], [ new Date(2016, 1, 6), 696142818, 2314758 ], [ new Date(2016, 1, 7), 698869181, 3234042 ], [ new Date(2016, 1, 8), 700446296, 3338104 ], [ new Date(2016, 1, 9), 705552668, 6175539 ], [ new Date(2016, 1, 10), 707540295, 6812427 ], [ new Date(2016, 1, 11), 707766077, 6831641 ], [ new Date(2016, 1, 12), 707922926, 6839607 ], [ new Date(2016, 1, 13), 708061736, 6883806 ], [ new Date(2016, 1, 14), 713986011, 10366780 ], [ new Date(2016, 1, 15), 717491978, 12527120 ], [ new Date(2016, 1, 16), 719057078, 12794871 ], [ new Date(2016, 1, 17), 723813184, 14959625 ], ]);
var chart = new google.visualization.LineChart($(".chart")[0]);
chart.draw(data, {
chart: {
title: "History for ..."
},
height: 400,
width: 800,
vAxis: {
logScale: true,
minValue: 0
}
});
});
</script>
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>
I follow the documentation on axes customization here but it does not say how to customize the date format on the AXES, only on the columns.
I need my axes format to be "dd/MM/yy" but unable to achieve such a simple taks...
Here is the codepen
google.charts.load("current", {
packages: ["line"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "A", "B", "C", "D", "E", "F"],
[new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128],
[new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134],
[new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148],
[new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151],
[new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195],
[new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140],
[new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131],
[new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141],
[new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031],
[new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966]
]);
var options = {
chart: { title: "my graph" },
curveType: "function",
legend: { position: "none" },
axes: {
x: {
0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" }
}
},
hAxis: { format: "dd/MM/yyyy" },
vAxis: { format: "MMM d, y" }
};
var chart = new google.charts.Line(document.getElementById("curve_chart"));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="curve_chart"></div>
</div>
</div>
</div>
there are several options that are not supported by material charts.
see --> Tracking Issue for Material Chart Feature Parity
material chart --> google.charts.Line -- packages: ["line"]
classic chart --> google.visualization.LineChart -- packages: ["corechart"]
for the options that are supported by material charts,
you need to convert those option to material options before drawing the chart...
google.charts.Line.convertOptions(options)
see following working snippet...
google.charts.load("current", {
packages: ["line"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "A", "B", "C", "D", "E", "F"],
[new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128],
[new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134],
[new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148],
[new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151],
[new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195],
[new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140],
[new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131],
[new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141],
[new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031],
[new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966]
]);
var options = {
chart: { title: "my graph" },
curveType: "function",
legend: { position: "none" },
axes: {
x: {
0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" }
}
},
hAxis: { format: "dd/MM/yyyy" }
};
var chart = new google.charts.Line(document.getElementById("curve_chart"));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="curve_chart"></div>
</div>
</div>
</div>
note: in the above chart, the y-axis contains numbers,
a date format will not work on the vAxis...
vAxis: { format: "MMM d, y" } // <-- removed from above snippet
EDIT
when loading google charts, the default locale is --> 'en'
to load a different locale, specify the language in the load statement...
google.charts.load("current", {
packages: ["line"],
language: "fr"
});
I am working with one of their examples, in essence I need this functionality with the addition of when you hover over one of the values on the chart, I need a 4th data element.
The example here is superbowl winning football teams. When you hover over one of the time series items, I would also like to show the score of the game. (I need this chart with one more piece of addition text data in the hover.
This code is directly from googles example:
google.charts.load('current', {
'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Asset');
data.addColumn('date', 'Arrive');
data.addColumn('date', 'Depart');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5)],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)],
]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
there are no standard configuration options to change the default tooltip
but you can add your own custom tooltip, see Customizing tooltips in the Timeline reference
in order to add a custom tooltip, you must provide all 5 columns in the data table.
(row label, bar label, tooltip, start, and end)
the tooltip column will just be a string, either a simple value or html
see following working snippet,
here, a DataView is used to add the tooltip column.
this allows the tooltip to be built dynamically based on the data in the data table
also, the score of the game is added to the original data table, for easy reference,
but is excluded from the data view...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Asset');
data.addColumn('date', 'Arrive');
data.addColumn('date', 'Depart');
data.addColumn('string', 'Score');
data.addRows([
['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5), '35 - 21'],
['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5), '35 - 21'],
['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5), '35 - 21'],
['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5), '35 - 21'],
['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5), '35 - 21'],
['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5), '35 - 21'],
['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5), '35 - 21'],
['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5), '35 - 21'],
['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5), '35 - 21'],
['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5), '35 - 21'],
['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5), '35 - 21'],
['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5), '35 - 21'],
['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5), '35 - 21'],
]);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, {
label: 'bar label',
type: 'string',
calc: function () {
return null;
}
}, {
role: 'tooltip',
type: 'string',
calc: function (dt, row) {
// build tooltip
var dateBegin = dt.getValue(row, 1);
var dateEnd = dt.getValue(row, 2);
var oneDay = (24 * 60 * 60 * 1000);
var duration = (((dateEnd.getTime() - dateBegin.getTime()) / oneDay) / 365.25) * 12;
var tooltip = '<div><div class="ggl-tooltip"><span>';
tooltip += dt.getValue(row, 0) + '</span></div>';
tooltip += '<div class="ggl-tooltip"><div>' + formatMonth.formatValue(dateBegin) + ' - ';
tooltip += formatMonth.formatValue(dateEnd) + '</div>';
tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' months</div></div>';
tooltip += '<div class="ggl-tooltip"><span>Score: </span>' + dt.getValue(row, 3) + '</div></div>';
return tooltip;
},
p: {html: true}
}, 1, 2]);
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(view.toDataTable(), options); // <-- use data view to draw chart
});
.ggl-tooltip {
background-color: #ffffff;
border: 1px solid #e0e0e0;
font-family: Arial, Helvetica;
font-size: 14px;
padding: 8px;
}
.ggl-tooltip div {
margin-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
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 have a data group taken from a table of sales for the year. The group has two columns: Sale Type (e.g. Cash, Lease, etc.), and Count which is just an aggregation on the date field.
I can get a pie chart easy enough. Now I want to add a category picker that will allow the user to change the pie chart by picking a year. How can I do that?
Here is my code so far:
var dashboard = new google.visualization.Dashboard(
document.getElementById( 'dashboard_div' ) );
var categoryPicker = new google.visualization.ControlWrapper( {
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Year:',
'allowTyping': false,
'allowMultiple': false
}
}
} );
var groupedData = google.visualization.data.group(
gDataTableSales,
[ { column: 3, type: 'string', label: 'Type' } ],
[ { column: 2, aggregation: google.visualization.data.count, type: 'number', label: 'Count' } ] );
var chart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div' });
dashboard.bind( [ categoryPicker ], [ chart ] );
dashboard.draw( groupedData );
The chart and category picker get rendered and I can select the count and the chart is updated suggesting that the mechanics are working as expected.
the data format for a PieChart is different from the other core charts
the data needs to be in rows, rather than columns
there can only be one series
one option would be to use two aggregations...
Year, Category, Count
Category, Count
the second is only needed if you want to allow selection of "All Years", or
use --> allowNone: true -- which is the default
instead of binding the category filter and chart in a dashboard, draw them independently
use the filter's statechange event to determine which data table to draw
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['controls']
});
function drawChart() {
var dataTableSales = google.visualization.arrayToDataTable([
['Sale Date', 'Sale Type'],
[new Date(2016, 0, 16), 'cash sale'],
[new Date(2016, 0, 16), 'cash sale'],
[new Date(2016, 0, 16), 'leased'],
[new Date(2016, 0, 16), 'leased'],
[new Date(2016, 0, 16), 'financed'],
[new Date(2017, 0, 16), 'cash sale'],
[new Date(2017, 0, 16), 'cash sale'],
[new Date(2017, 0, 16), 'cash sale'],
[new Date(2017, 0, 16), 'financed'],
[new Date(2016, 0, 17), 'cash sale'],
[new Date(2016, 0, 17), 'financed'],
[new Date(2016, 0, 17), 'cash sale'],
[new Date(2016, 0, 17), 'leased'],
[new Date(2016, 0, 17), 'financed'],
[new Date(2017, 0, 17), 'financed'],
[new Date(2017, 0, 17), 'financed'],
[new Date(2017, 0, 17), 'cash sale'],
[new Date(2017, 0, 17), 'financed'],
[new Date(2016, 0, 18), 'leased'],
[new Date(2016, 0, 18), 'cash sale'],
[new Date(2017, 0, 18), 'cash sale'],
[new Date(2017, 0, 18), 'cash sale']
]);
dataTableSales.sort({column: 0});
var dataByYear = google.visualization.data.group(
dataTableSales,
[{
column: 0,
type: 'string',
modifier: function (value) {
return value.getFullYear().toString();
}
}, 1],
[{
column: 1,
type: 'number',
aggregation: google.visualization.data.count
}]
);
var dataAll = google.visualization.data.group(
dataTableSales,
[1],
[{
column: 1,
type: 'number',
aggregation: google.visualization.data.count
}]
);
var yearPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryFilter_div',
dataTable: dataByYear,
options: {
filterColumnIndex: 0,
ui: {
allowTyping: false,
allowMultiple: false,
caption: 'All Years',
label: '',
labelStacking: 'vertical'
},
useFormattedValue: true
}
});
google.visualization.events.addListener(yearPicker, 'statechange', function () {
if (yearPicker.getState().selectedValues.length > 0) {
pieChart.setView({
columns: [1, 2],
rows: dataByYear.getFilteredRows([{
column: 0,
value: yearPicker.getState().selectedValues[0]
}])
});
pieChart.setDataTable(dataByYear);
} else {
pieChart.setView(null);
pieChart.setDataTable(dataAll);
}
pieChart.draw();
});
yearPicker.draw();
var pieChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
dataTable: dataAll,
options: {
height: 300
}
});
pieChart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="categoryFilter_div"></div>
<div id="chart_div"></div>