You need to wrap your main script in an onload
type handler, so it'll only run AFTER the dom has been loaded/parsed. One quick/dirty way of doing it is
<script>
function foo() {
// your var barchartdata etc... goes here
}
</script>
<body onload="foo();">
....
</body>
If you were using jquery, you'd get a somewhat more reliable
$(document).ready(function() {
/// var barchartdata stuff goes here
});
As for mingling the client-/server-side code, not really possible, since they execute in totally different environments. client-side JS code can't directly call on server-side code, and server-side code can't call client-side code, because JS calls cannot pass through an HTTP layer. You COULD use an ajax call to indirectly call things, but then you're still using HTTP.