this is the function in my script
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
Here are the options
var options = {
cht=bvs&chs=350x300&chd=t:20,35,10,5|30,55,25,0|5,25,5,5&chxr=1,0,120&chds=0,120&
chco=0A8C8A,EBB671,DE091A&
chbh=45,20,15&
chdl=Large|Medium|Small&
chg=0,8.3,5,5
title: ' Distribution of fare type per Kilometer',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
is3D:true,
colorAxis: {colors: ['green', 'blue']}
};
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
But im not able to show bar chart with this code.
I guess cht , choc options are implemented wrongly.
plz guide somone
Related
I have a google visualization bar chart sample here where the data format is as given below.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
How to make expenses and profits bar stacked where as sales is a separate bar?
At the moment the Google Charts API doesn't have this in built feature, but with some remodeling of the DataTable and Chart Options you can still achieve this.
My Solution
The Stacked Bar should contain values of only Expenses and Profit, to avoid a Stacked bar with Sales the value in the data column for Sales is represented as zero. A separate Sales bar is created by having a similar data row, but with the value of Sales present, and the rest zero. The Date data type needs to be specified in order to group all bar charts with the same date, if this isn't implemented, then there will be a gap between each bar chart with the same year.
More information on Date representation of Columns is available here.
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{label: '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]
]);
To achieve the stacked bar, the google charts configuration option isStacked: true is used. To avoid the vertical axis acting like a timeline with months and days, the vertical axis is formatted to display the Year using vAxis: {format: 'yyyy'}. More information on formatting is available here. To avoid spacing between different Year Bars, the feature bar: {groupWidth: '90%'} is used.
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {groupWidth: '90%'}
};
I am trying to add a column data label to a google bar chart.
I have followed the instructions given in the API docs, and this is what I get:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
chart: {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(view, options);
}
I must be doing something wrong as the chart fails to render any data labels.
What am I doing wrong?
https://jsfiddle.net/q9edfpte/1/
I did a number of changes*, and this one ultimately worked.
*Changes:
- 'packages':['bar'] --> 'packages':['corechart']
- google.charts.Bar --> google.visualization.ColumnChart
Working version (though needs beautifying):
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
}
I've been trying to figure out how the first chart in this JSFiddle has the legend icons as lines instead of squares. Compared to the line chart legend here which has squares as icons. I think it has something to do with the x axis being a date, but that doesn't seem to work for my data. Does anyone know how to explicitly set the icons of a google line chart legend as lines and not squares?
These are the chart options for the correctly displaying line chart:
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
},
legend: {position: 'bottom'}
};
In fact, if you are using the latest version (v1.1) of google.visualization.LineChart then the legend is rendered using line style as demonstrated below.
Example
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>
In prevision version the legend is rendered as a boxed icons.
Example
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>
Note: the only difference between two examples is the version of
library
Regarding customizing the chart legend.
According to Configuration Options the following legend properties could be customized:
alignment Alignment of the legend
maxLines Maximum number of lines in the legend
position Position of the legend
textStyle An object that specifies the legend text style.
Since there is no property that specifies icon style, in order to create a more customized legend would be to disable chart legend and create a custom one using html/css.
Given the following data (from Google Charts example page):
var data = ['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
How can I render just a line chart that shows sales, but on hover I get this tooltip?
2006
Sales: 660
Expenses: 540
Here is the jsbin:
http://jsbin.com/fefod/1/edit?html,js,output
Essentially I would like to use the third column as extra data for that specific data point, rather than a whole new series. I've read that I cold use "annotation" columns but unsure how I could use them. Thanks in advance.
The way to achieve what you want is to use custom tooltips. You can create a DataView that constructs these automatically for you, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
tooltip: {
isHtml: true
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var year = dt.getFormattedValue(row, 0),
sales = dt.getFormattedValue(row, 1),
expenses = dt.getFormattedValue(row, 2);
return '<div class="tooltip"><span class="tooltipHeader">Year</span>: ' + year + '<br /><span class="tooltipHeader">Sales</span>: ' + sales + '<br /><span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
}
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
You can use any HTML you want in the tooltips, and you'll probably want to style them as well to pretty them up.
As an alternative solution, you can draw the chart with both series, but set the options to hide the second one. Then you can set the focusTarget option to 'category' to show both series in the tooltips at the same time:
series: {
1: {
// hide this series
pointSize: 0,
lineWidth: 0,
displayInLegend: false
}
},
focusTarget: 'category'
Multiple data selections can be rolled up into tooltips using 'aggregationtarget'
an example is given below
var options = {
// Allow multiple simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips on selections.
tooltip: { trigger: 'selection' },
// Group selections by x-value.
aggregationTarget: 'category',
};
More details: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
Is it possible to set dates as min/max values for google line charts?
Here is some sample code that demonstrates the problem:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {viewWindow: {min: new Date(2005,1,1)}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div"></div>
Maybe the problem is on the line:
hAxis: {viewWindow: {min: new Date(2005,1,1)}}
Your x-axis data are not Date objects, which is why setting the hAxis.viewWindow.min option to 'new Date(2005, 1, 1)` doesn't work. If you switch the domain column to a "date" type, it will work:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
[new Date(2004, 0, 1), 1000, 400],
[new Date(2005, 0, 1), 1170, 460],
[new Date(2006, 0, 1), 660, 1120],
[new Date(2007, 0, 1), 1030, 540]
]);
If your data is just years (and not related to any specific day of the year), then it might be best to use a "number" type column instead:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
[2004, 1000, 400],
[2005, 1170, 460],
[2006, 660, 1120],
[2007, 1030, 540]
]);
and set the hAxis.viewWindow.min option to a number:
hAxis: {viewWindow: {min: 2005}}