SoundCloud-like stock chart
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chartData = generateChartData();
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 100; 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);
chartData.push({
date: newDate,
value: a,
volume: b,
zero: 0,
image: 'http://lorempixel.com/30/30/?'+Math.random(),
description: '<div style="width: 200px;"><img src="http://lorempixel.com/30/30/?'+Math.random()+'" style="float: left; margin: 0 10px 0 0; width: 30px; height: 30px;"> Commented<br />This is <b>another</b> line</div>'
});
}
return chartData;
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
pathToImages: "http://www.amcharts.com/lib/3/images/",
categoryAxesSettings: {
minPeriod: "mm",
maxSeries: 0,
startOnAxis: true
},
ValueAxesSettings: {
minimum: -1
},
balloon: {
textAlign: "left",
maxWidth: 200,
position: "top"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "image",
toField: "image"
}, {
fromField: "description",
toField: "description"
}, {
fromField: "zero",
toField: "zero"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
title: "Value",
stockGraphs: [{
id: "g1",
valueField: "value",
type: "line",
lineThickness: 2,
bullet: "round",
balloonText: "[[description]]"
}, {
id: "g2",
valueField: "zero",
type: "line",
bullet: "custom",
customBulletField: "image",
bulletSize:...