How can I give different colors to the x-axis labels of Google Visualization like 2004, 2005, 2006, 2007 in the first figure of below link?
https://developers.google.com/chart/interactive/docs/gallery/linechart.
I have used this code.
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'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
options = [{
//you can set the baseline color of the axis and the text like :
hAxis: {
baselineColor: '#c9311b',
textStyle:{color: 'red'}
},
vAxis: {
baselineColor: '#cccccc',
textStyle:{color: 'yellow'}
},
// and the series (labels) like :
series=[{targetAxisIndex:0,
color:'red'},
{targetAxisIndex:1,
color:'blue'
}]
}]
where the targetAxisIndex the dimension is
Related
I'm using Google Charts API and I don't find in documentation how to change chart color foreground from black in white
this is the code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Expenses'],
['2004', 400],
['2005', 460],
['2006', 1120],
['2007', 540]
]);
var options = {
curveType: 'function',
backgroundColor: { fill:'transparent' },
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
any solution ?
from the configuration options, use the following...
x-axis labels...
hAxis: {
textStyle: {
color: '#ffffff'
}
}
y-axis labels...
vAxis: {
textStyle: {
color: '#ffffff'
}
}
legend labels...
legend: {
textStyle: {
color: '#ffffff'
}
}
I am using google charts api for some graph.following is code which i am using
<html>
<head>
<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 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
where two lines are intersecting each other two times and because of that it is showing information only for one line .
Is there any way so that i can show information for both of lines when cursor is over that point?
try using...
focusTarget: 'category'
in the configuration options, see following example...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
focusTarget: 'category',
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
another option would be to provide your own tooltip
see following example, pretty basic but shows the logic...
add a tooltip column, after each value column
then populate the tooltip column with an html string
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
// add tooltip columns
data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// build tooltip values
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 2, getTooltip(i, 1, 3));
data.setValue(i, 4, getTooltip(i, 3, 1));
}
// set tooltip content
function getTooltip(row, col1, col2) {
var tooltip = '<div class="tooltipLabel">' + data.getValue(row, 0) + '</div>';
tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col1) + '</span>: ' + data.getValue(row, col1) + '</div>';
if (data.getValue(row, col1) === data.getValue(row, col2)) {
tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col2) + '</span>: ' + data.getValue(row, col2) + '</div>';
}
return tooltip;
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
div {
padding: 6px 6px 6px 6px;
font-name: Arial;
}
.tooltipLabel {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
While using google bar chart how to change color of individual bar , and how to convert the data values into percentage.
You can preview it on http://jsfiddle.net/u4Lwwx1k/
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 500px; height: 200px;"></div>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030, ]
]);
var options = {
title: 'Company Performance',
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To get the colours you need to change your first line of the array:
Change ['Year', 'Sales'],
To: ['Year', 'Sales', { role: 'style' }],
then each value add the colour to the end like:
['2004', 1000, 'blue'],
['2005', 1170, '#cccccc'],
I think you will have to program the percentage yourself. Im looking to do the same and cant find any examples.
I working with Google line chart I want to draw a based line but I don't know how should I do that for example I want to draw line in 2004 between 400 and 600 how should I do that
here Google Sample:
<html>
<head>
<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'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You can do this in a few different ways, depending on exactly what you want to achieve. The easiest way is to use "interval" role columns:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {role: 'interval', type: 'number'}, {role: 'interval', type: 'number'}],
['2004', 1000, 400, 400, 600],
['2005', 1170, 460, null, null],
['2006', 660, 1120, null, null],
['2007', 1030, 540, null, null]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
There is quite a bit of customization you can do with intervals, see the documentation.
Another way is to add a new series of data for this line, change the data type of the first column from "string" to "number", and add multiple rows of data with the same x-values, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'vertical lines'],
[2004, 1000, 400, 400],
[2004, null, null, 600],
[2005, 1170, 460, null],
[2006, 660, 1120, null],
[2007, 1030, 540, null]
]);
var options = {
title: 'Company Performance',
interpolateNulls: true, // this prevents your other lines from breaking
series: {
2: {
// these options control your new series for the vertical lines
visibleInLegend: false, // hide from the legend
enableInteractivity: false // make the line non-interactive
color: '#9055a6' // set the color of the line
// etc...
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Regarding Google Charts, is there a way to adjust the colour or opacity between two or more overlapping areas of an area chart? I've been attempting to modify Google's sample code provided at the Area Chart development website. For convenience I have provided a copy of the sample code below. Note: If there isn't an officially supported way to do this I am interested in any dirty ways to go about it too.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To help clarify what I hope to accomplish please see the following image.
You can add series with different areaOpacity to your options:
...
vAxis: {minValue: 0},
series: {
0: { areaOpacity: 0.2},
1: { areaOpacity: 0.7}
}