#6880
by amcharts
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="amCharts"></div>
CSS
#amCharts {
width : 100%;
height : 500px;
}
JavaScript
$(document).ready(function () {
amChart = AmCharts.makeChart("amCharts", {
type: "stock",
theme: "none",
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
balloon: {
fillColor: "#ff0000",
color: "#ffffff",
borderThickness: 0,
//cornerRadius: 3,
showBullet: true
},
valueAxesSettings: [{
axisAlpha: 0.2,
color: "#ff0000",
axisColor: "#d1d1d1",
dashLength: 1,
position: "left",
autoGridCount: false,
gridThickness: 1,
gridCount: 1
}],
categoryAxesSetting: [{
position: "top",
autoGridCount: false,
gridThickness: 0,
gridAlpha: 0,
minorGridAlpha: 0,
//gridColor: 5,
gridCount: 0,
parseDates: true,
axisColor: "#d1d1d1",
//dashLength: 10,
//minorGridEnabled: false,
dateFormats: [
{
period: "fff",
format: "JJ:NN:SS"
}, {
period: "ss",
format: "JJ:NN:SS"
}, {
period: "mm",
format: "JJ:NN"
}, {
period: "hh",
format: "JJ:NN"
}, {
period: "DD",
format: "DD MMM"
}, {
period: "WW",
format: "DD MMM"
}, {
period: "MM",
format: "MMMM"
}, {
period: "YYYY",
...