<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Data Manipulation Operations Grouping</title>
<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
<script type="text/javascript" language="javascript" src="./js/Randomizer.js"></script>
<style type="text/css">
#chartContainer {
width: 800px;
height: 400px;
}
</style>
<style type="text/css">
table .commands {
border-style: solid;
border-width: 1px;
border-color: #D0CDC9;
}
tr .header {
background-color: #DCD9D5;
}
tr .content{
background-color: #F8F4F0;
}
</style>
<script type="text/javascript" language="javascript">
// Creating new chart object.
var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
// Writing the flash object into the page DOM.
chart.write("chartContainer");
//--------------------------------------------------------------------------------
// Data sets info
//--------------------------------------------------------------------------------
// ds1 data set information
var dataSet1Info = {
id: "ds1", // id
start: null, // start date
end: null, // end date
lastValue: NaN, // last value
randomizer: new Randomizer(31.39, 30, 33, .1) // randomizer
};
// ds2 data set information
var dataSet2Info = {
id: "ds2", // id
start: null, // start date
end: null, // end date
lastValue: NaN, // last value
randomizer: new Randomizer(28.24, 26.5, 29.5, .1) // randomizer
};
// ds3 data set information
var dataSet3Info = {
id: "ds3", // id
start: null, // start date
end: null, // end date
lastValue: NaN, // last value
randomizer: new Randomizer(30.16, 28.6, 31.6, .1) // randomizer
};
// reset data sets information
reset();
// function to reset data sets information and config
function reset() {
// onChartDraw handler
chart.onChartDraw = function() {
dataSet1Info.start = chart.getFirstDate(); // data set ds1 start date
dataSet2Info.start = new Date(dataSet1Info.start.getTime()); // data set ds2 start date
dataSet3Info.start = new Date(dataSet1Info.start.getTime()); // data set ds3 start date
dataSet1Info.end = chart.getLastDate(); // data set ds1 end date
dataSet2Info.end = new Date(dataSet1Info.end.getTime()); // data set ds2 end date
dataSet3Info.end = new Date(dataSet1Info.end.getTime()); // data set ds3 end date
dataSet1Info.lastValue = chart.getSeriesValue("idMainChart","s1").last; // last value of ds1
dataSet2Info.lastValue = chart.getSeriesValue("idMainChart","s2").last; // last value of ds2
dataSet3Info.lastValue = chart.getSeriesValue("idMainChart","s3").last; // last value of ds3
chart.onChartDraw = null;
};
// reset config file
chart.setXMLFile("config.xml");
}
//--------------------------------------------------------------------------------
// Auxiliary Functions
//--------------------------------------------------------------------------------
// Function to create a point with random value at the end of the data set
function createPoint(dsInfo) {
dsInfo.end.setUTCMinutes(dsInfo.end.getUTCMinutes() + 1); // date increment
dsInfo.lastValue = dsInfo.randomizer.next(); // generate random value
return (dsInfo.end.getTime()/1000).toString()+","+dsInfo.lastValue+"\n"; // csv row
}
//--------------------------------------------------------------------------------
// Actions
//--------------------------------------------------------------------------------
// cmd1 - Add 30 points to the end of each data set.
function cmd1() {
// csv data strings
var csv1Data = "";
var csv2Data = "";
var csv3Data = "";
// random points generation
for (var i = 0;i<30;i++) {
csv1Data += createPoint(dataSet1Info);
csv2Data += createPoint(dataSet2Info);
csv3Data += createPoint(dataSet3Info);
}
// append random data to datasets
chart.appendData(dataSet1Info.id, csv1Data);
chart.appendData(dataSet2Info.id, csv2Data);
chart.appendData(dataSet3Info.id, csv3Data);
// apply data changes
chart.commitDataChanges();
}
// cmd2 - Remove 30 points from the beginning and add 30 points to the end of each data set.
function cmd2() {
// csv data strings
var csv1Data = "";
var csv2Data = "";
var csv3Data = "";
// random points generation
for (var i = 0;i<30;i++) {
csv1Data += createPoint(dataSet1Info);
csv2Data += createPoint(dataSet2Info);
csv3Data += createPoint(dataSet3Info);
}
// append random data to datasets and remove first 30 points from each data set
chart.appendData(dataSet1Info.id, csv1Data, 30);
chart.appendData(dataSet2Info.id, csv2Data, 30);
chart.appendData(dataSet3Info.id, csv3Data, 30);
// update info about data sets start dates (add 30 minutes)
dataSet1Info.start.setUTCMinutes(dataSet1Info.start.getUTCMinutes()+30);
dataSet2Info.start.setUTCMinutes(dataSet2Info.start.getUTCMinutes()+30);
dataSet3Info.start.setUTCMinutes(dataSet3Info.start.getUTCMinutes()+30);
// apply data changes
chart.commitDataChanges();
}
// auxiliary function to populate dataSet with random values
function fillDataSet(dataSetInfo) {
// csv data string
var csvData = "";
// loop through all dates in dataset and create new random point
var targetEnd = new Date(dataSetInfo.end.getTime());
dataSetInfo.end = new Date(dataSetInfo.start.getTime());
while (dataSetInfo.end < targetEnd)
csvData += createPoint(dataSetInfo);
// add data into data set
chart.appendData(dataSetInfo.id, csvData);
}
// cmd3 - Remove all points from all data sets and populate them with new random data.
function cmd3() {
// remove all points from each data set
chart.removeDataRange(dataSet1Info.id, dataSet1Info.start, dataSet1Info.end);
chart.removeDataRange(dataSet2Info.id, dataSet2Info.start, dataSet2Info.end);
chart.removeDataRange(dataSet3Info.id, dataSet3Info.start, dataSet3Info.end);
// populate data sets with random data
fillDataSet(dataSet1Info);
fillDataSet(dataSet2Info);
fillDataSet(dataSet3Info);
// apply data changes
chart.commitDataChanges();
}
</script>
<!-- table settings -->
<style type="text/css">
table.settings {
border-style: solid;
border-width: 1px;
border-color: #D0CDC9;
}
table.settings tr th {
font:normal 60% Verdana;
background-color: #DCD9D5;
font-weight:bold;
padding-bottom:5px;
padding-top:5px;
padding-left:10px;
text-align:left;
}
table.settings tr td {
background-color: #F8F4F0;
font:normal 70% Verdana;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
text-align:left;
}
</style>
</head>
<body>
<div id="chartContainer"><!-- Chart Container --></div>
<table class="settings" width="800">
<tr>
<th width="55">Cmd#</th>
<th>Description</th>
<th>Command Execution</th>
</tr>
<tr>
<td>Cmd 1</td>
<td>Add 30 points to the end of each data set.</td>
<td><input type="button" value="Exec" onclick="cmd1()" /></td>
</tr>
<tr>
<td>Cmd 2</td>
<td>Remove 30 points from the beginning and add 30 points to the end of each data set.</td>
<td><input type="button" value="Exec" onclick="cmd2()" /></td>
</tr>
<tr>
<td>Cmd 3</td>
<td>Remove all points from all data sets and populate them with new random data.</td>
<td><input type="button" value="Exec" onclick="cmd3()" /></td>
</tr>
<tr>
<td>Reset</td>
<td>Reset all changes. </td>
<td><input type="button" value="Reset" onclick="reset()"/></td>
</table>
</body>
</html>
Sample Description
How to use this sample?
Click any of the buttons below the chart to execute groups of data manipulation commands or use "Reset" button to set initial state.
How it works
AnyChart Stock component gives you the ability to add, remove or modify data points in real-time without full chart reloading and redrawing - you can do just what you need in a fast and flexible way.
This sample studies the use of appendData, removeDataRow, removeDataRange methods. In all these methods you should specify the name of the data set you want to change, which means that one call of each method changes only one data set, and they should be called several times to change several data sets. Also, all these methods are based on deferred application principle, that allows to make several modifications in one or several data sets and then apply them at one time using commitDataChanges function.
Every "command", that is launched upon button click is actually a group of data manipulation methods that ends with commitDataChanges.
You can learn everything you need to know about real-time data streaming and update in Real-Time Data Streaming and Data Manipulations article.
AnyChartStock JavaScript API
This sample uses the following methods, properties and events from AnyChartStock JavaScript API:
| Item |
Type |
Description |
| appendData |
Method |
Appends data to the chart.
|
| commitDataChanges |
Method |
Commits data appends and data points erasure made by appendData(), removeDataRow() and removeDataRange() method calls.
|
| getFirstDate |
Method |
Gets the first date of all used by visible series data sources.
|
| getLastDate |
Method |
Gets the last date from all mapped and used by visible series data sources.
|
| getSeriesValue |
Method |
Gets info about "value" (or "close" field, if "value" field is not specified) series field.
|
| removeDataRange |
Method |
Removes data range from a data set by the range of dates.
|
| setXMLFile |
Method |
Sets chart XML configuration file path.
|
| write |
Method |
Adds the chart to HTML DOM as a child of the specified container.
|
| onChartDraw |
Event |
This event is dispatched when the AnyChart Stock is drawn. |
Prerequisites
This section lists all configuration, data and auxiliary files required for this sample.
Configuration file
CSV files
SWF files
- AnyChartStock.swf - AnyChart Stock component.
- Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.
JavaScript Libraries
- Randomizer.js - A sample JavaScript library that generates random values.
- AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.