adam-garcia/dashboard_analysis.R

## dashboard_analysis.R
library(knitr)


# Load Data
dates <- c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
Tokyo <- c(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)
London <- c(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8)

# Calculate an average
mean_of_Tokyo <- mean(Tokyo)
mean_of_London <- mean(London)


## Now knit together the data and HTML ##
knit("./index.Rhtml", output = "./index.html")

# Now you can upload index.html to your server

## index.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.knitr .inline {
  background-color: #f7f7f7;
  border:solid 1px #B0B0B0;
}
.error {
	font-weight: bold;
	color: #FF0000;
}
.warning {
	font-weight: bold;
}
.message {
	font-style: italic;
}
.source, .output, .warning, .error, .message {
	padding: 0 1em;
  border:solid 1px #F7F7F7;
}
.source {
  background-color: #f5f5f5;
}
.rimage .left {
  text-align: left;
}
.rimage .right {
  text-align: right;
}
.rimage .center {
  text-align: center;
}
.hl.num {
  color: #AF0F91;
}
.hl.str {
  color: #317ECC;
}
.hl.com {
  color: #AD95AF;
  font-style: italic;
}
.hl.opt {
  color: #000000;
}
.hl.std {
  color: #585858;
}
.hl.kwa {
  color: #295F94;
  font-weight: bold;
}
.hl.kwb {
  color: #B05A65;
}
.hl.kwc {
  color: #55aa55;
}
.hl.kwd {
  color: #BC5A65;
  font-weight: bold;
}
</style>
<title>Page Title: Daily Dashboard</title>

<!-- Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>

</head>
<body>

<h1>This is a Heading: Check out These Average Temperatures!</h1>
<p>This is a paragraph. Check out this timeseries. Over the last 12 months, London had an average temperature of 9.9083333 while Tokyo had an average of 16.2. Now here is a chart:</p>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>

## index.Rhtml
<!DOCTYPE html>
<html>
<head>
<title>Page Title: Daily Dashboard</title>

<!-- Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: [<!--rinline I(shQuote(dates)) -->]
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [<!--rinline I(Tokyo) -->]
        }, {
            name: 'London',
            data: [<!--rinline I(London) -->]
        }]
    });
});
</script>

</head>
<body>

<h1>This is a Heading: Check out These Average Temperatures!</h1>
<p>This is a paragraph. Check out this timeseries. Over the last 12 months, London had an average temperature of <!--rinline I(mean_of_London) --> while Tokyo had an average of <!--rinline I(mean_of_Tokyo) -->. Now here is a chart:</p>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
	library(knitr)


	# Load Data
	dates <- c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')
	Tokyo <- c(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)
	London <- c(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8)

	# Calculate an average
	mean_of_Tokyo <- mean(Tokyo)
	mean_of_London <- mean(London)


	## Now knit together the data and HTML ##
	knit("./index.Rhtml", output = "./index.html")

	# Now you can upload index.html to your server
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	.knitr .inline {
	background-color: #f7f7f7;
	border:solid 1px #B0B0B0;
	}
	.error {
	font-weight: bold;
	color: #FF0000;
	}
	.warning {
	font-weight: bold;
	}
	.message {
	font-style: italic;
	}
	.source, .output, .warning, .error, .message {
	padding: 0 1em;
	border:solid 1px #F7F7F7;
	}
	.source {
	background-color: #f5f5f5;
	}
	.rimage .left {
	text-align: left;
	}
	.rimage .right {
	text-align: right;
	}
	.rimage .center {
	text-align: center;
	}
	.hl.num {
	color: #AF0F91;
	}
	.hl.str {
	color: #317ECC;
	}
	.hl.com {
	color: #AD95AF;
	font-style: italic;
	}
	.hl.opt {
	color: #000000;
	}
	.hl.std {
	color: #585858;
	}
	.hl.kwa {
	color: #295F94;
	font-weight: bold;
	}
	.hl.kwb {
	color: #B05A65;
	}
	.hl.kwc {
	color: #55aa55;
	}
	.hl.kwd {
	color: #BC5A65;
	font-weight: bold;
	}
	</style>
	<title>Page Title: Daily Dashboard</title>

	<!-- Highcharts scripts -->
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<script>
	$(function() {
	var chart = new Highcharts.Chart({
	chart: {
	renderTo: 'container'
	},
	title: {
	text: 'Monthly Average Temperature',
	x: -20 //center
	},
	subtitle: {
	text: 'Source: WorldClimate.com',
	x: -20
	},
	xAxis: {
	categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
	},
	yAxis: {
	title: {
	text: 'Temperature (°C)'
	},
	plotLines: [{
	value: 0,
	width: 1,
	color: '#808080'
	}]
	},
	tooltip: {
	valueSuffix: '°C'
	},
	legend: {
	layout: 'vertical',
	align: 'right',
	verticalAlign: 'middle',
	borderWidth: 0
	},
	series: [{
	name: 'Tokyo',
	data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	}, {
	name: 'London',
	data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6, 14.2, 10.3, 6.6, 4.8]
	}]
	});
	});
	</script>

	</head>
	<body>

	<h1>This is a Heading: Check out These Average Temperatures!</h1>
	<p>This is a paragraph. Check out this timeseries. Over the last 12 months, London had an average temperature of 9.9083333 while Tokyo had an average of 16.2. Now here is a chart:</p>

	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
	</html>