Related
I have created my Gauge chart like this:
public pieChart: GoogleChartInterface = {
chartType: 'Gauge',
dataTable: [
['Label', 'Value'],
['Value', 80]
],
options: {
animation: {easing: 'out'},
width: 350, height: 350,
greenFrom: 60, greenTo: 100,
minorTicks: 5,
min: 0, max: 100,
majorTicks: ['0', '20', '40', '60', '80', '100'],
greenColor: '#d0e9c6'
}
};
I want to change the value from 80 -> 60 . I am not sure how to do that in my component and redraw the chart. I am using Angular-7.
Please help
Is it possible to create a chart like the one below using google charts?
I have no idea how to go about this, so I decided to try using candlesticks chart.
with this basic starter code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(candleChart);
/*CANDEL CHART*/
function candleChart() {
var data = google.visualization.arrayToDataTable([
['Jan', 20, 28, 38, 45],
['Feb', 31, 38, 55, 66],
['Mar', 50, 55, 77, 80],
['Apr', 77, 77, 66, 50],
['May', 68, 66, 22, 15],
['jun', 68, 66, 22, 15],
['Jul', 68, 66, 22, 15],
['Aug', 68, 66, 22, 15],
['Sep', 68, 66, 22, 15],
['Oct', 68, 66, 22, 15],
['Nov', 68, 66, 22, 15],
['Dec', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));
chart.draw(data, options);
}
But this is not what I want, I don't know where to start and I couldn't find any documentation on how to make it like the chart in the image.
The vertical line needs 0 as the center like in the image with positive numbers increasing below it and positive numbers increasing above it.
The bottom blue bar would be total number of competitors that did not get accepted. The green bar being total of competitors that did get accepted.
the line will represent where the user placed in that number.
Please help I have no clue where to begin. Thank you in advance!
use a ComboChart with 3 series / y-axis columns.
for the first two series use stacked columns. the first being the negative values, the second positive.
isStacked: true,
seriesType: 'bars',
for the third, change the series type to line.
series: {
2: {
type: 'line'
}
},
data should look similar to following.
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
['Apr', -375, 180, -190],
['May', -180, 240, 100],
['Jun', -160, 100, -205],
['Jul', -125, 80, -12],
['Aug', -175, 110, -25],
['Sep', -100, 220, 150],
['Oct', -110, 390, 240],
['05 Nov', -10, 25, 30],
])
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#cddc39', '#616161'],
hAxis: {
title: 'FY 18'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -400, f: '400'},
{v: -200, f: '200'},
0,
200,
400
],
title: 'Amount'
},
width: '100%'
}
var chart = new google.visualization.ComboChart(document.getElementById('chart'))
chart.draw(data, options)
});
#chart {
height: 320px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
It's this:
var options = {vAxis: { ticks: [-80,-40,0,40,80] }}
Read through the documentation! Every page on the google charts site lists all the configuration options for that chart type: super useful stuff.
Working JS fiddle cribbed from a gcharts example here.
I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.
I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: "Google Charts stops drawing after first chart"), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.
Here is my current code:
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
// Convert the Classic options to Material options.
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
});
chart.draw(data, google.charts.Bar.convertOptions(options));
};
Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?
The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.
You can include multiple packages like this:
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
This solved my problem and allowed me to display multiple charts on a single page without changing any code.
To verify check this:
https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading
The following example shows how to render 3 Google Charts (of google.charts.Bar type) on a single page:
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>
or using this way where charts are inserted on the page dynamically
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chartDiv = document.createElement('div');
chartDiv.id = chartData.chartDivId;
document.getElementById('chartContainer').appendChild(chartDiv);
var chart = new google.charts.Bar(document.getElementById(chartDiv.id));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartContainer"></div>
I think you're having a problem with the current version, which has issues.
You shouldn't need to wait for one chart to load before loading another.
Here is an example that loads version 41 --> all 3 charts draw, without waiting on another.
google.charts.load('41', {packages: ['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Courses_Played2014 Data
var data3 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 14],
["ASU Karsten", 12],
["TPC Scotts...", 11],
["Ahwatukee", 7],
['Other', 7]
]);
// Courses_played2014 Options
var options3 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014'));
chart.draw(data, google.charts.Bar.convertOptions(options));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>
Am using gviz_api python module to load data.
In case helps:
change arrayToDataTable to DataTable
I use combo google chart to display my data and goals on the graph like this:
I want to display goal lines on a full width of the graph, like this:
Here is what I've tried but with no luck:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {'width': '90%', 'height': '80%'},
colors: ["blue", "green"],
legend: { position: 'bottom' },
vAxis: {title: ""},
hAxis: {title: ""},
seriesType: "bars",
series: {2: {type: "line", visibleInLegend: false, color: "red"}, 3:{type: "line", visibleInLegend: false, color: "red"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
How can I achieve this?
To extend the lines to the edge of the chart, you have to use a continuous type axis, and extend your data set by one row before and after your existing data. You can use a DataView to convert your string labels to formatted numbers, and then use the hAxis.ticks option to set the axis labels:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['', null, null, 30, 60],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60],
['', null, null, 30, 60]
]);
var ticks = [];
// ignore the first and last rows
for (var i = 1; i < data.getNumberOfRows() - 1; i++) {
ticks.push({v: i, f: data.getValue(i, 0)});
}
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row, f: dt.getValue(row, 0)};
}
}, 1, 2, 3, 4]);
var range = view.getColumnRange(0);
var offset = 0.5; // change this value to adjust the padding to the left and right of the columns in the chart
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(view, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {
width: '90%',
height: '80%'
},
colors: ["blue", "green"],
legend: {
position: 'bottom'
},
vAxis: {
title: ""
},
hAxis: {
title: "",
ticks: ticks,
viewWindow: {
min: range.min + offset,
max: range.max - offset
},
gridlines: {
// hide vertical gridlines to match discrete chart display
color: 'transparent'
}
},
seriesType: "bars",
series: {
2: {
type: "line",
visibleInLegend: false,
color: "red"
},
3:{
type: "line",
visibleInLegend: false,
color: "red"
}
}
});
}
see working example here: http://jsfiddle.net/asgallant/J2u3n/