AnyChart sample

by andypotanin

HTML

<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<cfheader name="X-XSS-Protection" value="0">
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" /><div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var chart;		
var intervalVar;
var index=0;
var newData = [
["2017-01-16",64.0,64.9,63.9,64.5,1481843189999],
["2017-01-17",64.5,64.55,64.35,64.4,1481843219999],
["2017-01-18",65.4,65.7,65.0,65.0,1481843279999],
  ];
    
var initialData = [
["2017-01-15",64.27,64.5,64.27,64.5,1481843039999],
  ];
  
var trendlineData= new Array();;
trendlineData["1"]=[1,2,3,4];
  
function get_custom_daily_data() {
	console.log("index:"+index); 
	if(index < newData.length)
	{
		console.log(newData[index]); 
		return newData[index];
	}
	else
	{
		console.log("no more newData"); 	
		return [];
	}
}

function get_trendline_data() {
	
	if(trendlineData[index])
	{
		console.log(trendlineData[index]); 
		return trendlineData[index];
	}
	else
	{
		console.log("no more newData"); 	
		return [];
	}
}

var msftDataTable;
function addPoint() {
	//alert("Hello!");
	var placeholderArray = [];
	var returnValue = get_custom_daily_data()
	console.log ("returnValue.length:"+returnValue.length)
	if(returnValue.length !=0)
	{	
		placeholderArray[0]=returnValue;
		console.log(placeholderArray)
		msftDataTable.addData(placeholderArray);
		index++;
	}
	else
		clearInterval(intervalVar);
}

	
anychart.onDocumentReady(function() {
// The data that have been used for this sample can be taken from the CDN
// http://cdn.anychart.com/csv-data/msft-daily-short.js
// http://cdn.anychart.com/csv-data/orcl-daily-short.js
// http://cdn.anychart.com/csv-data/csco-daily-short.js
// http://cdn.anychart.com/csv-data/ibm-daily-short.js

// create data tables on loaded data
msftDataTable = anychart.data.table();
msftDataTable.addData(initialData);

/*
var orclDataTable = anychart.data.table();
orclDataTable.addData(get_orcl_daily_short_data());

var cscoDataTable = anychart.data.table();
cscoDataTable.addData(get_csco_daily_short_data());
*/
// create stock chart
chart = anychart.stock();

// create plot on the chart
var plot1 = chart.plot(0);
/*
var ORCL = plot1.line(orclDataTable.mapAs({'value':...