I want to create a timeline chart by using Google Spreadsheet. I have written the datas in a spreadsheet although when i try to run it, doesnt work.
Here is my jsfiddle
I want my spreadsheet to be pulled as data, i have made a spreadsheet although from the google dev links i followed, mine doesnt work.
Also here is the code
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="chart_div" style="height: 400px; width: 800px;"></div>
<script type="text/javascript"> </script>
google.charts.load('current', {
packages: ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1RslSoJjk25ZbBwitHnY16VI39dWRK8OkkfnCv-ubUqY/edit?usp=sharing");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var container = document.getElementById('timechart');
var chart = new google.visualization.Timeline(container);
var options = {
//1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
//!!ONLY WHEN THERE ARE 5 BARS, OTHERWISE IT MIgHT CHANGE!!
colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
timeline: {
rowLabelStyle: {
fontName: 'Arial',
fontSize: 20,
color: '#0000'
},
barLabelStyle: {
fontName: 'Times New Roman',
fontSize: 22
}
},
'width': 2650,
'height': 900,
avoidOverlappingGridLines: false,
alternatingRowStyle: false,
backgroundColor: '#FFFFFF'
};
chart.draw(data, options);
}
Related
I am trying to create an chart with google charts like:
stacked column chart with annotations in every value field.
Instead of the value it should show the name on every Value box in the stacked columns.
Name is always one row before the data in the google sheet - the data from google sheets can also be formated differently.
the posted code already does that, but only uses the same names for all rows instead of the custom names for every row/column.
<html>
<head>
<!--Load the AJAX API-->
<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 query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1fUeGQpVGXpXmQ6QLLBgMf3VpaYuOnQIX24lBGgG7yoQ/gviz/tq?range=1:24");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
var options = {
width: 1920,
height: 1080,
legend: { position: 'none' },
column: { groupWidth: '95%' },
isStacked: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart" style="width: 100%; height: 100%;"></div>
</body>
</html>
(if the google sheet link won't work, here is the raw data)
Working code without google sheets (and minimal data, other label names):
<html>
<head>
<!--Load the AJAX API-->
<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([
['API Category',
'Social', { role: 'annotation' },
'Music', { role: 'annotation' },
'File Sharing', { role: 'annotation' },
'Storage', { role: 'annotation' },
'Weather', { role: 'annotation' }
],
['2011', 98, 'Uschi', 53, 'Petra', 12, 'Max', 16, 'Mustermann', 6, 'Siegfried'],
['2012', 151, 'Susi', 34, 'Stackoverflow', 26, 'factor', 36, 'Ohnezahn', 49, 'Zahlos'],
['2013', 69, 'Rick', 27, 'Rolled', 22, 'Visual', 17, 'Studio', 15, 'Code'],
]);
var view = new google.visualization.DataView(data);
var options = {
width: 1920,
height: 1080,
legend: { position: 'none' },
column: { groupWidth: '95%' },
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
</body>
</html>
It s probably possible to accomplish that with Setcolumns() or setRows() but I just cannot wrap my head around it right now.
Maybe the question should be "Howto use ColumnDescription objects with data from external sources like google sheet"
I am using the Google Charts API to create a stepped area chart and I'd like to remove all horizontal lines in my chart. I've looked at all the documentation for the options, but I don't see any way to remove it. Is there some way to trick the API into removing them or am I stuck with them? The lines I am talking about is in the picture below, just to clear possible confusion.
Set vAxis.gridlines.color to transparent. You see more options in the Configuration Options section from the docs.
Use (using example from docs):
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
gridlines: {
color: 'transparent'
}
},
isStacked: true
};
var chart = new google.visualization.SteppedAreaChart(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" style="width: 500px; height: 250px;"></div>
you can use the following option...
vAxis: {
gridlines: {
count: 0
}
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
isStacked: true,
vAxis: {
gridlines: {
count: 0
}
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...
the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I tried multiple solutions given out from
How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts, and several other posts that I have looked over without any luck. Does anyone have an idea of what can be done in order to set the y axis to a starting point of 0? I can provide more information if need be. Also a side question, is it possible to bring a line to the front when clicked on. For example when you click on the current trend line, it bolds but the data points do not appear for them.
<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, options);
}
</script>
I have a jsfiddle link where I have my code.
https://jsfiddle.net/abufr36y/
Need to convert options for Material Charts, depending on the package...
google.charts.Line.convertOptions(options)
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, 3, 4, 5, 1]);
var chart = new google.charts.Line(document.getElementById('thelinechart'));
// convert options for Material Charts, use view vs. data
chart.draw(view, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>
I' am using Google Chart. I was searching on Google and found some API options to set in to get the color of the bar from default blue to white. This is what I have added into the option parameters:
Someone said that this will only work if you want more then one color of bars
colors: '#FFF'
This is also what I tried. Saw this somewhere so thought to apply it.
color: '#FFF'
For some reason its not working as wanted. Here's my javascript code in placed.
<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([
['', 'Current Demand'],
<?php echo $data; ?>
]);
var options = {
width: 350,
height: 261,
isStacked: true,
legend: 'none',
backgroundColor: {
fill:'transparent'
},
hAxis: {
title: '',
titleTextStyle: {color: 'white'
},
colors: '#FFF'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Am I missing something?
Colors need to be put into a javascript array.
colors: ['#fff']