I've tried the below code to display chart but for some reason its not working.
I tried to display chart with line chart, with different color points.
I'm trying to create google line charts
<!DOCTYPE html>
<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(drawLoadChart);
function drawLoadChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Length');
data.addColumn('number', 'Load');
data.addRows([
[Zero, 0],
[One, 1],
[Two, 2]
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 3
});
formatter.format(data, 0);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1]);
var options = {'width':400,'height':300,
title: 'Load vs Length',
titlePosition: 'out',
legend: {
position: 'none'
},
hAxis: {
title: 'Length (inch)',
viewWindow: {
min: 0
},
format: '#.000'
},
vAxis: {
title: 'Load (pound)',
viewWindow: {
min: 0
}
},
series: {
0: {
color: 'black',
lineWidth: 2
},
1: {
color: 'red',
lineWidth: 0,
pointSize: 5
}
}
};
var loadChart = new google.visualization.LineChart(document.getElementById('line_chart'));
loadChart.draw(view, options);
}
</script>
</head>
<body>
<div id='line_chart'></div>
</body>
</html>
The expected chart has the above 3 points but when I try with TryItEditor chart is not displaying.
Here in your code change
data.addRows([
[Zero, 0],
[One, 1],
[Two, 2]
]);
to this
data.addRows([
['Zero', 0],
['One', 1],
['Two', 2]
]);
Strings has to be specified with quotes.
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 :
I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>
After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Here is my JS Fiddle. From the values I have specified in the Y-Axis, 0, 10, 23, 17, 18 etc, I want the line from 0-10 to have a different color, 10-23 to have a different color, 23-17 a different color.
https://jsfiddle.net/pyvqcbou/
Here is my JS. I tried adding colors to various places but I was unable to do so. How do I go about it?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
use a style column, see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
[0, 0, 'red'], [1, 10, 'blue'], [2, 23, 'green'], [3, 17, 'orange'], [4, 18, 'purple'], [5, 9, 'black'],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Would like to remove the coloraxis legend on a Google calendar chart. The color axis sits at the top right of the chart. My chart is trying to illustrate dates of activity for Kansas amphibians and reptiles and the type of activity (calling vs not) for frogs and toads. The coloraxis as displayed is uninformative... however another solution would be to change the coloraxis label to a text label (e.g. calling, other active).
Example at http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=30&t=3
<script type="text/javascript">
google.charts.load("current", { packages: ["calendar"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Activity' });
dataTable.addRows([
[new Date(2012, 4, 3), 1],
[new Date(2012, 4, 16), -1],
[new Date(2012, 5, 6), -1],
// many rows removed
[new Date(2012, 7, 15), 1],
[new Date(2012, 7, 25), -2],
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
legend: 'none',
title: '',
calendar: {
daysOfWeek: '',
yearLabel: {
fontName: 'Times-Roman',
fontSize: 1,
color: '#000000',
bold: false,
italic: false
},
}
};
chart.draw(dataTable, options);
}
drawChart();
</script>
I wanted to remove the entire legend, and working with WhiteHat's answer I tweaked it to this. Basically I tried to find the relevant attributes that only affected the legend and hid them:
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).hide();
$($('#calendar_basic text')[1]).hide();
$($('#calendar_basic text')[2]).hide();
$('#calendar_basic linearGradient').hide();
$('#calendar_basic')
.find('[fill-opacity="1"]').hide();
});
no standard options exist for removing the legend or even changing the text
however, once the chart's 'ready' event fires,
you can change manually...
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).text('Calling');
$($('#calendar_basic text')[1]).text('');
$($('#calendar_basic text')[2]).text('Other');
});
see following working snippet...
google.charts.load('current', {
callback: function () {
$(window).resize(drawChart);
drawChart();
},
packages: ["calendar"]
});
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Activity' });
dataTable.addRows([
[new Date(2012, 4, 3), 1],
[new Date(2012, 4, 16), -1],
[new Date(2012, 5, 6), -1],
[new Date(2012, 7, 15), 1],
[new Date(2012, 7, 25), -2],
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
legend: 'none',
title: '',
calendar: {
daysOfWeek: '',
yearLabel: {
fontName: 'Times-Roman',
fontSize: 1,
color: '#000000',
bold: false,
italic: false
},
}
};
google.visualization.events.addListener(chart, 'ready', function () {
$($('#calendar_basic text')[0]).text('Calling');
$($('#calendar_basic text')[1]).text('');
$($('#calendar_basic text')[2]).text('Other');
});
chart.draw(dataTable, 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="calendar_basic"></div>
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/