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"
Related
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);
}
I have a Column google-chart which is displaying on UI perfectly, What i am trying to do is to give them each column dynamic color combination
Snippet
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'amount'],
['2012', 900, ],
['2013', 1000, ],
['2014', 1170, ],
['2015', 1250, ],
['2016', 1530, ]
]);
var options = {
title: 'Population (in millions)',
legend: 'Years', //i want to show legents as year it is showing amount only
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
In my above snippet it is running fine but i want to make several changes
I want to put dynamic color so that each column have different color
after each column have different color i want to show legends as Years
like 2012 2013 while come as legend
I really don't know how to do that,not even getting ideas
please anyone out here help me.
Note :- If there is another opensource chart library i can use with JSON data please let me know, i have tried d3.js but that too did't work
Add colors: ['skyBlue'] to the options
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Years'],
['2012', 900 ],
['2013', 1000],
['2014', 1170],
['2015', 1250],
['2016', 1530]
]);
var options = {
title: "'Population (in millions)'",
colors: ['skyBlue']
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
If you need every column of a different color you can do this:
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Years', { role: 'style' }],
['2012', 900,'gold' ],
['2013', 1000,'skyBlue'],
['2014', 1170,'pink'],
['2015', 1250,'lightgreen'],
['2016', 1530,'#bac']
]);
var options = {
title: "'Population (in millions)'",
legend: { position: "none" },
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
Yet an other option, this time with a legend:
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Years', '2012','2013','2014','2015','2016'],
['Years',900, 1000, 1170, 1250, 1530]]);
var options = {
title: "'Population (in millions)'",
colors: ['gold', 'skyBlue', 'pink','lightgreen','#bac']
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
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 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>
Hi I want to create bar chart like image which i have posted, I was trying to do this using google api and d3.js but unable to achieve. I need a light background for bar after bar end to a fix height for each bar.please tell me which API i should use.
I have used google api
<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([
['Ingredients', 'Quantity', { role: 'style' }, { role: 'annotation' }],
['28g', 28, 'red', 'Fat'],
['14g', 14,'red','Saturates'],
['9g', 9,'red','Sugar'],
['2.2g', 2.2,'red','Salt']
]);
var options = {
'legend': 'none',
'title': 'per Product',
'titleTextStyle': {color: '#FF0000'},
'hAxis': {title: 'in grams', titleTextStyle: {color: 'red'}},
tooltip: {trigger: 'none'},
enableInteractivity: 'False'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
using this I got below
to achieve that you can just plot another rectangle before the one you use to show the actual data, with the width as each bar and the height as the max value of the scale
In the API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Methods
You have many options on backgroundColor.