Let us suppose the following:
I have a dataset counting daily ticket sales.
It's relatively easy to use Google Line Chart and draw a chart displaying the count of tickets per day.
What I would like to be able to do is draw multiple lines comparing different time periods; for example, a blue line showing the daily ticket sales between 01-01-2020 through 01-31-2020, and then a red line showing the daily ticket sales between 02-01-2020 through 03-02-2020.
Is this something Google Line Charts naturally supports?
EDITED TO ADD EXAMPLE DATASET BECAUSE COMMENTS ARE HARD TO READ
Well, in the same way as you can have multiple Y-axes values across the same X-axes, this would be multiple X and Y axes sets of values, where the X axis values all have a 1:1 correspondence with one another.
So, one representation of the dataset would look like
[
[ ['2020-01-01', 50], ['2020-01-02, 75] ],
[ ['2020-02-01', 25], ['2020-02-02', 35] ]
]
(which would then be turned into a DataTable)
And would draw a chart with two lines; one corresponding to the January data, and one corresponding to the February data, where the dates share the x-axis
in google charts, the first column of the data table represents the x-axis values.
each additional column represents the y-axis values.
to plot two lines, requires three data table columns.
data.addColumn('number', 'Day');
data.addColumn('number', 'Jan')
data.addColumn('number', 'Feb')
and each line would need the same value for the x-axis.
you could just use 1 for the first day of the month.
[1, 50, 75]
google charts does have some features we can use to customize the appearance of the chart.
for instance, if you would like the tooltips for each line to display a different x-axis value,
you can use object notation when providing the data.
we can provide the value (v:) and the formatted value (f:).
the tooltips display the formatted value.
as such, the following data would plot on the same x-axis value,
however, the tooltips for each would display a different date.
[{v: 1, f: '2020-01-01'}, 50, null],
[{v: 1, f: '2020-02-01'}, null, 75],
see following working snippet for an example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Jan')
data.addColumn('number', 'Feb')
data.addRows([
[{v: 1, f: '2020-01-01'}, 50, null],
[{v: 1, f: '2020-02-01'}, null, 75],
[{v: 2, f: '2020-01-02'}, 25, null],
[{v: 2, f: '2020-02-02'}, null, 35],
[{v: 3, f: '2020-01-03'}, 20, null],
[{v: 3, f: '2020-02-03'}, null, 50],
]);
var xAxisTicks = [];
for (var i = 1; i <= 31; i++) {
xAxisTicks.push(i);
}
var options = {
aggregationTarget: 'none',
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
hAxis: {
ticks: xAxisTicks,
title: 'Day of Month'
},
height: '100%',
interpolateNulls: true,
legend: {
alignment: 'start',
position: 'top'
},
selectionMode: 'multiple',
tooltip: {
trigger: 'both'
},
vAxis: {
title: 'Daily Ticket Sales'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
google.visualization.events.addListener(chart, 'ready', function () {
chart.setSelection([
{row: 4, column: 1},
{row: 5, column: 2}
]);
});
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
another option is to use the column role feature,
which allows us to add multiple domain columns.
if not specified, the first column of the data table is used as the domain column.
by explicitly setting the role type,
we can have multiple domains, or x-axis values.
in this scenario, we do not have to perform any manipulation,
in order to display the correct values in the tooltips.
and all the values can be set in the same row...
data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Jan', type: 'number'});
data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Feb', type: 'number'});
data.addRows([
['2020-02-01', 75, '2020-01-01', 50],
['2020-02-02', 35, '2020-01-02', 25],
['2020-02-03', 50, '2020-01-03', 20],
]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Jan', type: 'number'});
data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Feb', type: 'number'});
data.addRows([
['2020-02-01', 75, '2020-01-01', 50],
['2020-02-02', 35, '2020-01-02', 25],
['2020-02-03', 50, '2020-01-03', 20],
]);
var xAxisTicks = [];
for (var i = 1; i <= 31; i++) {
xAxisTicks.push(i);
}
var options = {
aggregationTarget: 'none',
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 48,
height: '100%',
width: '100%'
},
hAxis: {
ticks: xAxisTicks,
title: 'Day of Month'
},
height: '100%',
legend: {
alignment: 'start',
position: 'top'
},
selectionMode: 'multiple',
tooltip: {
trigger: 'both'
},
vAxis: {
title: 'Daily Ticket Sales'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
google.visualization.events.addListener(chart, 'ready', function () {
chart.setSelection([
{row: 2, column: 1},
{row: 2, column: 3}
]);
});
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
Related
I am trying to add custom label as target achieved with numeric value, which is just a value but not the calculation of graph bar/height.
I am not getting how to get the similar result as showed in screen shot,
JS Fiddle : http://jsfiddle.net/xv867tur/
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation' });
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
Expected result :
This picture can help to understand my problem. Need an orange tick.
in the data table used to draw the chart,
we can use a hidden series with an annotation role.
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
we use a value of zero for the hidden series.
this will place the annotation on the x-axis.
and we give the annotation a value, such as 'A', so the annotation is drawn.
to draw the orange tick, and hide the annotation value,
we use the following annotation options...
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 16
},
},
you can use fontSize to change the size of the annotation.
to prevent the hidden series from being drawn,
we use the following options...
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['2010-01-01', 10, 0, 'A'],
['2012-01-01', 4, 0, 'A'],
['2014-01-01', 26, 0, 'A'],
['2016-01-01', 50, 0, 'A'],
['2018-01-01', 75, 0, 'A']
]);
var options = {
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 12
},
},
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
another option is to draw square points at each tick location,
as suggested by #dlaliberte
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'tick series');
data.addRows([
['2010-01-01', 10, 0],
['2012-01-01', 4, 0],
['2014-01-01', 26, 0],
['2016-01-01', 50, 0],
['2018-01-01', 75, 0]
]);
var options = {
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: '#f57c00',
lineWidth: 0,
pointSize: 12,
pointShape: 'square',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
Find the sample issue in the screenshot below. When we load the graph UI using google charts, the legends data are coming but not displayed properly. The frequency of this issue is less in laptops but frequency is high in desktops. Please guide.
this problem is the result of drawing the chart in a hidden container
to demonstrate, see following working snippet,
the chart remains hidden while it is drawn,
then shown when the chart's 'ready' event is fired
the result is similar to the image posted
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
google.visualization.events.addListener(chart, 'ready', function () {
$(container).removeClass('hidden');
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
.hidden {
display: none;
visibility: hidden;
}
<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 class="hidden" id="chart_div"></div>
to correct this issue,
make sure the chart's container is visible,
before drawing for the first time
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<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="chart_div"></div>
choose to use "use row 1 as headers" from the edit chart "Data" tab
I want to implement the following chart in google chart api. how can i get it. I want to separate 4 quarters between two data points and indicators for each quarters need to display. And vertical line with number is that point has annotations. how can i get this in google chart api.
You can use an "annotation" role column to create the lines you want. Here's an example:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
[2009, null, 5],
[2010, '1', 4],
[2011, null, 7],
[2011.25, '2', null],
[2011.5, '3', null],
[2012, null, 7]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
interpolateNulls: true,
annotation: {
1: {
style: 'line'
}
},
hAxis: {
format: '#',
minorGridlines: {
count: 3
},
ticks: [2009, 2010, 2011, 2012]
},
vAxis: {
textPosition: 'none',
minValue: 0,
maxValue: 10
},
legend: {
position: 'none'
}
});
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
See it working here: http://jsfiddle.net/asgallant/H5K29/
I am using linechart in google api chart. In this chart i need to display the vaxis value above point.but i am using annotation.It's create point value in near haxis .But i need above the point.
Actual chart:
Expected chart:
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows([
['2008', 23, 23],
['2009', 145, 145],
['2010', 245, 245],
['2011', 350, 350]
]);
var options = {
width: 400,
height: 100,
pointSize: 4,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 10,
width: 400,
height: 50},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'transparent'}
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
You simply have to correct the order of the column defintion:
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
Edit: See asgallant's comment on the correct order of columns. My text below isn't fully correct.
Although Google's documentation isn't that clear about it, you should always specify the x-axis first, then the values and put stuff like annotations at the end.