I have a chart I've created using GViz like so:
It's a combo chart, with one series displayed as columns and the other displayed as a stepped area (0% opacity, connectSteps : false). I don't want to use line because that only does a dot in the middle of each column.
I'm trying to have the lines show above the columns because they represent a target amount. I've tried switching the order of the data columns, but it displayed the same way. Is there a way to specify z-index on series?
Side note: This is a chart on a Google Site, but by editing the HTML, I can specify most options available through GViz. I've already looked through the documentation but have not seen something to do this.
There is currently no way to adjust the Z-axis on combo charts (so you can't do what you're trying to do in the way you're doing it).
However, if you want to be tricky, you can recreate the same sort of chart using XY scatter charts.
Example (copy-paste in to Google Playground):
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="http://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 = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Targets');
data.addRows([
[1, 0, null],
[1, 1, null],
[1, null, null],
[2, 0, null],
[2, 3, null],
[2, null, null],
[3, 0, null],
[3, 3, null],
[3, null, null],
[0.5,null,1.5],
[1.5,null,1.5],
[1.5,null,null],
[1.5,null,2.5],
[2.5,null,2.5],
[2.5,null,null],
[2.5,null,3],
[3.5,null,3],
]);
// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('visualization'));
chart.draw(data, {
width: 600,
height: 400,
series: {0:{color: 'black', lineWidth: 40, pointSize: 0}, 1:{color: 'red', lineWidth: 10, pointSize: 0}} });
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
Related
Problem with Chart.js version > 4
With the following scriptversion radar charts are working https://cdn.jsdelivr.net/npm/chart.js
the version 4.2.1 gives an error with radar charts.
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"> error in chart.js line 7 (unexpected token "{". ... -->
I don't find a working example for Chartjs > 4.0
``
`<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Radar Chart</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --> <!-- works -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.js"></script> <!-- doesn't work -->
<!-- error in chart.js line 7 (unespected token "{". ... -->
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'radar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Whatever 1',
data: [12, 19, 23, 5, 32, 3],
borderWidth: 1
}, {
label: 'Whatever 2',
data: [12, 1, 22, 15, 2, 23],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>``
You are using the esm version, you need to use the footing link: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js
The google chart images were perfectly coming in PDF till few months back.
But now images are not coming.
If I try the html, google chart is coming correctly.
If I try to convert that HTML into PDF using wkhtmltopdf, chart not showing.
I am using wkhtmltopdf from command line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GRAPH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<b>GRAPH</b>
</td>
</tr>
<tr>
<td align="center">
<div class="text-center" id="chart_div70918" style="display: block; margin: 0 auto; width: 400px;height: 160px; "></div>
</td>
</tr>
</table>
<script type="text/javascript">
var scr = document.createElement("script");
scr.setAttribute("src",'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart", "bar"],"callback":"drawChart70918"}]}');
document.head.appendChild(scr);
function drawChart70918() {
var data = google.visualization.arrayToDataTable([
["Subject", "Class Highest", "Marks Obtained", { role: "style" } ]
,["English", 13, 43, "#1909a0"],["Hindi -Oral", 48, 40, "#1909a0"],["Maths", 13, 38, "#1909a0"],["G.k.", 12, 39, "#1909a0"],["Drawing", 48, 44, "#1909a0"] ]);
var view = new google.visualization.DataView(data);
var options = {
fontSize : 6,
fontName: 'Times New Roman',
hAxis :{showTextEvery:1,"slantedText":true, "slantedTextAngle": 45 },
vAxis: {minValue: 0},
legend: { position: "right" },
colors: ['#a5e893', '#1909a0'],
bar: {groupWidth: "40%"},
chartArea:{left:10,top:20,width:'75%',height:'60%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div70918"));
chart.draw(view, options);
}
</script>
</body>
</html>
I'm using Material Bar Charts. However, it turns out that whenever I use a 'base href' on my page, the chart will not function properly (if you hover over the bars they disappear). You can try this out with the code below. The base href does not affect inclusion of the required files at Google (but I imagine there is some CSS being included through the javascript that uses relative paths).
I really want to use a base href. Any idea how to make it function?
IMAGE (mouse is hovering over the first bar, which then disappears):
FUNCTIONAL (no base href):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
NOT FUNCTIONAL (base href introduced):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://yahoo.com/" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200]
]);
var options = {
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
How can I disable the legend text on the right in a Google chart? It's circled in red here:
This is the chart I'm trying to use. Here is my current code:
<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([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
See the docs for the 'legend' options here: https://developers.google.com/chart/interactive/docs/gallery/linechart
You want to add
legend: { position: "none" }
to your options.
The pie chart works perfectly on all browsers except for IE 7 and 8, where all I see is a blank screen. I've looked around but I could not seem to find a solution that works.
Any help is appreciated
<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([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28],
]);
var options = {
title: 'Pie Chart',
legend: {postion:'right', alignment: 'center'},
pieSliceText: 'value',
chartArea: {left: 10, width:"30%", height:"50%"},
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
You have an errant comma at the end of your data array:
var data = google.visualization.arrayToDataTable([
['Product', 'Amount'],
['Product 1', 31],
['Product 2', 28], <-- this comma is the problem
]);
IE does not like commas after the last element in an array, and will kick and scream and throw a tantrum to rival a petulant two-year-old child when it sees one.