OutputExample

HTML

<form action="" method="get" accept-charset="UTF-8">
  <table>
    <tr><th align="left"><h1>Output</h1></th></tr>
    <tr><td align="left">
      <select id="selectionidx" name="selectionidx" class="scriptSelection" size="1" onChange="this.form.submit()">
        <option value="0" >link1</option>
        <option value="1" selected="selected" >link2</option>
      </select>
    </td></tr>
    <tr><td align="center" class="scriptTD">
      <pre id="script"><span class="placeHolder">The output block for JSON script!</span></pre>
    </td></tr>
    <tr><td align="right"><a href="/runtime?viewMode=view" target="_blank">Job States</a></td></tr>
  </table>
</form>

CSS

@charset "ISO-8859-1";
html, body
{
	height: 99%;
	width: 99%;
	position: auto;
	overflow: auto;
}

table {
	border-spacing: 10px;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	
	width: 100%; 
	height: 100%;
	
	border: thin solid;
}

pre#script {
	width: 99%;
	height: 100%;
	overflow: auto;
	
	outline: 1px solid #ccc; 
	margin: 5px;
	
	text-align: left;
}

.scriptTD{
	height: 100%;
}

.scriptSelection { 
	resize: none; 
	width: 99%; 
	height: 100%;
	
	white-space: nowrap;
	overflow: auto;
}

.scriptSelection:focus {
	outline-color: LightSkyBlue;
}

JavaScript

function output(inp) {
    document.getElementById('script').innerHTML = inp;
}

var obj = [{"date":"1998-12-27","x1_volume":104626800,"x2_ratio":0},{"date":"1999-02-28","x1_volume":244379200,"x2_ratio":0},{"date":"1999-03-07","x1_volume":326336800,"x2_ratio":0},{"date":"1999-03-14","x1_volume":322491200,"x2_ratio":0}];

var str = JSON.stringify(obj, null, 4);
output( str );