Rev 915 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>amStock Example</title><link rel="stylesheet" href="images/style.css" type="text/css"><script src="../amcharts/amcharts.js" type="text/javascript"></script><script src="../amcharts/serial.js" type="text/javascript"></script><script src="../amcharts/amstock.js" type="text/javascript"></script><script>var chartData1 = [];AmCharts.ready(function () {generateChartData();createStockChart();});function generateChartData() {var firstDate = new Date();firstDate.setDate(firstDate.getDate() - 500);firstDate.setHours(0, 0, 0, 0);for (var i = 0; i < 500; i++) {var newDate = new Date(firstDate);newDate.setDate(newDate.getDate() + i);var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;// generate spike hereif (i > 350 && i < 410) {a1 = a1 * 2;b1 = b1 * 2;}chartData1.push({date: newDate,value: a1,volume: b1});}}function createStockChart() {var chart = new AmCharts.AmStockChart();chart.color = "#FFFFFF";chart.fontFamily = "Amatic SC";chart.fontSize = 20;var balloon = chart.balloon;balloon.adjustBorderColor = false;balloon.color = "#FFFFFF";balloon.borderThickness = 1;balloon.verticalPadding = 0;// DATASETS //////////////////////////////////////////var dataSet1 = new AmCharts.DataSet();dataSet1.title = "first data set";dataSet1.fieldMappings = [{fromField: "value",toField: "value"}, {fromField: "volume",toField: "volume"}];dataSet1.dataProvider = chartData1;dataSet1.categoryField = "date";// set data sets to the chartchart.dataSets = [dataSet1];// PANELS ///////////////////////////////////////////// first stock panelvar stockPanel1 = new AmCharts.StockPanel();stockPanel1.showCategoryAxis = false;stockPanel1.title = "Value";stockPanel1.percentHeight = 60;// graph of first stock panelvar graph1 = new AmCharts.StockGraph();graph1.valueField = "value";graph1.useDataSetColors = false;graph1.lineColor = "#FFFFFF";graph1.lineAlpha = 0.8;graph1.fontSize = 25;//graph1.balloonText = "[[description]]";graph1.showBalloon = false;stockPanel1.addStockGraph(graph1);// create stock legendvar stockLegend1 = new AmCharts.StockLegend();stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";stockLegend1.periodValueTextRegular = "[[value.close]]";stockLegend1.labelText = "";stockLegend1.markerType = "none";stockLegend1.color = "#FFFFFF";stockPanel1.stockLegend = stockLegend1;var e1 = {date: new Date(chartData1[chartData1.length - 120].date),type: "pin",backgroundColor: "#FFFFFF",backgroundAlpha: 0.1,graph: graph1,text: "M",color: "#FFFFFF",description: "First contact with Martians"};dataSet1.stockEvents = [e1];// second stock panelvar stockPanel2 = new AmCharts.StockPanel();stockPanel2.title = "Volume";stockPanel2.percentHeight = 40;var graph2 = new AmCharts.StockGraph();graph2.valueField = "volume";graph2.type = "column";graph2.showBalloon = false;graph2.useDataSetColors = false;graph2.lineColor = "#FFFFFF";graph2.lineAlpha = 0;graph2.fillAlphas = 0.8;graph2.pattern = {url: "patterns/white/pattern3.png",width: 4,height: 4};stockPanel2.addStockGraph(graph2);var stockLegend2 = new AmCharts.StockLegend();stockLegend2.periodValueTextRegular = "[[value.close]]";stockLegend2.color = "#FFFFFF";stockLegend2.labelText = "";stockLegend2.markerType = "none";stockPanel2.stockLegend = stockLegend2;// set panels to the chartchart.panels = [stockPanel1, stockPanel2];var panelsSettings = new AmCharts.PanelsSettings();panelsSettings.marginLeft = 16;panelsSettings.marginRight = 16;panelsSettings.color = "#FFFFFF";panelsSettings.fontFamily = "Amatic SC";panelsSettings.fontSize = 20;chart.panelsSettings = panelsSettings;// OTHER SETTINGS ////////////////////////////////////var sbsettings = new AmCharts.ChartScrollbarSettings();sbsettings.graph = graph1;sbsettings.graphLineColor = "#FFFFFF";sbsettings.graphLineAlpha = 1;sbsettings.graphFillColor = "#FFFFFF";sbsettings.graphFillAlpha = 0;sbsettings.selectedGraphLineColor = "#FFFFFF";sbsettings.selectedGraphLineAlpha = 0;sbsettings.selectedGraphFillColor = "#FFFFFF";sbsettings.usePeriod = "WW";sbsettings.selectedGraphFillAlpha = 0;sbsettings.gridCount = 0;sbsettings.gridColor = "#FFFFFF";sbsettings.gridAlpha = 0.7;sbsettings.autoGridCount = false;sbsettings.skipEvent = false;sbsettings.color = "#FFFFFF";sbsettings.backgroundColor = "#FFFFFF";sbsettings.backgroundAlpha = 0;sbsettings.selectedBackgroundColor = "#FFFFFF";sbsettings.selectedBackgroundAlpha = 0.3;sbsettings.updateOnReleaseOnly = false;chart.chartScrollbarSettings = sbsettings;var stockEventsSettings = new AmCharts.StockEventsSettings();stockEventsSettings.balloonColor = "#000000";stockEventsSettings.borderColor = "#FFFFFF";chart.stockEventsSettings = stockEventsSettings;// CURSORvar cursorSettings = new AmCharts.ChartCursorSettings();cursorSettings.valueBalloonsEnabled = true;cursorSettings.cursorColor = "#FFFFFF";cursorSettings.cursorAlpha = 0.7;cursorSettings.color = "#000000";cursorSettings.valueLineEnabled = true;cursorSettings.valueLineBalloonEnabled = true;chart.chartCursorSettings = cursorSettings;var legendSettings = new AmCharts.LegendSettings();legendSettings.marginLeft = 14;chart.legendSettings = legendSettings;// PERIOD SELECTOR ///////////////////////////////////var periodSelector = new AmCharts.PeriodSelector();periodSelector.position = "bottom";periodSelector.periods = [{period: "DD",count: 10,label: "10 days"}, {period: "MM",count: 1,label: "1 month"}, {period: "YYYY",count: 1,selected: true,label: "1 year"}, {period: "YTD",label: "YTD"}, {period: "MAX",label: "MAX"}];chart.periodSelector = periodSelector;var categoryAxesSettings = new AmCharts.CategoryAxesSettings();categoryAxesSettings.axisHeight = 35;chart.categoryAxesSettings = categoryAxesSettings;var valueAxesSettings = new AmCharts.ValueAxesSettings();valueAxesSettings.gridColor = "#FFFFFF";chart.valueAxesSettings = valueAxesSettings;chart.write('chartdiv');}</script></head><body style="background-image:url('images/bg.jpg');line-height: 70%"><div id="chartdiv" style="position:absolute;top:50px;left:50px; width:940px; height:570px;"></div><img src="images/overlay1.png" style="position: absolute;left:215px;top: 254px;"><img src="images/overlay2.png" style="position: absolute;left:316px;top: 380px;"><img src="images/overlay3.png" style="position: absolute;left:578px;top: 216px;"><img src="images/overlay4.png" style="position: absolute;left:602px;top: 355px;"></body></html>