SmartClient_v90p_2013-09-17
The code below creates a line chart that scrolls showing the heart rate at a specific period. I am displaying the min and max values as static lines, by creating data points for every period. Is there an easier way to do this other than creating three data points every time (low, actual and high)? The actual number is the only ones that changes, it would be nice to have a property on the facetchart to set these static values once for the chart.
The code below creates a line chart that scrolls showing the heart rate at a specific period. I am displaying the min and max values as static lines, by creating data points for every period. Is there an easier way to do this other than creating three data points every time (low, actual and high)? The actual number is the only ones that changes, it would be nice to have a property on the facetchart to set these static values once for the chart.
Code:
<!DOCTYPE html>
<html>
<head>
<title >SNTQ-1785</title>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic/";
</script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
<script type="text/javascript">
var data = [];
var cnt = 0;
var maxIterations = 100; // total number of iterations before we quit
var dataPointsPerIteration = 1; // total number of data points to genrate each iteration
var timeout = 2000; // milli-seconds
var randomMax = 160;
function generateRandomData(n, it) {
for(var i=0; i < it; i++) {
// generate a random number between 0 and 160
// this will be our actual heart rate
var val = Math.floor((Math.random()*n)+1);
// we need three data points per date
//var d = new Date();
//var str = d.getYear() + "-" + d.getMonth() + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
data.push({ type: "high", date:cnt, value:100 });
data.push({ type: "low", date:cnt, value:60 });
data.push({ type: "actual", date:cnt, value:val });
cnt++;
}
chart.setData(data.slice(0));
// do this again in 5 seconds
if(cnt < maxIterations) {
setTimeout(function() {
generateRandomData(randomMax, dataPointsPerIteration);
}, timeout );
}
}
</script>
</head>
<body>
<script>
chart = isc.FacetChart.create({
width: 508,
height: 400,
chartType: "Line",
valueTitle: "Beats Per Minute (BPM)",
facets: [
{
id: "date"
},
{
id: "type"
}
],
valueProperty: "value",
border: "1px solid black",
showTitle: false,
dataColors: ["#ff0000", "#0000ff", "#00ff00"]
});
generateRandomData(randomMax, 1);
</script>
</body>
</html>