#6956

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

CSS

body {
    background: #ccc;
}

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

JavaScript

var chartData = [{
    date: new Date(2014, 4, 19, 1, 0, 0),
    price: 23.25,
    system_demand: 7746,
    smprice: 23.45
}, {
    date: new Date(2014, 4, 19, 1, 17, 0),
    smprice: 23.25
}, {
    date: new Date(2014, 4, 19, 1, 31, 0),
    smprice: 19.44
}];

// Load Chart 
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
        "theme": "none",
        "pathToImages": "/lib/amcharts/images/",
        "dataProvider": chartData,
        "color": 'rgba(255,255,255,0.5)',
        "sequencedAnimation": true,
        "startEffect": 'easeOutSine',
        "startDuration": 0.5,
        "valueAxes": [{
        "id": "v1",
            "axisAlpha": 0,
            "dashLength": 1,
            "position": "left",
            "fontSize": 9,
            "unit": "$",
            "unitPosition": "left",
            "autoGridCount": true
    }, {
        "id": "v2",
            "axisColor": "transparent",
            "gridAlpha": 0,
            "axisAlpha": 1,
            "position": "right",
            "fontSize": 9,
            "unit": 'MW',
    }],
        "graphs": [{
        "id": "g1",
            "valueAxis": "v1",
            "balloonText": "<span>Optimal Time</span>",
            "bullet": "round",
            "bulletBorderAlpha": 0,
            "bulletColor": "#b6efff",
            "hideBulletsCount": 50,
            "title": "Pool Price",
            "bulletSize": 14,
            "valueField": "price",
            "lineColorField": "lineColor",
            "useLineColorForBulletBorder": true
    }, {
        "id": "g2",
            "valueAxis": "v2",
            'showBalloon': false,
            "title": "System Demand",
            "type": "column",
            "fillAlphas": 1,
            "fillColors": 'rgba(0,0,0,0.2)',
            "lineColor": "none",
            "valueField": "system_demand"
    }, {
        "id": "g3",
            "valueAxis": "v1",
            "balloonText": "<span style='line-height:20px'>System...