I am using the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Line Chart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
function createLineGraph(id,title) {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X(Years)')
// data.addColumn('number', 'X(Years)')
data.addColumn('number', 'Y')
data.addColumn({type: 'string', role: 'annotation'})
data.addColumn('number', 'Y1')
data.addColumn({type: 'string', role: 'annotation'})
data.addRows([
[new Date('2021-02-03'), 2, null,5,null],
[new Date('2021-02-04'), 3, null,15,null],
[new Date('2021-02-05'), 4, null,25,null],
[new Date('2021-02-06'), 5, '5',12,'12']
]);
// data.addRows([
// [5, 2, null,5,null],
// [6, 3, null,15,null],
// [6, 4, null,25,null],
// [12, 5, '5',12,'12']
// ]);
var options = {
title: title,
hAxis: {
format: 'MMM yy' // Format the dates as month and year
},
titleTextStyle: {
fontSize: 18,
bold: true,
textAlign: 'center'
},
titlePosition: 'none',
curveType: 'none',
legend: { position: 'none' },
pointSize:0,
displayLegendValues:false,
annotations: {
stem: {
color: 'transparent'
},
alwaysOutside: false,
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById(id));
chart.draw(data, options);
}
}
</script>
<script type="text/javascript">
createLineGraph('chart_div','Support')
createLineGraph('chart_div1','Resistance')
</script>
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-md-5">
<h4>Support</h4>
<div id="chart_div"></div>
</div>
<div class="col-md-5">
<h4>Resistance </h4>
<div id="chart_div1"></div>
</div>
</div>
</div>
</body>
</html>
Upon setting:
hAxis: {
format: 'MMM yy' // Format the dates as month and year
},
It shows an extra X-axis value on the left:
But when I remove it shows correct entires but wrong format of first entry:
Related
Just want to ask if it's possible to add multiple line annotation per bar based on date? Then if I hover the line, it should display the date.
If it's not possible is there any way to do this?
Here's my sample code: http://jsfiddle.net/q0ftngve/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Display Order');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Introduction');
data.addColumn('date', 'Presentation');
data.addColumn('date', 'Demonstration');
data.addColumn('date', 'Evaluation');
data.addColumn('date', 'Negotiation');
data.addColumn('date', 'Approval');
data.addColumn('date', 'Purchase');
data.addRows([
[
'P0003-0000001',
new Date('2020-04-02'),
new Date('1970-01-14'),
new Date('1970-01-16'),
new Date('1970-01-23'),
new Date('1970-01-22'),
new Date('1970-02-03'),
new Date('1970-01-17'),
new Date('1970-02-01')
]
]);
var dateMin = new Date('2020-4-1');
new google.visualization.BarChart(document.getElementById('progress_chart')).
draw(data,
{
width: "100%",
bar: {groupWidth: "90%"},
backgroundColor: "whitesmoke",
legend: { position: "none" },
isStacked: true,
hAxis: {
viewWindow: {
// max: new Date(2020,5,1),
min: dateMin,
},
// format: 'M/d/yy',
// baseline: dateToday,
// baselineColor: 'red',
},
bar: { groupWidth: 20 }
});
}
using an annotation, with --> style: 'line'
would actually produce a horizontal line,
and would display text on the bar.
to get something to display on hover, you would also need to use annotationText
instead, it may easier to use a different series type...
see following working snippet,
a line series is used to display the lines on the bars...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Display Order');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Introduction');
data.addColumn('date', 'Presentation');
data.addColumn('date', 'Demonstration');
data.addColumn('date', 'Evaluation');
data.addColumn('date', 'Negotiation');
data.addColumn('date', 'Approval');
data.addColumn('date', 'Purchase');
data.addRow([
'P0003-0000001',
new Date('2020-04-02'),
new Date('2020-04-03'),
new Date('2020-04-04'),
new Date('2020-04-05'),
new Date('2020-04-06'),
new Date('1970-01-14'),
new Date('1970-01-16'),
new Date('1970-01-23'),
new Date('1970-01-22'),
new Date('1970-02-03'),
new Date('1970-01-17'),
new Date('1970-02-01')
]);
var dateMin = new Date('2020-4-1');
new google.visualization.BarChart(document.getElementById('progress_chart')).
draw(data, {
width: '100%',
bar: {
groupWidth: '90%'
},
backgroundColor: 'whitesmoke',
legend: {
position: 'none'
},
isStacked: true,
hAxis: {
viewWindow: {
// max: new Date(2020,5,1),
min: dateMin,
},
// format: 'M/d/yy',
// baseline: dateToday,
// baselineColor: 'red',
},
bar: {
groupWidth: 20
},
annotations: {
boxStyle: {
stroke: '#fff',
strokeWidth: 1
}
},
series: {
1: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
2: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
3: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
4: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="progress_chart"></div>
NOTE: recommend using loader.js, rather than jsapi to load google charts...
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
the newer library can be found here...
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, see above snippet...
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 have a problem. Im relatively new to Javascript but I am working on a project where people want to have charts about their improvements. I have sucessfuly made 2 charts, while I do have problems for the 3rd one. The numbers consist of 0.000yyyyy when y stands for random numbers, and when you hover the chart, info shows 0. I put fractionDigits in options, but cant get them to work right.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}
to format the number in the tooltip, use NumberFormat, after data is built
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15), 0.000125],
[new Date(2015 , 04 , 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875]
]);
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: 'transparent',
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
before styling annotations, you must include an annotation column
use a DataView to add the column using a function to "stringify" the series column
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015, 03, 15), 0.000125],
[new Date(2015, 04, 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
[new Date(2015, 05, 22), 0.000126211199625],
[new Date(2015, 06, 07), 0.000127017994375],
[new Date(2015, 06, 08), 0.000127487763],
[new Date(2015, 06, 09), 0.000128022515125],
[new Date(2015, 06, 10), 0.00012886722975],
[new Date(2015, 06, 11), 0.00012921927025],
]);
// add annotation column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#876c3c',
strokeWidth:3
},
textStyle: {
color: '#876c3c'
}
},
backgroundColor: "transparent",
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
// use data view to draw chart
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charta_div"></div>
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.