<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Some Title</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
$.get('Demo2_SP_plunkerPartial.prx', function (result) {
try {
var $result = $(result);
} catch (e) {
console.log(e);
}
$result.find('#content').appendTo('#new_content');
$result.find('script').appendTo('#new_content');
}, 'html');
});
</script>
</head>
<body>
<div id="new_content"></div>
<div id="container"></div>
</body>
</html>
// Code goes here
/* Styles go here */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div>
<div id="content">
content from the partial
</div>
<div>Some other content</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
alert('this is the alert from the partial')
</script>
<SCRIPT type="text/javascript">
$(function () {
$('#container').highcharts({
chart : {
zoomType : 'xy'
},
title : {
text : ' '
},
legend : {
align : 'center',
verticalAlign : 'bottom'
},
xAxis : [{
categories : ['0-100', '101-200', '201-300', '301-400', '401-500', '501-600', '601-700', '701-801', '901-1000', '1001-2000', '2001-5000', '5000+']
}
],
yAxis : [{ // Primary yAxis
labels : {
style : {
color : '#89A54E'
}
},
title : {
text : 'Customers',
style : {
color : '#89A54E'
}
}
}, { // Secondary yAxis
title : {
text : 'Value ($)',
style : {
color : '#4572A7'
}
},
labels : {
style : {
color : '#4572A7'
}
},
opposite : true
}
],
tooltip : {
shared : true
},
series : [{
name : 'Value ($)',
color : '#4572A7',
type : 'column',
yAxis : 1,
data : [52250, 195985, 512810, 318107.5, 1287202.5, 362520, 80037.5, 290510, 85975, 1403007.5, 1248727.5, 1025857.5, 172330]
}, {
name : 'Customers',
color : '#89A54E',
type : 'column',
data : [550, 1032, 1918, 842, 2712, 639, 121, 389, 101, 1477, 841, 354, 24]
}
]
});
});
</SCRIPT>
</div>
</body>
</html>