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>
Related
What should I change in google charts code example to get rid of all slice % and leave only % for one slice, and also the column that shows what each colour represents?
Link to google chart - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
<html>
<head>
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I only want the values circled in the image below:
Try changing options to:
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
slices: {
2: { textStyle : {color:'transparent'} },
3: { textStyle : {color:'transparent'} },
4: { textStyle : {color:'transparent'} },
5: { textStyle : {color:'transparent'} },
}
};
This will set slices 2,3,4,5 to a transparent text colour.
Adapted from: https://stackoverflow.com/a/27010671/608312
#JakeSteam this is the code I have so far.. I could 'make transparent' lebel for 'others' but in this case I would like to get rid of '%' so only slice keeps the value and the colour.
<html>
<head>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metric', 'Score', 'Site'],
['Uniqueness', 6.178, 'https://www.google.com/'],
['', 93.82, 'https://www.bing.com/']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
legend: 'none',
title: 'Unique Identifiability',
pieHole: 0.6,
colors: ['#EE7023', '#808080']
};
var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
window.open(data.getValue(selection[0].row, 2), '_blank');
console.log(data.getValue(selection[0].row, 2));
}
});
I'm using angular 6 and I want to draw a column chart of Google. I found below codes from documantation but I don't know how to use it in my app?
html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div" style="width: 800px; height: 600px;"></div>
js
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
width: 800,
legend: { position: 'none' },
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You need to first declare in your component like this:
declare var google:any;
then your component will know what your are refering to when you call
google.charts.load..
Everything else looks good..
I have seen one post which shows how to make color but it uses a method which is i didnt understand and its little dificult for me. im using this method in fiddle which is easy But it didnt work HTML inside tooltips .
google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', { role: 'style' } , { role: 'tooltip' }],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
chart: {
title: 'Analysis',
tooltip: { isHtml: true},
subtitle: '',
},
/* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
chart.draw(data, options);
}
Js Fiddle here
thanks , hope if someone have a question i can edit and add something before votingdown :) .
first, need to understand difference between Classic and Material charts...
Classic = google.visualization.BarChart -- packages: ['corechart']
Material = google.charts.Bar -- packages: ['bar']
Material charts do not support column roles -- {role: 'style'} , {role: 'tooltip'}
next, there are two things needed for html tooltips on a Classic chart...
1) a property on the column must exist -- {role: 'tooltip', p: {html: true}}
2) and the chart option -- tooltip: { isHtml: true}
however, it should not be within the chart option, which is for Material charts only
(remove chart: {})
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
see following working snippet...
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', {role: 'style'} , {role: 'tooltip', p: {html: true}}],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></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']