Realtime stock chart
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 355px;"></div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsButtonSelected
{
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton
{
background-color:#EEEEEE;
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
color:#000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsCompareList
{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
JavaScript
var firstDate = new Date();
firstDate.setHours(0,0,0,0);
var chartData1 = [{
date: AmCharts.formatDate(firstDate,"YYYY-MM-DD-JJ-NN-SS"),
accounts_active: 0,
subscribers: 0
}];
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
pathToImages: "http://amcharts.com/lib/3/images/",
dataDateFormat: "YYYY-MM-DD-JJ-NN-SS",
dataSets: [{
fieldMappings: [{
fromField: "accounts_active",
toField: "accounts_active"
}, {
fromField: "subscribers",
toField: "subscribers"
}],
dataProvider: chartData1,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Active accounts",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "accounts_active",
bulletSizeField: 'accounts_active',
bullet: "round",
bulletBorderColor: "#FFFFFF",
bulletBorderAlpha: 1,
}],
stockLegend: {}
},
{
title: "Subscribers",
percentHeight: 30,
stockGraphs: [{
valueField: "subscribers",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {}
}],
categoryAxesSettings: {
minPeriod: "ss",
maxSeries: 0
},
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
periodSelector: {
position: "left",
periods: [{
period: "ss",
count: 30,
selected: true,
label: "30 seconds"
},{
period: "mm",
count: 1,
label: "1 minute"
},{
period: "mm",
count: 15,
label: "15 minutes"
},{
period: "hh",
count: 1,
label: "1 hour"
},{
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});
AmCharts.loadJSON = function...