Column and Line mix

Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv-shop-floor"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("chartdiv-shop-floor", {
	    "type": "serial",
	    "categoryField": "category",
	    "columnSpacing": 2,
	    "startDuration": 1,

	    "categoryAxis": {
	        "autoRotateAngle": 0,
	        "gridPosition": "start",
	        "axisAlpha": 0,
	        "gridAlpha": 0,
	        //"labelRotation": 63,
	        "minorGridAlpha": 0
	    },

	    "trendLines": [],

	    "graphs":[
		    {
		        "balloonText": "[[category]]:[[value]]",
		        "fillAlphas": 1,
		        "fillColors": "#2ecc71",
		        "id": "AmGraph-1",
		        "labelOffset": 19,
		        "labelRotation": 270,
		        "labelText": "[[value]]%",
		        "lineAlpha": 0,
		        "precision": 2,
		        "title": "AFRICA",
		        "type": "column",
		        "valueField": "column-1"
		    }, 
		    {
		        "balloonText": "[[category]]:[[value]]",
		        "fillAlphas": 1,
		        "fillColors": "#BBBBBB",
		        "id": "AmGraph-2",
		        "labelOffset": 19,
		        "labelRotation": 270,
		        "labelText": "[[value]]%",
		        "lineAlpha": 0,
		        "precision": 2,
		        "title": "APAC",
		        "type": "column",
		        "valueField": "column-2"
		    }, 
		    {
		        "balloonText": "[[category]]:[[value]]",
		        "fillAlphas": 1,
		        "fillColors": "#2980b9",
		        "id": "AmGraph-3",
		        "labelOffset": 19,
		        "labelRotation": 270,
		        "labelText": "[[value]]%",
		        "lineAlpha": 0,
		        "precision": 2,
		        "title": "EUR",
		        "type": "column",
		        "valueField": "column-3"
		    }, 
		    {
		        "balloonText": "[[category]]:[[value]]",
		        "fillAlphas": 1,
		        "fillColors": "#e74c3c",
		        "id": "AmGraph-4",
		        "labelOffset": 19,
		        "labelRotation": 270,
		        "labelText": "[[value]]%",
		        "lineAlpha": 0,
		        "precision": 2,
		        "title": "MA",
		        "type": "column",
		        "valueField":...