Skip to content

Instantly share code, notes, and snippets.

@BirkhoffLee
Created January 16, 2019 08:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BirkhoffLee/25cd9fda0468320257d26bf3a5a0b587 to your computer and use it in GitHub Desktop.
Save BirkhoffLee/25cd9fda0468320257d26bf3a5a0b587 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
// don't load bootstrap - confluence does not need this
var netdataNoBootstrap = true;
var netdataTheme = 'white';
var netdataPrepCallback = function() {
NETDATA.themes.mytheme = {
background: 'transparent',
foreground: 'transparent',
grid: 'rgba(255, 255, 255, 0.31)',
axis: 'rgba(255, 255, 255, 0.31)',
highlight: '#383838',
colors: ['#66AA00', '#FE3912', '#3366CC', '#D66300', '#0099C6', '#DDDD00',
'#5054e6', '#EE9911', '#BB44CC', '#e45757', '#ef0aef', '#CC7700',
'#22AA99', '#109618', '#905bfd', '#f54882', '#4381bf', '#ff3737',
'#329262', '#3B3EFF' ],
easypiechart_track: '#373b40',
easypiechart_scale: '#373b40',
gauge_pointer: '#474b50',
gauge_stroke: '#373b40',
gauge_gradient: false,
d3pie: {
title: '#C8C8C8',
subtitle: '#283236',
footer: '#283236',
other: '#283236',
mainlabel: '#C8C8C8',
percentage: '#dddddd',
value: '#cccc44',
tooltip_bg: '#272b30',
tooltip_fg: '#C8C8C8',
segment_stroke: "#283236",
gradient_color: '#000000'
}
};
// set it as the current one
NETDATA.themes.current = NETDATA.themes.mytheme;
NETDATA.options.current.stop_updates_when_focus_is_lost = false;
NETDATA.options.current.legend_toolbox = false;
NETDATA.options.current.resize_charts = false;
};
</script>
<!-- here we will add dashboard.js -->
<script type="text/javascript" src="http://localhost:19999/dashboard.js"></script>
<style>
/* Fixes to the theme to remove background color */
body {
background-color: transparent;
color: #c8c8c8;
margin-top: 0
}
.netdata-legend-value {background-color: transparent;}
.netdata-legend-toolbox {background-color: transparent;}
.netdata-legend-toolbox-button {background-color: transparent;}
.netdata-legend-resize-handler {background-color: transparent;}
/* comment line below to restore current date on graph */
.netdata-legend-title-date {color: transparent;}
/* comment line below to restore current time on graphs */
.netdata-legend-title-time {color: transparent;}
/* To give more space to the legend, in order not to cuttoff when 3 series (PING)*/
.netdata-legend-title-units {margin-top: -10px;}
.netdata-legend-series {height: 45px;}
.netdata-legend-series {margin-top: -10px;}
.netdata-chart-with-legend-right {
margin-right: 110px;
width: calc(100% - 110px);
}
.netdata-chart-legend, .netdata-legend-series {
width: 110px;
}
</style>
</head>
<body>
<div data-netdata="system.cpu"
data-title="CPU utilization (%)"
data-chart-library="dygraph"
data-after="-100"
data-dygraph-valuerange="[0, 100]"
data-dygraph-labelsDivWidth="0"
style="left: -33px"
data-legend="no"
></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment