Google Chart height cannot be increased - html

I have this Google Chart (Line Graph) code:
<html>
<head>
<style>
.chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 500px;
}
#chart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 500px;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
window.addEventListener('resize', function (event) {
drawChart();
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
// width: 1800,
// height: 1000,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
you can write that to a file and just open it with a browser - it renders fine, but I cannot get the height of the graph to increase no matter what I add to the css (the style tag).
Anyone know how to get the height to be 100% of the page?
As you can see from the screenshot, the graph is squashed where the height is only about 100px.
I added the following CSS:
body {
width:80%;
height:80%;
margin:10% auto;
background:#e6e6e6;
}
#chart_wrap {
border:1px solid gray;
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
}
#chart {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
and I still cannot get the height to increase:
I think I need to use this to alter the width/height
var options = {
chart: {
title: 'Node.js memory usage (RSS, Heap Used, Heap Total)',
subtitle: '(In megabytes.)'
},
// width: 1800,
// height: 1000,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
but I don't know what to use for height/width to make it 100% of the window/container.


add this css
#line_top_x {
height: 100vh;
}

Related

Google Chart Dashboard not expanding to 100% height?

I'm trying to add a slider to a google chart but I cannot set programmatic_chart_div to a height of 100% filling the full page. What am I doing wrong?
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
var dashboard = 0;
var data = 0;
function drawStuff() {
dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': '100%',
'height': '100%',
'legend': 'none',
'chartArea': {
'width': '100%',
'height': '100%'
},
'pieSliceText': 'value'
}
});
data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
dashboard.bind(programmaticSlider, programmaticChart);
drawChart();
}
window.addEventListener('resize', drawChart, false);
function drawChart() {
dashboard.draw(data);
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#topDiv {
padding: 10px;
height: 100%;
background-color: green;
width: calc (100% - 20px);
max-height: calc(100vh - 20px);
}
#programmatic_dashboard_div {
height: 100%;
width: calc (100% - 40px);
background-color: lightblue;
max-height: inherit;
overflow: scroll;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="topDiv">
<div id="programmatic_dashboard_div">
<div id="programmatic_control_div"></div>
<div id="programmatic_chart_div" ></div>
</div>
</div>
jsfiddle

need to add 100% height to the <html> element (use the same as <body>)
and to the chart's <div> element
add the following css...
html {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#programmatic_chart_div {
height: 100%;
}
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
var dashboard = 0;
var data = 0;
function drawStuff() {
dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': '100%',
'height': '100%',
'legend': 'none',
'chartArea': {
'width': '100%',
'height': '100%'
},
'pieSliceText': 'value'
}
});
data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
dashboard.bind(programmaticSlider, programmaticChart);
drawChart();
}
window.addEventListener('resize', drawChart, false);
function drawChart() {
dashboard.draw(data);
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
html {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#topDiv {
padding: 10px;
height: 100%;
background-color: green;
width: calc (100% - 20px);
max-height: calc(100vh - 20px);
}
#programmatic_dashboard_div {
height: 100%;
width: calc (100% - 40px);
background-color: lightblue;
max-height: inherit;
overflow: scroll;
}
#programmatic_chart_div {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="topDiv">
<div id="programmatic_dashboard_div">
<div id="programmatic_control_div"></div>
<div id="programmatic_chart_div" ></div>
</div>
</div>

Replace cell's editor of ag-grid with tinymce editor

How can we add tinymce editor in the place of editor present in the cell of ag-grid?

In order to customize ag-grid's cell's you need to create a custom Cell Renderer component.
You can pretty much put anything you want in that custom component, including tinyMCE.
More info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/

Please see Cell Renderer
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>var __basePath = './';</script>
<style media="only screen">
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/#ag-grid-community/all-modules#24.1.0/dist/ag-grid-community.min.js"></script>
</head>
<body>
<div id="myGrid" style="height: 100%;width: 100%" class="ag-theme-alpine"></div>
<script src="main.js"></script>
</body>
</html>
main.js
var columnDefs = [
{ field: 'athlete' },
{ field: 'country' },
{ field: 'year', width: 100 },
{ field: 'gold', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'silver', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'bronze', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'total', width: 100 }
];
var gridOptions = {
columnDefs: columnDefs,
components: {
'medalCellRenderer': MedalCellRenderer
},
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true
}
};
// cell renderer class
function MedalCellRenderer() {
}
// init method gets the details of the cell to be renderer
MedalCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('span');
var text = '';
// one star for each medal
for (var i = 0; i < params.value; i++) {
text += '#';
}
this.eGui.innerHTML = text;
};
MedalCellRenderer.prototype.getGui = function() {
return this.eGui;
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid.simpleHttpRequest({ url: 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' })
.then(function(data) {
gridOptions.api.setRowData(data);
});
});

How to use CSS-only for cluster icons for Google Maps

My goal is to have CSS-only icons for my Google Maps marker clusters. I have seen in the documentation's "advanced example" (link) that CSS-only icons are possible. However, I have been unable to translate this example into my own project.
I have attempted to build a JSFiddle with my code, though I can not seem to initialize the map through JSFiddle due to API restrictions. When I run the code on my site, it adds numbers to the map, but no icons, as seen below.
I created some styles
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
And I have attempted to initialize like this:
var markerCluster = new MarkerClusterer(map, markers,
{
styles: styles,
clusterClass: "custom-clustericon",
});
Where am I missing the mark here? I'd like to have marker icons exactly like the ones in the "advanced example", but I'm at a loss. I have searched extensively online for examples of css-only icons but could not find any standalone examples. Your help is kindly appreciated.

You are using the wrong version of the MarkerClusterer library.
Use this one:
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
proof of concept fiddle
code snippet:
function map_initialize() {
var mapoptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
maxZoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: true
};
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
var map = new google.maps.Map(document.getElementById("mapdivbig"),
mapoptions);
var infoWin = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
bounds.extend(location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
styles: styles,
clusterClass: "custom-clustericon",
});
}
var locations = [{
lat: 45.4208,
lng: -123.8,
info: 'Location 1'
},
{
lat: 47.6117,
lng: -122.345,
info: 'Location 2'
},
{
lat: 47.6308,
lng: -122.375,
info: 'Location 3'
}
]
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mapdivbig {
width: 100%;
height: 100%;
background-color: grey;
}
#mapdiv {
width: 100%;
height: 325px;
background-color: grey;
}
.custom-clustericon {
background: var(--cluster-color);
color: #fff;
border-radius: 100%;
font-weight: bold;
font-size: 15px;
display: flex;
align-items: center;
}
.custom-clustericon::before,
.custom-clustericon::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: var(--cluster-color);
opacity: 0.2;
border-radius: 100%;
}
.custom-clustericon::before {
padding: 7px;
}
.custom-clustericon::after {
padding: 14px;
}
.custom-clustericon-1 {
--cluster-color: #00a2d3;
}
.custom-clustericon-2 {
--cluster-color: #ff9b00;
}
.custom-clustericon-3 {
--cluster-color: #ff6969;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=map_initialize" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="mapdivbig"></div>
</body>
</html>

Adding a Y Axis to a google stacked column chart

I have been creating column charts using the google chart tool, but am struggling to add a Y axis to my charts. I just need a standard series of values to appear on the axis on the left hand side of the chart.
I am able to create and manipulate the X axis but the Y axis will not appear for some reason. I'm sure there is something simple I am missing here.
Also apologies if the following code is messy, I am pretty new to this.
<head>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
chartArea: { width: "100%"},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>
Thanks in Advance,

the y-axis is being hidden by chart option --> chartArea: {width: "100%"}
chartArea controls the size of the center section where the bars are,
and does not include the labels on either axis or at the top
use height & width outside of chartArea for the entire chart
if you want to maximize the chart area, then set limits on left, bottom, top, and / or right,
recommend replacing with the following...
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}
},
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

HTML5 Canvas is not responsive

I have a main div, inside it are two div's each having a canvass. My problem is the canvass is not responsive, it overlaps when I resize the browser. please see below image.
Here is my HTML code:
<div id="mainContainer">
<div id="leftcolumn">
<h2>
Canvass Graph1
</h2>
<canvas id="Canvass_One"></canvas>
</div>
<div id="rightcolumn">
<h2>Canvass Graph2</h2>
<canvas id="Canvass_Two"></canvas>
</div>
</div>
CSS Code:
#mainContainer
{
width:100%;
height: 100%;
}
#leftcolumn
{
float:left;
display:inline-block;
width: -moz-calc(100% - 50%);
width: -webkit-calc(100% - 50%);
width: calc(100% - 50%);
height: 100%;
background: blue;
}
#rightcolumn {
float:left;
display:inline-block;
width: -moz-calc(100% - 50%);
width: -webkit-calc(100% - 50%);
width: calc(100% - 50%);
height: 100%;
background-color : red;
}
JS to set height and width of Canvass
var ctx2 = $("#Canvass_One").get(0).getContext('2d');
ctx2.canvas.height = 300; // setting height of canvas
ctx2.canvas.width = 560; // setting width of canvas
var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
ctx1.canvas.height = 300; // setting height of canvas
ctx1.canvas.width = 560; // setting width of canvas
Canvas:
Again, my problem is when I minimized/resize the browser window , the canvass overlaps. thank you for any help. My case is that I'm not using image within my div, it's just a pure canvass with chart js framework to create a graph.
Sample data:
var barData = {
labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};

The trick is to set the style width/height in combination with the attribute width/height, as the style controls display and attribute controls image.
#Canvass_One, #Canvass_Two
{
width: 100%;
height: 100%;
}
Note: Chart.js appears to have its own setting do deal with responsiveness like this, Chart.defaults.global.responsive = true;, so one might need to combine the two.
Here is a sample to show how it works.
Chart.defaults.global.responsive = true;
var barData = {
labels: ['CityA', 'CityB', 'CityC', 'CityD', 'CityF', 'CityG'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};
var ctx2 = $("#Canvass_One").get(0).getContext('2d');
ctx2.canvas.height = 300; // setting height of canvas
ctx2.canvas.width = 560; // setting width of canvas
//ctx2.fillStyle = "#FF0000";
//ctx2.fillRect(10,0,450,75);
var clientsChart = new Chart(ctx2).Bar(barData);
var ctx1 = $("#Canvass_Two").get(0).getContext('2d');
ctx1.canvas.height = 300; // setting height of canvas
ctx1.canvas.width = 560; // setting width of canvas
ctx1.fillStyle = "#0000FF";
ctx1.fillRect(10,0,450,75);
#mainContainer
{
width:100%;
height: 100%;
}
#leftcolumn
{
float:left;
display:inline-block;
width: 50%;
height: 100%;
background: blue;
}
#rightcolumn
{
float:left;
display:inline-block;
width: 50%;
height: 100%;
background-color : red;
}
#Canvass_One, #Canvass_Two
{
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="mainContainer">
<div id="leftcolumn">
<h2>Canvass Graph1</h2>
<canvas id="Canvass_One"></canvas>
</div>
<div id="rightcolumn">
<h2>Canvass Graph2</h2>
<canvas id="Canvass_Two"></canvas>
</div>
</div>