Plot chart

by ckissi

HTML

<script src="http://themepixels.me/azia/lib/jquery/jquery.min.js"></script>
<script src="http://themepixels.me/azia/lib/jquery.flot/jquery.flot.js"></script>
<script src="http://themepixels.me/azia/lib/jquery.flot/jquery.flot.pie.js"></script>
<script src="http://themepixels.me/azia/js/chart.flot.sampledata.js"></script>
<script src="http://themepixels.me/azia/lib/jquery.flot/jquery.flot.resize.js"></script>
<div id="flotChart2" class="flot-chart"></div>

CSS

.flot-chart {
    width: 100%;
    height: 127px;
    position: relative;
    margin-top: 20px;
}

JavaScript

$.plot('#flotChart2', [{
            data: flotSampleData2,
            color: '#007bff'
          }], {
    			series: {
    				shadowSize: 0,
            lines: {
              show: true,
              lineWidth: 2,
              fill: true,
              fillColor: { colors: [ { opacity: 0 }, { opacity: 0.5 } ] }
            }
    			},
          grid: {
            borderWidth: 0,
            labelMargin: 10,
            markings: [{ color: '#70737c', lineWidth: 1, font: {color: '#000'}, xaxis: { from: 55, to: 75} }]
          },
    			yaxis: { show: false },
    			xaxis: {
            show: true,
            position: 'top',
            color: 'rgba(102,16,242,.1)',
            reserveSpace: false,
            ticks: [[15,'1h'],[35,'1d'],[55,'1w'],[75,'1m'],[95,'3m'], [115,'1y']],
            font: {
              size: 10,
              weight: '500',
              family: 'Roboto, sans-serif',
              color: '#999'
            }
          }
    		});