I'm trying to use google line chart and everything works great except all the year's at the x axis are displayed as 2K instead of e.g. 2015, 2016.
Here are my test page: http://bokhald.trubador.is/bokhald/testGraf.html
Here are my code:
<html>
<head>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Altogether');
data.addColumn('number', 'Product 1');
data.addColumn('number', 'Product 2');
data.addRows([
[2009, 21, 13, 8], [2010, 32, 17, 15],
[2011, 48, 38, 10], [2012, 53, 34, 19],
[2013, 59, 44, 15], [2014, 56, 46, 10],
[2015, 56, 48, 8], [2016, 6, 5, 1]
]);
var options = {
height: 500,
axes: {
}
};
var chart = new google.charts.Line(document.getElementById('my_chart'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
</script>
</head>
<body>
<div id="my_chart"></div>
</body>
</html>
Change the date in the addColum to date and make the dates new javascript date objects, set format to yyyy for the x colons
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'Altogether');
data.addColumn('number', 'Product 1');
data.addColumn('number', 'Product 2');
data.addRows([
[new Date(2009,1,1), 21, 13, 8], [new Date(2010,1,1), 32, 17, 15],
[new Date(2011,1,1), 48, 38, 10], [new Date(2012,1,1), 53, 34, 19],
[new Date(2013,1,1), 59, 44, 15], [new Date(2014,1,1), 56, 46, 10],
[new Date(2015,1,1), 56, 48, 8], [new Date(2016,1,1), 6, 5, 1]
]);
var options = {
width: 1000,
height:500,
hAxis: {
format: 'yyyy',
gridlines: {count: 15}
},
axes: {
}
};
var chart = new google.charts.Line(document.getElementById('my_chart'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
https://developers.google.com/chart/interactive/docs/datesandtimes
https://jsfiddle.net/rzqa598j/2/
Related
I'm using google charts for my project and I have requirement of a chart both x-axis and y-axis labels should start from up to bottom , So In the below code x-axis points are moved to top , And now also i want to start the Y-axis point begin from top to bottom and not bottom to top. Here I written the code below, Can any one help us.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
},
y: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
`
there is an axis configuration option for: direction
The direction in which the values along the axis grow. Specify -1 to reverse the order of the values.
the problem here is that Material charts do not support this option,
see Tracking Issue for Material Chart Feature Parity...
and Classic charts do not have an option to present the x-axis on top.
however, we can manually modify the chart on the 'ready' event.
to resolve, we use a Classic chart, and reverse the order of the y-axis labels.
then manually move the x-axis labels to the top.
vAxis: {
direction: -1
}
but first, we must use the following option to create room at the top.
chartArea: {
top: 72
},
we must also move the title up slightly, to make room for the labels.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
width: 900,
height: 500,
chartArea: {
top: 72
},
vAxis: {
direction: -1
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function(label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
I'm using Google Charts' Annotation Chart to display data. Everything's working but it's not showing the volume section, as seen in this google finance chart that, I believe, uses the same chart.
Here's what I have so far, but I don't know how to include that section:
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
This is what the google finance chart looks like, but I can't seem to include the volume section marked in red:
the annotation chart does not include an option for the middle chart / volume section
this could be added manually by drawing another, separate chart
however, the second chart cannot be placed in between the annotation chart and it's range filter
as such, you would need to turn off the annotation's range filter
and draw your own ChartRangeFilter
typically, custom filters are bound to charts using a dashboard
however, while building the example for this answer,
i noticed the annotation chart doesn't re-draw properly
after the filter has been applied, and then removed,
the annotation chart does not return to the original state
to correct, need to create the annotation chart every time it is drawn
see following working snippet,
a column chart is used for the volume section
the range filter is bound manually using the 'statechange' event
google.charts.load('current', {
callback: drawDashboard,
packages: ['annotationchart', 'controls', 'corechart']
});
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Col1');
data.addColumn('string', 'Col2');
data.addColumn('string', 'Col3');
data.addColumn('number', 'Col4');
data.addColumn('string', 'Col5');
data.addColumn('string', 'Col6');
data.addRows([
[new Date(2017, 2, 15), 85, 'More', 'Even More',
91, undefined, undefined],
[new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
99, undefined, undefined],
[new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
96, 'Att', 'Good'],
[new Date(2017, 2, 18), 60, 'Sales', 'Low',
80, 'HR', 'Absences'],
[new Date(2017, 2, 19), 95, 'Sales', 'Goals',
85, 'HR', 'Vacation'],
[new Date(2017, 2, 20), 40, 'Sales', 'Training',
67, 'HR', 'PTO']
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
dataTable: data,
options: {
filterColumnLabel: 'Date',
ui: {
chartOptions: {
height: 60,
width: '100%',
chartArea: {
width: '100%'
},
chartType: 'AreaChart'
}
}
},
view: {
columns: [0, 1, 4]
}
});
google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);
rangeFilter.draw();
function drawCharts() {
var filterState = rangeFilter.getState();
var filterRows = data.getFilteredRows([{
column: 0,
minValue: filterState.range.start,
maxValue: filterState.range.end
}]);
var viewAnn = new google.visualization.DataView(data);
viewAnn.setRows(filterRows);
var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
var optionsAnn = {
displayAnnotations: false,
displayRangeSelector: false
};
chartAnn.draw(viewAnn, optionsAnn);
var viewCol = new google.visualization.DataView(data);
viewCol.setColumns([0, 1, 4]);
viewCol.setRows(filterRows);
var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
var optionsCol = {
hAxis: {
textStyle: {
color: 'transparent'
}
},
height: 72,
legend: 'none',
theme: 'maximized',
vAxis: {
textStyle: {
color: 'transparent'
}
}
};
chartCol.draw(viewCol, optionsCol);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_ann"></div>
<div id="chart_col"></div>
<div id="control_div"></div>
I'm trying to make a google chart with prices on the y-axis and dates on the x-axis. I don't understand why my code is not working. It is not displaying anything.
In header:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dato');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[new Date (2016, 8, 6), 378, 418],
[new Date (2016, 8, 13), 66, 324],
[new Date (2016, 8, 20), 254, 257],
[new Date (2016, 8, 27), 117, 105],
[new Date (2016, 9, 3), 119, 66],
[new Date (2016, 9, 10), 88, 77],
[new Date (2016, 9, 17), 76, 96],
[new Date (2016, 9, 24), 123, 106],
[new Date (2016, 10, 1), 66, 148],
[new Date (2016, 10, 8), 128, 116]
]);
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
},
legend: { position:'none' },
width: '100%',
pointSize: 10,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
};
var chart = new google.charts.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
In body:
<div id="linechart_material" class="chart"></div>
Any help will be much appreciated.
material charts use the namespace google.charts
core charts use the namespace google.visualization
so for core chart line chart -- google.visualization.LineChart
for material line chart -- google.charts.Line
see following snippet, which draws both...
for packages, use 'corechart' or 'line' for material
if using material, don't forget google.charts.Line.convertOptions
however, there are several options that won't work in material
recommend using corechart with option for theme: 'material'
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dato');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[new Date (2016, 8, 6), 378, 418],
[new Date (2016, 8, 13), 66, 324],
[new Date (2016, 8, 20), 254, 257],
[new Date (2016, 8, 27), 117, 105],
[new Date (2016, 9, 3), 119, 66],
[new Date (2016, 9, 10), 88, 77],
[new Date (2016, 9, 17), 76, 96],
[new Date (2016, 9, 24), 123, 106],
[new Date (2016, 10, 1), 66, 148],
[new Date (2016, 10, 8), 128, 116]
]);
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'Blå: Anbefalede priser, Rød: Nuværende priser'
},
legend: { position:'none' },
width: '100%',
pointSize: 10,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
hAxis: {
format: 'MM/dd/yyyy',
ticks: tickMarks
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
chart = new google.visualization.LineChart(document.getElementById('linechart_core'));
chart.draw(data, options);
},
packages: ['corechart', 'line']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material Chart</div>
<div id="linechart_material"></div>
<div>Core Chart</div>
<div id="linechart_core"></div>
I want to make a google line chart with a clickable lines but I seem to only be able to make the data points clickable. Is it possible to also make the line between the data points clickable?
use config option focusTarget: 'category'
when the line is clicked, the closest point will be selected.
although, in my current browser, I have to hold the point of the mouse,
~ 2px above the line before it will let me click.
but it does work versus focusTarget: 'datum',
which only allows the point to be clicked
see following, working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0],
[6, 11],
[12, 30],
[18, 52],
[24, 60],
[30, 55],
[36, 62],
[42, 63],
[48, 72],
[54, 71],
[60, 64],
[66, 70]
]);
// clickable line
new google.visualization.LineChart(document.getElementById('chart_div0')).draw(data, {
focusTarget: 'category'
});
// point only
new google.visualization.LineChart(document.getElementById('chart_div1')).draw(data, {
focusTarget: 'datum'
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>click line</div>
<div id="chart_div0"></div>
<div>point only</div>
<div id="chart_div1"></div>
EDIT
if focusTarget: 'category' doesn't work out,
another option would be to use the 'click' event
although, nothing is focused nor is a tooltip displayed, the line is still clickable.
but the location of the click needs to be fairly precise.
you can use targetID to determine what / which line was clicked...
see following snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X0');
data.addColumn('number', 'Y0');
data.addColumn('number', 'Y1');
data.addRows([
[0, 0, 0],
[6, 11, 7],
[12, 30, 13],
[18, 52, 19],
[24, 60, 25],
[30, 55, 31],
[36, 62, 37],
[42, 63, 43],
[48, 72, 49],
[54, 71, 55],
[60, 64, 61],
[66, 70, 67]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
google.visualization.events.addListener(chart, 'click', function (props) {
if (props.targetID.indexOf('line') > -1) {
var hAxis = chart.getChartLayoutInterface().getHAxisValue(props.x);
var vAxis = chart.getChartLayoutInterface().getVAxisValue(props.y);
document.getElementById('chart_div0').innerHTML = props.targetID + ' clicked at [' + hAxis + ', ' + vAxis + ']';
}
});
chart.draw(data, {
lineSize: 3,
pointSize: 5
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0">line click result shown here</div>
<div id="chart_div1"></div>
I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:
var options = {
width: 900,
height: 500,
}
What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.
Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.
1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".
Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.
But you could consider the following approach for adjusting the chart.
As an alternative for pointSize property,the point size could be specified via CSS:
#chart_div circle {
r: 3;
}
Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.
Complete example
google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var options = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 900,
height: 500,
axes: {
y: {
'hours studied': { label: 'Hours Studied' },
'final grade': { label: 'Final Exam Grade' }
}
},
series: {
0: { axis: 'hours studied' },
1: { axis: 'final grade' }
},
//pointSize: 10,
//lineWidth: 1
};
var chart = new google.charts.Scatter(document.getElementById('chart_div'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', configureChart);
}
function configureChart()
{
var chartContainer = document.getElementById('chart_div');
var options = {
pointSize: 3,
lineWidth: 1
};
drawLines(chartContainer,options);
}
function drawLines(chartContainer,options)
{
var points = chartContainer.getElementsByTagName('circle');
var area = {};
for(var i = 0; i < points.length;i++){
if(i > 0){
area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
}
}
}
function drawLine(chartContainer,area,color,width)
{
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1',area.start.x);
line.setAttribute('y1',area.start.y);
line.setAttribute('x2',area.end.x);
line.setAttribute('y2',area.end.y);
line.setAttribute('stroke-width',width);
line.setAttribute('stroke',color);
var svg = chartContainer.getElementsByTagName('svg')[0];
svg.appendChild(line);
}
#chart_div circle {
r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>