|
|
|
@ -21,123 +21,75 @@ |
|
|
|
<script src="js/amcharts/amcharts.js" type="text/javascript"></script> |
|
|
|
<script src="js/amcharts/serial.js" type="text/javascript"></script> |
|
|
|
<script src="js/amcharts/amstock.js" type="text/javascript"></script> |
|
|
|
<script src="js/amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script> |
|
|
|
|
|
|
|
<script> |
|
|
|
AmCharts.ready(function () { generateChartData(); createStockChart(); }); |
|
|
|
AmCharts.ready(function () { createStockChart(); }); |
|
|
|
|
|
|
|
function createStockChart() { |
|
|
|
var chartData = []; |
|
|
|
var chart = AmCharts.makeChart("chartdiv", { |
|
|
|
"type": "serial", |
|
|
|
"theme": "light", |
|
|
|
"dataDateFormat": "YYYY-MM-DD", |
|
|
|
"valueAxes": [{ "id": "v1", "position": "left"}], |
|
|
|
"graphs": [{ |
|
|
|
"id": "g1", |
|
|
|
"bullet": "round", |
|
|
|
"valueField": "value", |
|
|
|
"balloonText": "[[category]]: [[value]]" |
|
|
|
}], |
|
|
|
"categoryField": "date", |
|
|
|
"categoryAxis": { |
|
|
|
"parseDates": true, |
|
|
|
"equalSpacing": true, |
|
|
|
"dashLength": 1, |
|
|
|
"minorGridEnabled": true |
|
|
|
}, |
|
|
|
"dataProvider": chartData |
|
|
|
}); |
|
|
|
var startButton = document.getElementById('start'); |
|
|
|
var endButton = document.getElementById('stop'); |
|
|
|
startButton.addEventListener('click', startDemo); |
|
|
|
endButton.addEventListener('click', endDemo); |
|
|
|
var interval; |
|
|
|
|
|
|
|
function startDemo() { |
|
|
|
startButton.disabled = "disabled"; |
|
|
|
endButton.disabled = ""; |
|
|
|
interval = setInterval(getDataFromServer, 2000); |
|
|
|
alert("start"); |
|
|
|
} |
|
|
|
|
|
|
|
function generateChartData() { |
|
|
|
var firstDate = new Date(2012, 0, 1); |
|
|
|
firstDate.setDate(firstDate.getDate() - 1000); |
|
|
|
firstDate.setHours(0, 0, 0, 0); |
|
|
|
|
|
|
|
for (var i = 0; i < 1000; i++) { |
|
|
|
var newDate = new Date(firstDate); |
|
|
|
newDate.setHours(0, i, 0, 0); |
|
|
|
|
|
|
|
var a = Math.round(Math.random() * (40 + i)) + 100 + i; |
|
|
|
var b = Math.round(Math.random() * 100000000); |
|
|
|
function endDemo() { |
|
|
|
startButton.disabled = ""; |
|
|
|
endButton.disabled = "disabled"; |
|
|
|
clearInterval(interval); |
|
|
|
alert("stop"); |
|
|
|
} |
|
|
|
|
|
|
|
chartData.push({ date: newDate, value: a, volume: b }); |
|
|
|
function getDataFromServer() |
|
|
|
{ |
|
|
|
var i,newDate,newValue,newData = []; |
|
|
|
var newDataSize = Math.round(Math.random() + 3) + 1; |
|
|
|
if (chartData.length) |
|
|
|
newDate = new Date(chartData[chartData.length - 1].date); |
|
|
|
else newDate = new Date(); |
|
|
|
for (i = 0; i < newDataSize; ++i) |
|
|
|
{ |
|
|
|
newValue = Math.round(Math.random() * (40 + i)) + 10 + i; |
|
|
|
newDate.setDate(newDate.getDate() + 1); |
|
|
|
newData.push({ date: newDate, value: newValue }); |
|
|
|
} |
|
|
|
chartData.push.apply(chartData, newData); |
|
|
|
if (chartData.length > 500) |
|
|
|
chartData.splice(0, chartData.length - 500); |
|
|
|
chart.validateData(); //call to redraw the chart with new data |
|
|
|
} |
|
|
|
|
|
|
|
var chart; |
|
|
|
|
|
|
|
function createStockChart() { |
|
|
|
chart = new AmCharts.AmStockChart(); |
|
|
|
|
|
|
|
// As we have minutely data, we should set minPeriod to "mm" |
|
|
|
var categoryAxesSettings = new AmCharts.CategoryAxesSettings(); |
|
|
|
categoryAxesSettings.minPeriod = "mm"; |
|
|
|
chart.categoryAxesSettings = categoryAxesSettings; |
|
|
|
|
|
|
|
// DATASETS ////////////////////////////////////////// |
|
|
|
var dataSet = new AmCharts.DataSet(); |
|
|
|
dataSet.color = "#b0de09"; |
|
|
|
dataSet.fieldMappings = [{ fromField: "value", toField: "value" }, { fromField: "volume", toField: "volume" }]; |
|
|
|
dataSet.dataProvider = chartData; |
|
|
|
dataSet.categoryField = "date"; |
|
|
|
|
|
|
|
// set data sets to the chart |
|
|
|
chart.dataSets = [dataSet]; |
|
|
|
|
|
|
|
// PANELS /////////////////////////////////////////// |
|
|
|
// first stock panel |
|
|
|
var stockPanel1 = new AmCharts.StockPanel(); |
|
|
|
stockPanel1.showCategoryAxis = false; |
|
|
|
stockPanel1.title = "Value"; |
|
|
|
stockPanel1.percentHeight = 70; |
|
|
|
|
|
|
|
// graph of first stock panel |
|
|
|
var graph1 = new AmCharts.StockGraph(); |
|
|
|
graph1.valueField = "value"; |
|
|
|
graph1.type = "smoothedLine"; |
|
|
|
graph1.lineThickness = 2; |
|
|
|
graph1.bullet = "round"; |
|
|
|
graph1.bulletBorderColor = "#FFFFFF"; |
|
|
|
graph1.bulletBorderAlpha = 1; |
|
|
|
graph1.bulletBorderThickness = 3; |
|
|
|
stockPanel1.addStockGraph(graph1); |
|
|
|
|
|
|
|
// create stock legend |
|
|
|
var stockLegend1 = new AmCharts.StockLegend(); |
|
|
|
stockLegend1.valueTextRegular = " "; |
|
|
|
stockLegend1.markerType = "none"; |
|
|
|
stockPanel1.stockLegend = stockLegend1; |
|
|
|
|
|
|
|
// second stock panel |
|
|
|
var stockPanel2 = new AmCharts.StockPanel(); |
|
|
|
stockPanel2.title = "Volume"; |
|
|
|
stockPanel2.percentHeight = 30; |
|
|
|
var graph2 = new AmCharts.StockGraph(); |
|
|
|
graph2.valueField = "volume"; |
|
|
|
graph2.type = "column"; |
|
|
|
graph2.cornerRadiusTop = 2; |
|
|
|
graph2.fillAlphas = 1; |
|
|
|
stockPanel2.addStockGraph(graph2); |
|
|
|
|
|
|
|
// create stock legend |
|
|
|
var stockLegend2 = new AmCharts.StockLegend(); |
|
|
|
stockLegend2.valueTextRegular = " "; |
|
|
|
stockLegend2.markerType = "none"; |
|
|
|
stockPanel2.stockLegend = stockLegend2; |
|
|
|
|
|
|
|
// set panels to the chart |
|
|
|
chart.panels = [stockPanel1, stockPanel2]; |
|
|
|
|
|
|
|
// OTHER SETTINGS //////////////////////////////////// |
|
|
|
var scrollbarSettings = new AmCharts.ChartScrollbarSettings(); |
|
|
|
scrollbarSettings.graph = graph1; |
|
|
|
scrollbarSettings.usePeriod = "10mm"; // this will improve performance |
|
|
|
scrollbarSettings.updateOnReleaseOnly = false; |
|
|
|
scrollbarSettings.position = "top"; |
|
|
|
chart.chartScrollbarSettings = scrollbarSettings; |
|
|
|
|
|
|
|
var cursorSettings = new AmCharts.ChartCursorSettings(); |
|
|
|
cursorSettings.valueBalloonsEnabled = true; |
|
|
|
chart.chartCursorSettings = cursorSettings; |
|
|
|
|
|
|
|
// PERIOD SELECTOR /////////////////////////////////// |
|
|
|
var periodSelector = new AmCharts.PeriodSelector(); |
|
|
|
periodSelector.position = "top"; |
|
|
|
periodSelector.dateFormat = "YYYY-MM-DD JJ:NN"; |
|
|
|
periodSelector.inputFieldWidth = 150; |
|
|
|
periodSelector.periods = [{ period: "hh", count: 1, label: "1 hour" }, |
|
|
|
{ period: "hh", count: 2, label: "2 hours" }, |
|
|
|
{ period: "hh", count: 5, label: "5 hour" }, |
|
|
|
{ period: "hh", count: 12, label: "12 hours" }, |
|
|
|
{ period: "MAX", label: "MAX" }]; |
|
|
|
chart.periodSelector = periodSelector; |
|
|
|
|
|
|
|
var panelsSettings = new AmCharts.PanelsSettings(); |
|
|
|
panelsSettings.mouseWheelZoomEnabled = true; |
|
|
|
panelsSettings.usePrefixes = true; |
|
|
|
chart.panelsSettings = panelsSettings; |
|
|
|
|
|
|
|
chart.write('chartdiv'); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
</head> |
|
|
|
@ -706,8 +658,11 @@ data-path="{tc}/{config}"> |
|
|
|
</table> |
|
|
|
</div></div> |
|
|
|
|
|
|
|
<div id="chartdiv" style="width:95%; height:600px;"></div> |
|
|
|
|
|
|
|
<div class="chart"> |
|
|
|
<button id="start">Start</button> |
|
|
|
<button id="stop" disabled="disabled">Stop</button> |
|
|
|
<div id="chartdiv"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<style type="text/css"> |
|
|
|
#Blockexplorer_page .center { |
|
|
|
|
jl777
9 years ago