I want to display one of the chart underneath the other but for now only the 1st chart is showing and I can't seem to display the other chart at the bottom of it. Also, how do I make the chart align to the middle?
<section>
<html>
<div class="container"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["Copper", 8.94],
["Silver", 10.49],
["Gold", 19.30],
["Platinum", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Period: ASEAN 2Q F2F = 0 Dashboard",
'backgroundColor': 'transparent',
width: 600,
height: 400,
bar: {groupWidth: "70%"},
legend: { position: "right" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Number of calls made', 'Number of people'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: ASEAN2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>
You are calling '.load' method twice, which is incorrect.
Just comment below line for second chart and both chart will be loaded.
google.charts.load("current", {packages:["corechart"]});
Related
I am using google charts, which shows the stacked bar chart. I tried groupwidth, but help well increasing the width.
Any help is much appreciated.
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['name', 'data1', 'data2','data3'],
['w1', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40], ['w2', 40,20,40],
['w2', 40,20,40],
]);
var options = {title: 'Percentage of Risk', isStacked:true,bar: {width:"200%",height:"1200%",gap:"10%"}};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
#container {
width: 550px; height: 1200px; margin: 0 auto
}
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>
To increase the width of a group of bars in Google Charts, you have to use the groupWidth configuration.
The syntax for this configuration is:
bar: {groupWidth: '100%'}
which is placed in the chart options variable.
So for your specific code it would be:
var options = {title: 'Percentage of Risk',
isStacked:true,
bar: {groupWidth: '100%'}};
The width of the group of bars can be specified as pixels, for example 75 or as a percentage such as 50%. For the percentage data type, 100% means no space between the bars.
Official documentation for charts configurations: https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options
If you want to increase width then you should try this, I have also put in my code:
<script>
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Chart data
var data = google.visualization.arrayToDataTable([
['SALES', 'FINANCIAL YEAR'],
['FY-16',100],
['FY-17', 230],
['FY-18', 520],
['FY-19', 940],
['FY-20', 1400],
['FY-21', 2000]
]);
//Chart Custom Options
var options = {
title: 'SALES',
vAxis: { title: 'SALES', ticks: [0, 200, 400, 600, 800, 1000, 1200,1400,1600,1800,2000,2200] },
hAxis: { title: 'FINANCIAL YEAR' },
seriesType: 'bars',
colors: ['#f58a07'],
legend: { position: 'bottom', maxLines: 2, pagingTextStyle: { color: '#374a6f' }, scrollArrows: { activeColor: '#666', inactiveColor: '#ccc' } },
series: { 1: { pointSize: 2, type: 'line' } },
animation: {
duration: 1000,
easing: 'linear',
startup: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(window).resize(function () {
drawVisualization();
});
</script>`enter code here`
----------
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="chart_div" class="chart"></div>
</div>
</div>
</div>
----------
<style type="text/css">
.chart {
width: 100%;
min-height: 500px;
}
#media(max-width: 667px) {
.chart {
width: 350px;
min-height: 400px;
}
}
</style>
I am trying to add a red line for avg using php so already got the value just not sure how to create the red line in this chart
my code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['id', 'AVG',],
['12',30635],['54/951',25294],['60',29459],['61',30375],['69',33683],['84/907',24753],['94',26092],['121',34589],['293',36305],['400/460',44068],['401/461',43907],['412/220',34667],['459',48254],['462',43613],['654',32764],['657',39062],['670',36084],['671',34099],['672',31909],['673',35626],['674',32898],['704',31877],['908',24972] ]);
var options = {
title: '2016 AVG',
'width':800,
'height':900,
hAxis: {
title: 'avg',
minValue: 0
},
vAxis: {
title: 'P.S.D'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Hey to all i have the code below for a google pie chart that takes data from a jsontable and i want when i click a slice to redraw the chart based on the selection.
I have the code below and i'm at a loss how to proceed
<head>
<style>
div.absolute {
position: absolute;
top: 120px;
}
</style>
<link href="style.css" rel="stylesheet" />
<!--Auto refresh code -->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!--Load the Ajax API-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
title: 'Arrived Today (Email)',
width: '100%',
height: '100%',
sliceVisibilityThreshold: 0,
pieSliceText: 'percentage',
pieStartAngle: 100,
//is3D: 'true',
pieHole: 0.3,
slices: {
1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
5: {offset: 0.6},
},
//slices: {0: {color: 'green'}, 1: {color: 'blue'}},
pieSliceBorderColor: 'black',
legend: 'right',
legendTextStyle: {fontSize: 15},
pieSliceText: 'value' ,
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 14 ,
align:'right'
},
chartArea : { left: 35 }
};
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
var total = google.visualization.data.group(data,
[{
type: 'boolean',
column: 0,
modifier: function () {return true;}
}],
[{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]
);
document.getElementById("demo").innerHTML =total.getValue(0,1);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
var label1 = data.pieSliceText('label');
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
</script>
</head>
<body>
<h2 align="right"><font size="5">emails Arrived Today</font>
<div id="demo"></div>
</h2>
<div id="chart"></div>
</body>
thanks in advance for any help :)
function initChart() {
....
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}
function drawChart(data, options) {
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
Everything looks fine, except the scope of your variable data2.
You initiate it in your function initChart(), and then try to use it in a sub-function from drawChart().
Either you define your var data2 outside any javascript functions, or you pass it as a parameter when you call drawChart.
When I hover over a point in my line chart/graph I get only the Y value and not the X value.
What I get:
36
Speed: 120
What I want:
Distance: 36
Speed: 120
Code:
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', "Distance");
data.addColumn('number', "Speed");
data.addRows(<?php echo json_encode($DistanceSpeedArray, JSON_NUMERIC_CHECK); ?>);
var options = {
focusTarget: 'category',
backgroundColor: 'none',
chartArea: {
backgroundColor: 'transparent',
left: 40,
top: 40,
width: 1200,
height: 350
},
legend: {
position: 'top'
},
hAxis: {title: 'Distance (KM)', titleTextStyle: {color: 'black'}},
//vAxis: {title: 'Speed (KM/H)', titleTextStyle: {color: 'black'}},
colors: ['green'],
crosshair: {
orientation: 'vertical'
},
animation: {
startup: true,
duration: 5000
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
The above code is a complete code including the focusTarget: 'category' which still returns only the Y title. I have also included a screenshot.
You may apply a format to the Distance-column
new google.visualization.PatternFormat("Distance: {0}")
.format(data, [0], 0);
https://jsfiddle.net/6tf2fatz/
Basically you need to add focusTarget: 'category' for focus on a grouping of all data points along the major axis.
Try below code,
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Distance');
data.addColumn('number', "Speed");
data.addRows(<?php echo json_encode($DistanceSpeedArray, JSON_NUMERIC_CHECK); ?>);
...
var options = { focusTarget: 'category' };
var chart = new google.visualization.LineChart(document.getElementById('your_div_chart'));
chart.draw(data, options);
}
I am using the following code to to draw a piechart. problem is it is always showing a full circle. The code works fine for a line chart (commented). Is the data format that I'm using wrong in someway? JSFiddle here
<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 json_data = new google.visualization.DataTable('{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}');
//var chart = new google.visualization.LineChart(document.getElementById('donutchart'));
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
var options = {
title: '',
chartArea: {
left: 40,
top: 10,
width: "90%",
height: "80%"
},
legend: {
position: "none"
},
colors: ['#468ba9', "#67696c"],
pieHole: 0.4,
};
chart.draw(json_data, options);
}
</script>
<body>
<div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>
EDIT: I would need a solution with json data as I cannot change to input data
As per dlaliberte's comment, though i had declared "Deals" to be of type number, the data passed was of type string.
Thus
{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}
should become
{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":5,"f":null}]},{"c":[{"v":"Medium","f":null},{"v":101,"f":null}]},{"c":[{"v":"Light","f":null},{"v":18,"f":null}]}]}
JS Fiddle: http://jsfiddle.net/Hzr47/2/
This is because you tried to trick google !!
I just changed your data in to a more simpler collection. Also, I took the liberty to add one extra colour for your third pie in this case.
<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 json_data = google.visualization.arrayToDataTable([
['Class', 'Deals'],
['Heavy', 5],
['Medium', 101],
['Light', 18]
]);
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
var options = {
title: '',
chartArea: {
left: 40,
top: 10,
width: "90%",
height: "80%"
},
legend: {
position: "none"
},
colors: ['#468ba9', "#67696c", "#6cc96c"],
pieHole: 0.4,
};
chart.draw(json_data, options);
}
</script>
<body>
<div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>