Custom HTML Organizr V2

customhtml NEW

<style>
.overflowhider {
	height: 228px;
	overflow: hidden;
}

@media only screen and (max-width: 800px) {
    #netdatacustom {
        display:none;
    }
}

#discordwidget {
    left: -15px;
    position: relative;
    height: calc(200px + 260px);
    width: calc(100% + 20px);
    top: -100px;
}
</style>
		
<div id="customHTML" class="row">
<div class="col-lg-6">
	<div class="panel panel-default">		
		<div class="panel-heading bg-info p-t-10 p-b-10">
			<span class="pull-left m-t-5"><img class="homepageImageTitle" data-src="plugins/images/tabs/discord.png" src="plugins/images/tabs/discord.png" data-was-processed="true"> &nbsp; <span lang="en">Announcements</span></span>
			<div class="clearfix"></div>
		</div>
	<div class="overflowhider"><embed id="discordwidget" src='WIDGETBOT IO'/></div>
	</div>
</div><div id="netdatacustom" class="col-lg-6">
	<div class="panel panel-default">		
		<div class="panel-heading bg-info p-t-10 p-b-10">
			<span class="pull-left m-t-5"><img class="homepageImageTitle" data-src="plugins/images/tabs/netdata.png" src="plugins/images/tabs/netdata.png" data-was-processed="true"> &nbsp; <span lang="en">Server Usage</span></span>
			<div class="clearfix"></div>
		</div>
		<div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
			  <br/>
			  <div data-netdata="system.cpu"
					  data-title="CPU Usage"
					  data-chart-library="dygraph"
					  data-width="95%"
					  data-height="100%"
					  data-after="-300"
					  data-dygraph-valuerange="[0, 100]"
					  ></div><br />
			  <div data-netdata="system.ipv4"
					data-common-max="traffic"
					data-common-min="traffic"
					data-title="Network Usage"
					data-chart-library="dygraph"
					data-width="95%"
					data-height="100%"
					data-after="-300"
					></div>
		</div>
	</div>
</div></div>

<script>
// this section has to appear before loading dashboard.js

// Select a theme.
// uncomment on of the two themes:

// var netdataTheme = 'default'; // this is white
var netdataTheme = 'slate'; // this is dark

// Set the default netdata server.
// on charts without a 'data-host', this one will be used.
// the default is the server that dashboard.js is downloaded from.

var netdataServer = 'https://SERVER/netdata/';
</script>

<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
<script type="text/javascript" src="/netdata/dashboard.js?v20180510"></script>

<script>
// destroy charts not shown (lowers memory on the browser)
NETDATA.options.current.destroy_on_hide = true;

// set this to false, to always show all dimensions
NETDATA.options.current.eliminate_zero_dimensions = true;

// lower the pressure on this browser
NETDATA.options.current.concurrent_refreshes = false;

// if the tv browser is too slow (a pi?)
NETDATA.options.current.parallel_refresher = true;

// always update the charts, even if focus is lost
NETDATA.options.current.stop_updates_when_focus_is_lost = true;
</script>

customhtml1.html

<style>
.overflowhider {
	height: 200px;
	overflow: hidden;
}

#discordwidget {
	left: -10px;
	position: relative;
	height: calc(200px + 230px);
	width: calc(100% + 10px);
	top: -100px;
}

#netdatawidget {
	height:calc(200px);
	width:calc(100%);
}
</style>
		
<div id="customHTML" class="row">
<div class="col-lg-6">
	<div class="panel panel-default">		
		<div class="panel-heading bg-info p-t-10 p-b-10">
			<span class="pull-left m-t-5"><img class="homepageImageTitle" data-src="plugins/images/tabs/discord.png" src="plugins/images/tabs/discord.png" data-was-processed="true"> &nbsp; <span lang="en">Announcements</span></span>
			<div class="clearfix"></div>
		</div>
	<div class="overflowhider"><embed id="discordwidget" src='WIDGETBOT IO EMBED URL'/></div>
	</div>
</div><div class="col-lg-6">
	<div class="panel panel-default">		
		<div class="panel-heading bg-info p-t-10 p-b-10">
			<span class="pull-left m-t-5"><img class="homepageImageTitle" data-src="plugins/images/tabs/discord.png" src="plugins/images/tabs/netdata.png" data-was-processed="true"> &nbsp; <span lang="en">Server Usage</span></span>
			<div class="clearfix"></div>
		</div>
	<div class="overflowhider"><embed id="netdatawidget" src='/customnetdata/custom.html'/></div>
	</div>
</div></div>