I have a Google Bar Chart inside a fixed-width div. In some cases, I have many bars, but sometimes I only get 1 or 2 bars. The problem is that in this case, I got a chart like this:
I would like to set a max bar width, so that when I have only one bar, it doesn't take the whole container width. Do you know how to achieve that please?
[edit] I am looking for a solution for a Material chart (google.charts.Bar)
The solution is to add blank columns when there are not enough columns initially.
for (var i = 0; i < n; i++) {
if (i % 2 == 0)
rows.push([" ", null])
else
rows.unshift([" ", null])
}
dataTable.addRows(rows);
bar.groupWidth option doesn't work on Material charts
even with google.charts.Bar.convertOptions
tried versions '41' thru 'current'
example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Motivation Level');
data.addRows([
['10h', 5]
]);
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions({
bar: {
groupWidth: 20
}
}));
},
packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Edit
only other option would be to modify the SVG directly when the chart's 'ready' event fires
but this is not recommended
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Motivation Level');
data.addRows([
['10h', 5]
]);
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// modify SVG on 'ready'
google.visualization.events.addListener(chart, 'ready', function () {
var bars = container.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar) {
// reduce width by 50%
bar.setAttribute('transform', 'scale(0.5,1)');
});
});
chart.draw(data, {});
},
packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I used the following (inspired by #Amaud)
To prevent a bar-chart with one very thick row, I add blank rows using the following code
if (tData.getNumberOfRows()==1) {
addRow(tData,' ',1);
addRow(tData,' ',1);
}
The full code is as follows:
Note that the function addRow adds a row to the chart only if there is a value, therefore sometimes
there can be only one row which ends up being very thick.
var tData = new google.visualization.DataTable();
tData.addColumn('string','Type');
tData.addColumn('number','Amount (Millions)");
addRow(tData,'Row1', a1);
addRow(tData,'Row2', a2);
addRow(tData,'Row3', a3);
addRow(tData,'Row4', a4);
if (tData.getNumberOfRows()==1) {
addRow(tData,' ',1);
addRow(tData,' ',1);
}
var options = {
...
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(tData, options);
function addRow(tData,text,num) {
if (num>0) {
tData.addRow([text,num/1000000]);
}
}
Related
I've tried every configuration possible to get a Google Area Chart to display a single point but nothing has worked. I'm also totally open to any solutions using the Google Line Chart as long as it has a filled area. However, I couldn't find a solution for making this work with a line chart either.
Already tried setting the pointSize as well as setting the pointSize conditionally if there is only a single row. Tried numerous different ways of configuring the chart including.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Updated');
data.addColumn('number', 'Amount');
data.addRow([new Date(1548266417060.704),100]);
AND
var mets = [['Updated', 'Amount'], [new Date(1548266417060.704),100]];
var data = google.visualization.arrayToDataTable(mets);
Area Chart Example JSFiddle
Line Chart Example JSFiddle
This Line Chart would need the area below the line filled in but I haven't been able to determine how to do so with this API
Example of the chart I'm trying to achieve using CanvasJs but I'm trying to implement it with Google Visualization API and allow for a single point to be shown if there is only a single point on the chart.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100],
//[new Date(1548716961817.513),100],
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I'm expecting the chart to display a single point when there is only one data row. As you can see by the JSFiddle when there is a single row nothing appears but as soon as you uncomment the second row everything works just fine.
there is a bug with the most recent version of google charts,
when the x-axis is a continuous axis (date, number, not string, etc.),
and only one row exists in the data table,
you must set an explicit view window on the axis --> hAxis.viewWindow
to use a date type with only one row,
first, use data table method --> getColumnRange
this will return an object with min & max properties for the x-axis
then we can increase the max and decrease the min by one day,
and use that for our view window.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var oneDay = (24 * 60 * 60 * 1000);
var dateRange = data.getColumnRange(0);
if (data.getNumberOfRows() === 1) {
dateRange.min = new Date(dateRange.min.getTime() - oneDay);
dateRange.max = new Date(dateRange.max.getTime() + oneDay);
}
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
viewWindow: dateRange
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you'll notice if we go back to an old version ('45'),
a single date row displays without issue...
google.charts.load('45', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I dont know if you understod but the date format you are passing is wrong, so when you write Date() it return the current date formatted as string.
now if we understand that much then the currect way of writing the date array should be
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704).toString(),100],
]);
This will return the date formatted as string.
and the library will accept it.
if you are still want to pass on an object then you need to specify the dataTable column as Date.
read here for more information
https://developers.google.com/chart/interactive/docs/datesandtimes
I am having a bit of an issue with the Google Visualization library. I have a very simple table being built on the screen, and I need to disable sorting, but only for a certain column. I have gone through their documentation and found that you can define your own functions for events that will override the default, but it is not working. Here is an extremely simple example...
var chart = new google.visualization.Table(document.getElementById('myTable'));
google.visualization.events.addListener(chart, 'sort', function(e) { handleSort(e, chart); });
chart.draw(opts, dataTable);
function handleSort(e, chart) {
console.log('inside sort');
return false;
}
when I click on the column header I get the console log of 'inside sort', but the table will sort on that column. I have even tried...
function handleSort(e, chart) {
if(e.column == 9) {
chart.options['sortColumn'] = 0;
chart.options['isAscending'] = true;
}
}
When clicking the column header for column 9 it still sorts on column 9. I can't get it to stop sorting on that column. Essentially I have a button in the header for column 9, when the user clicks the button the page does something, but since it sorts the table, it ruins what is supposed to be happening.
Also, inside the opts object that gets passed to the draw method, I do have 'sort' set to 'event' like they say in their documentation, but it will not work. The function gets run, but the table still sorts regardless of what I have in the function. Any help would be greatly appreciate. Thank you all.
If you want complete control over the sort, add sort: 'event' to the configuration options
Keep in mind, you're in control now, so you must sort the data manually.
The sortAscending and sortColumn options are used to set the sort arrow in the column heading.
In this example, the data is initially sorted by descending Hours, set the options accordingly on the initial draw.
Then in the sort event, I only allow sorting by Hours...
google.load("visualization", "1", {packages:["table"], callback: loadChart});
function loadChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Hours');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, 40],
['Jim', {v:8000, f: '$8,000'}, 30],
['Alice', {v: 12500, f: '$12,500'}, 20],
['Bob', {v: 7000, f: '$7,000'}, 10]
]);
var chart = new google.visualization.Table(document.getElementById('table_div'));
var options = {
sort: 'event',
sortAscending: false,
sortColumn: 2
};
google.visualization.events.addListener(chart, 'sort', function(e) {
if (e.column === 2) {
options.sortAscending = e.ascending;
options.sortColumn = e.column;
data.sort([{
column: e.column,
desc: !e.ascending
}]);
chart.draw(data, options);
}
});
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
I've got 4 charts displayed on a single page. When drawn individually they work perfectly fine, but when I try to have more than 1 they're not all displayed. I have also noticed that when resizing the window (hence refreshing the charts), the "active" chart can change.
Here's my method that draws the charts:
function drawChart() {
// Occurrences per step
var data_occ = new google.visualization.DataTable();
data_occ.addColumn('string', 'Step');
data_occ.addColumn('number', 'Number');
data_occ.addRows([
['NO_STOP_DEP', 2057],
['FIND_STOPS_DEP', 795],
['FIND_STOPS_ARR', 423],
['FIND_ROUTES', 416],
['FIND_PATHS_0', 416],
['NO_STOP_ARR', 371],
['FIND_PATHS_1', 359],
['JOURNEY_GET_1CONNECTION_FAILED', 274],
['FIND_PATHS_2', 274],
['JOURNEY_GET_1CONNECTION_t1d', 185],
['OK', 147],
['JOURNEY_GET_2CONNECTION_t1d', 145],
['JOURNEY_GET_1CONNECTION_t1a', 138],
['NO_PATH', 129],
['JOURNEY_GET_2CONNECTION_FAILED', 118],
['NO_JOURNEY', 118],
['JOURNEY_GET_1CONNECTION_cs1', 117],
['JOURNEY_GET_1CONNECTION_t2d', 115],
['JOURNEY_GET_DIRECT_t1d', 111],
['JOURNEY_GET_2CONNECTION_t1a', 79],
['JOURNEY_GET_2CONNECTION_cs1', 75],
['JOURNEY_GET_2CONNECTION_t2d', 73],
['JOURNEY_GET_2CONNECTION_t2a', 66],
['JOURNEY_GET_2CONNECTION_cs2', 66],
['JOURNEY_GET_2CONNECTION_t3d', 66],
['JOURNEY_GET_1CONNECTION', 65],
['JOURNEY_GET_DIRECT', 56],
['JOURNEY_GET_DIRECT_FAILED', 54],
['JOURNEY_GET_2CONNECTION', 26],
['NO_ROUTE_ARR', 4],
['NO_ROUTE_DEP', 3]
]);
var opt_occ = {
chart: {
title: 'Occurrences of each step'
}
};
var chart_occ = new google.charts.Bar(document.getElementById('chart_occ'));
chart_occ.draw(data_occ, opt_occ);
// Sum of durations per step
var data_dur = new google.visualization.DataTable();
data_dur.addColumn('string', 'Step');
data_dur.addColumn('number', 'Duration');
data_dur.addRows([
['JOURNEY_GET_2CONNECTION_t2d', 4271651.423530579],
['NO_STOP_DEP', 954578.8992916346],
['FIND_STOPS_DEP', 711477.470664978],
['JOURNEY_GET_DIRECT_t1d', 604728.3424301147],
['JOURNEY_GET_1CONNECTION_t2d', 483084.8451423645],
['JOURNEY_GET_1CONNECTION_t1d', 399811.6393585205],
['JOURNEY_GET_2CONNECTION_t3d', 391471.8716468811],
['FIND_PATHS_1', 173883.78058815002],
['FIND_STOPS_ARR', 164751.4531224966],
['JOURNEY_GET_2CONNECTION_t1d', 158291.4034690857],
['FIND_PATHS_2', 154918.55130004883],
['FIND_ROUTES', 125470.71777877212],
['NO_STOP_ARR', 82222.14379951358],
['JOURNEY_GET_1CONNECTION_cs1', 45374.44926452637],
['JOURNEY_GET_1CONNECTION_t1a', 29688.884063720703],
['JOURNEY_GET_2CONNECTION_cs2', 21626.706924438477],
['JOURNEY_GET_2CONNECTION_cs1', 13983.793979644775],
['JOURNEY_GET_2CONNECTION_t2a', 13081.894062042236],
['JOURNEY_GET_1CONNECTION', 11718.449104309082],
['JOURNEY_GET_2CONNECTION_FAILED', 9777.992935180664],
['JOURNEY_GET_1CONNECTION_FAILED', 9182.082992315292],
['JOURNEY_GET_DIRECT', 8991.909969329834],
['JOURNEY_GET_2CONNECTION_t1a', 8132.20499420166],
['NO_ROUTE_ARR', 5709.329235076904],
['JOURNEY_GET_DIRECT_FAILED', 5620.268951416016],
['FIND_PATHS_0', 4501.938883662224],
['JOURNEY_GET_2CONNECTION', 3359.796012878418],
['NO_PATH', 1778.0850104540586],
['OK', 1419.4850099533796],
['NO_JOURNEY', 1267.5709964483976],
['NO_ROUTE_DEP', 334.49600982666016]
]);
var opt_dur = {
chart: {
title: 'Cumulative duration of each step (ms)'
}
};
var chart_dur = new google.charts.Bar(document.getElementById('chart_dur'));
chart_dur.draw(data_dur, opt_dur);
// Average of durations per step
var data_dur_avg = new google.visualization.DataTable();
data_dur_avg.addColumn('string', 'Step');
data_dur_avg.addColumn('number', 'Duration');
data_dur_avg.addRows([
['NO_ROUTE_DEP', 111.49866994222005],
['NO_ROUTE_ARR', 1427.332308769226],
['JOURNEY_GET_DIRECT', 160.5698208808899],
['NO_PATH', 13.783604732202004],
['JOURNEY_GET_1CONNECTION_cs1', 387.8158056797125],
['JOURNEY_GET_1CONNECTION_t2d', 4200.737783846648],
['JOURNEY_GET_1CONNECTION', 180.2838323739859],
['JOURNEY_GET_2CONNECTION_t1a', 102.93930372407165],
['JOURNEY_GET_2CONNECTION_cs1', 186.45058639526368],
['JOURNEY_GET_2CONNECTION_t2d', 58515.77292507642],
['JOURNEY_GET_2CONNECTION_t2a', 198.21051609154904],
['JOURNEY_GET_2CONNECTION_cs2', 327.6773776430072],
['JOURNEY_GET_2CONNECTION_t3d', 5931.3919946497135],
['JOURNEY_GET_2CONNECTION', 129.22292357224686],
['OK', 9.656360611927752],
['NO_STOP_ARR', 221.623029109201],
['JOURNEY_GET_1CONNECTION_t1a', 215.13684104145437],
['NO_STOP_DEP', 464.06363601926813],
['FIND_STOPS_DEP', 894.9402146729284],
['FIND_STOPS_ARR', 389.483340715122],
['FIND_ROUTES', 301.6123023528176],
['FIND_PATHS_0', 10.821968470341885],
['JOURNEY_GET_DIRECT_t1d', 5448.003084955989],
['JOURNEY_GET_DIRECT_FAILED', 104.07905465585215],
['FIND_PATHS_1', 484.35593478593324],
['JOURNEY_GET_1CONNECTION_t1d', 2161.1439965325435],
['JOURNEY_GET_1CONNECTION_FAILED', 33.51125179677114],
['FIND_PATHS_2', 565.3961726279155],
['JOURNEY_GET_2CONNECTION_t1d', 1091.6648515109357],
['JOURNEY_GET_2CONNECTION_FAILED', 82.86434690831071],
['NO_JOURNEY', 10.742127088545743]
]);
var opt_dur_avg = {
chart: {
title: 'Average duration of each step (ms)'
}
};
var chart_dur_avg = new google.charts.Bar(document.getElementById('chart_dur_avg'));
chart_dur_avg.draw(data_dur_avg, opt_dur_avg);
// Average duration comparison today vs yesterday
var data_dur_avg_cmp = new google.visualization.DataTable();
data_dur_avg_cmp.addColumn('string', 'Step');
data_dur_avg_cmp.addColumn('number', 'Yesterday');
data_dur_avg_cmp.addColumn('number', 'Today');
data_dur_avg_cmp.addRows([
]);
var opt_dur_avg_cmp = {
chart: {
title: 'Average duration of each step (ms)'
}
};
var chart_dur_avg_cmp = new google.charts.Bar(document.getElementById('chart_dur_avg_cmp'));
chart_dur_avg_cmp.draw(data_dur_avg_cmp, opt_dur_avg_cmp);
}
I have also uploaded the code to a jsfiddle so that you can see for yourself. You can play with the integer at the top, to select which graphs will be displayed. Having a value that is not a power of 2 (that is, display more than one graph) will cause the following:
the div will be sized, I mean the layout indicates that it is present
nothing will be drawn in the div
Here's an example with 2 graphs drawn, one is properly drawn and the second one is blank:
We can clearly see that the Average duration div has a size, but is blank.
It's the known issue that was reported in google-visualization-issues repository:
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load "1.1" now so that when the candidate release
becomes available, you will be using it.
There are at least two solutions available at the moment.
Option 1. Using the frozen version loader.
Since the rollout of the v43 candidate release that would fix this problem
switch to using the frozen version loader.
Steps:
1)Add a reference to loader: <script src="http://www.gstatic.com/charts/loader.js"></script>
2)Then load a 43 version of library: google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
3)Replace google.setOnLoadCallback(drawChart); with google.charts.setOnLoadCallback(drawChart);
Modified jsfiddle
Option 2. Render charts synchronously
Since a draw function is asynchronous, we utilize ready event handler to draw charts sequentially, in that case multiple chart should be rendered properly as demonstrated below.
function drawChart(chartsQueue,index) {
index = index || 0;
if (index === chartsQueue.length)
return;
var chart = new google.charts.Bar(document.getElementById(chartsQueue[index].id));
google.visualization.events.addOneTimeListener(chart, 'ready', function() {
drawChart(chartsQueue, index + 1); //draw next chart
});
chart.draw(chartsQueue[index].data, chartsQueue[index].options);
}
Modified jsfiddle
Using the Google Charts API [https://developers.google.com/chart/interactive/docs/events] I have a properly formatted ComboChart and a properly formatted google rendered data table.
I am able to use the setSelection() function - However, the selection is highlighting my average line which runs through the middle of the bar chart.
I am unable to work out how to make the highlighted 'dot' on the chart/graph area appear on the other series/data set (e.g highlight the bars instead of the average line - which as per any average, is a straight line through the middle which means nothing to my end user).
I can add some code to a JS fiddle if you wish but it's really just a basic google combo chart displaying several different bars as my main data set and an average line as my series '1' (with base 0).
Edit: add js fiddle: http://jsfiddle.net/GSryX/
[code]
some code
[/code]
Any ideas?
When setting the selection, make sure the "column" parameter of the selected object refers to the correct column in your DataTable.
Edit:
If the bars are too small to show the selection effect, you can instead use a hack like this http://jsfiddle.net/asgallant/5SX8w/ to change the bar color on selection. This works best when you have only 1 series of data; if you have more than 1 series, it requires modification, and may not display properly unless you are using stacked bars.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Foo', 94],
['Bar', 23],
['Baz', 80],
['Bat', 47],
['Cad', 32],
['Qud', 54]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
// setting the "isStacked" option to true fixes the spacing problem
isStacked: true,
height: 300,
width: 600,
series: {
1: {
// set the color to change to
color: '00A0D0',
// don't show this in the legend
visibleInLegend: false
}
}
}
});
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getChart().getSelection();
if (selection.length > 0) {
var newSelection = [];
// if row is undefined, we selected the entire series
// otherwise, just a single element
if (typeof(selection[0].row) == 'undefined') {
newSelection.push({
column: 2
});
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () {
// this series is just a placeholder
return 0;
}
}, 1]
});
}
else {
var rows = [];
for (var i = 0; i < selection.length; i++) {
rows.push(selection[i].row);
// move the selected elements to column 2
newSelection.push({
row: selection[i].row,
column: 2
});
}
// set the view to remove the selected elements from the first series and add them to the second series
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
}
}, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
}
}]
});
}
// re-set the selection when the chart is done drawing
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.getChart().setSelection(newSelection);
});
}
else {
// if nothing is selected, clear the view to draw the base chart
chart.setView();
}
chart.draw();
});
chart.draw();
}
I want to change the color of each bar in my bar graph. Currently, I tried setting the colors option as specified in the documentation:
var options = {
'title' : results.title,
'width' : 400,
'height' : 300,
'is3D' : true,
'colors' : ["#194D86","#699A36", "#000000"],
'allowHtml' : true
}
But it does not work. Basically, I would want each bar in the following graph to be the same color: http://jsfiddle.net/etiennenoel/ZThMp/12/
Is there a way to do that or do I have to change my code structure to do so ?
[Edit - there is a better method outlined in edit below]
The Visualization API colors data by series (or column in the DataTable, if you prefer). The solution is to split the data into multiple series using a DataView:
// get a list of all the labels in column 0
var group = google.visualization.data.group(data, [0], []);
// build the columns for the view
var columns = [0];
for (var i = 0; i < group.getNumberOfRows(); i++) {
var label = group.getValue(i, 0);
// set the columns to use in the chart's view
// calculated columns put data belonging to each label 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)
});
}
// create the DataView
var view = new google.visualization.DataView(data);
view.setColumns(columns);
Set the "isStacked" option in the chart to "true" to fix the column spacing issues that result, and draw the chart using the view instead of the DataTable:
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(view, {
// options
isStacked: true
});
See an example here.
[Edit: new (improved) method available with update to the Visualization API]
You can now use the new "style" column role to specify styles for your columns. It works like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Foo', 5, 'color: #ac6598'],
['Bar', 7, 'color: #3fb0e9'],
['Baz', 3, 'color: #42c698']
]);
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
legend: {
position: 'none'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see example here: http://jsfiddle.net/asgallant/gbzLB/
There is a solution for your problem.You need to add series in your options. I have already answered for the similar type of question. Refer my answer here. I hope this will help you.