#7036

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

CSS

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

JavaScript

var chartData = [
        {date: new Date(1400778162 * 1000), val:10},
        {date: new Date(1400778362 * 1000), val:11},
        {date: new Date(1400778562 * 1000), val:12},
        {date: new Date(1400778762 * 1000), val:11},
        {date: new Date(1400778962 * 1000), val:10},
        {date: new Date(1400779162 * 1000), val:11},
        {date: new Date(1400779362 * 1000), val:13},
        {date: new Date(1400779562 * 1000), val:14},
        {date: new Date(1400779762 * 1000), val:17},
        {date: new Date(1400779962 * 1000), val:13},
        {date: new Date(1400788162 * 1000), val:10},
        {date: new Date(1400798362 * 1000), val:11},
        {date: new Date(1400799962 * 1000), val:12},
        {date: new Date(1401799962 * 1000), val:12},
        {date: new Date(1402799962 * 1000), val:18}
];

var chart = AmCharts.makeChart("graph_test", {
   type: "stock",
   theme: "none",
   pathToImages: "<?php echo base_url();?>Scripts/images/",
   
   categoryAxesSettings: {
       minPeriod: "mm"
   },
   
   chartScrollbarSettings: {
       graph: "g1",
       usePeriod: "30mm",
       position: "top"
   },
           
   chartCursorSettings: {
       valueBalloonsEnabled: true
   },
   
   periodSelector: {
       position: "top",
       dateFormat: "YYYY-MM-DD JJ:NN",
       inputFieldWidth: 150,
       
       periods: [
           {
               period: "hh",
               count: 24,
               label: "1 day",
               selected: true
           },
           {
               period: "hh",
               count: 1,
               label: "1 hour",
           },
       ]              
   },
           
   dataSets: [
       {
           color: "#000",
           fieldMappings: [
               {
                   fromField: "val",
                   toField: "value"
               },
           ],
           dataProvider: chartData,
           categoryField: "date"
       }
   ],

   panels: [
       {
           showCategoryAxis: true,
          ...