#9518

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="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

JavaScript

var chartData = generateChartData();

function generateChartData() {
	var chartData = [];
	var firstDate = new Date(2012, 0, 1);
	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 value = Math.round(Math.random() * (40 + i)) + 100 + i;

		chartData.push({
			date: newDate,
			value: value,
            volume: value
		});
	}
	return chartData;
}


var chart = AmCharts.makeChart("chartdiv", {

	type: "stock",

    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataSets: [{
		color: "#b0de09",
		fieldMappings: [{
			fromField: "value",
			toField: "value"
		},{
			fromField: "volume",
			toField: "volume"
		}],
		dataProvider: chartData,
		categoryField: "date"
	}],

	panels: [{
		showCategoryAxis: false,
		title: "Value",
		eraseAll: false,
		stockGraphs: [{
			id: "g1",
			valueField: "value",
			useDataSetColors: false
		}],

		stockLegend: {
			valueTextRegular: " ",
			markerType: "none"
		},
        trendLineColor: "#FF00FF",
		drawingIconsEnabled: true
	},{
		title: "Volume",
		showCategoryAxis: true,
		stockGraphs: [{
            type: "column",
			valueField: "volume",
			useDataSetColors: false,
            fillAlphas: 1,
            lineColor: "#fdd400",
            fillColors: "#fdd400",
            useNegativeColorIfDown:true,
            negativeFillColors: "#67b7dc",
            negativeLineColor: "#67b7dc"
		}],

		stockLegend: {
			valueTextRegular: " ",
			markerType: "none"
		}
	}],
    panelsSettings: {
        creditsPosition: "left",
    },
	chartScrollbarSettings: {
		graph: "g1"
	},
	chartCursorSettings: {
		valueBalloonsEnabled: true
	},
	periodSelector: {
		position: "bottom",
		periods: [{
			period: "DD",
			count: 10,
			label: "10 days"
		}, {
			period: "MM",
			count: 1,
			label: "1 month"
		}, {
			period: "YYYY",
			count: 1,
			label: "1 year"
		},...