Floating Bar Chart

As you can see, the bars (also columns) in our charts can start and end at any place, not necessary from axis or zero-coordinate. All you need to do is set <strong>openField</strong> for column graph and set the open values in data. For a floating-columns check <a href="/demos/waterfall-chart/">Waterfall chart</a> demo.

by rahulshukla422

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="pumpFlowId" style="height:250px"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("pumpFlowId", {
                "theme": "light",
                "type": "serial",
               // "dataDateFormat": "YYYY-MM-DD",
                "showBalloon": false,
                //"titles": [{
                //    "text": "Pump Flow",
                //    "bold": false,
                //    "size": 15,
                //    "color": "#0c3984"
                //}],
               
                "valueAxes": [{
                    "axisAlpha": 0.0,
                    "position": "left",
                    "labelsEnabled": true
                }],
                "legend": {
                    "horizontalGap": 10,
                    "maxColumns": 1,
                    "position": "right",
                    "useGraphSettings": false,
                    "markerSize": 10,
                    "marginTop": 20,
                    "labelText": "Pump Flow",
                    "color": "#0c3984"
                },
                "graphs": [{
                    "id": "g1",
                     "balloonText": "<div style='margin:5px; font-size:13px;'><span><b>Time:</b> [[category]]</span><br><b>Pump Flow:</b> [[value]]</div>",
                    "bullet": "round",
                    "bulletBorderAlpha": 1,
                    "bulletBorderColor": "#FFFFFF",
                    "hideBulletsCount": 50,
                    "lineThickness": 2,
                    "lineColor": "#0c3984",
                    "negativeLineColor": "#67b7dc",
                    "valueField": "YAxis",
                    "useLineColorForBulletBorder": true,
                    "bulletSize": 5,
                }],
                "mouseWheelZoomEnabled": true,
                "chartScrollbar": {
                   "scrollbarHeight": 5,
                   "backgroundAlpha": 0.1,
                   "backgroundColor": "#0c3984",
                   "selectedBackgroundColor": "#0c3984",
                   "selectedBackgroundAlpha": 1

              ...