#6653

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 = [
              {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:8},
              {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:5},
              {date: new Date(2011, 5, 11, 0, 0, 0, 0), val:28},
              {date: new Date(2011, 5, 14, 0, 0, 0, 0), val:2},
              {date: new Date(2011, 5, 16, 0, 0, 0, 0), val:2}
          ]; 

          AmCharts.ready(function() {
                var chart = new AmCharts.AmStockChart();
                chart.pathToImages = "../amcharts/images/";

                var dataSet = new AmCharts.DataSet();
                dataSet.dataProvider = chartData;
                dataSet.fieldMappings = [{fromField:"val", toField:"value"}];   
                dataSet.categoryField = "date";          
                chart.dataSets = [dataSet];

                var stockPanel = new AmCharts.StockPanel();
                chart.panels = [stockPanel];

                var panelsSettings = new AmCharts.PanelsSettings();
                panelsSettings.startDuration = 1;
                chart.panelsSettings = panelsSettings;

                var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
                categoryAxesSettings.equalSpacing = true;
                categoryAxesSettings.autoGridCount = false;
                categoryAxesSettings.gridCount = 50;
                chart.categoryAxesSettings = categoryAxesSettings;

                var graph = new AmCharts.StockGraph();
                graph.valueField = "value";
                graph.type = "column";
                graph.fillAlphas = 1;
                graph.title = "MyGraph"; 
                stockPanel.addStockGraph(graph);

                var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
                chartScrollbarSettings.graph = graph;
                //chartScrollbarSettings.graphType = "line";
                chart.chartScrollbarSettings = chartScrollbarSettings;

                chart.write("chartdiv");
            });