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 roberts gailitis

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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "addClassNames": true,
  "theme": "light",
  "autoMargins": false,
  "marginLeft": 30,
  "marginRight": 8,
  "marginTop": 10,
  "marginBottom": 26,
  "balloon": {
    "adjustBorderColor": false,
    "horizontalPadding": 10,
    "verticalPadding": 8,
    "color": "#ffffff"
  },

  "dataProvider": data,
  "startDuration": 1,
  "graphs": [ {
    "alphaField": "alpha",
    "balloonText": "<span style='font-size:12px;'><br><span style='font-size:20px;'>[[value]]</span> </span>",
    "fillAlphas": 1,
    "title": "2010",
    "type": "column",
    "valueField": "2010",
    "dashLengthField": "dashLengthColumn"
  }, {
    "id": "graph2",

    "bullet": "round",
    "lineThickness": 3,
    "bulletSize": 7,
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "useLineColorForBulletBorder": true,
    "bulletBorderThickness": 3,
    "fillAlphas": 0,
    "lineAlpha": 1,
    "title": "Index",
    "valueField": "Index",
    "dashLengthField": "dashLengthLine"
  } ],
  "categoryField": "company",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "tickLength": 0
  },
  "export": {
    "enabled": true
  }
} );

var data = [
{ 'company': 'APL', '2010': 4068,  '2011': 4197,  '2012': 4168, '2013': 4492,'2014': 5202,'2015': 5686,'Index': 140, 'Revenues (US$)': 5410, 'Operating profit': -98, 'Margin %': -1.81, 'Rel growth of avg vsl size 2015/2010 (%)': 7.95, 'Avg growth of vsl size 2015/2010 (TEU)': 324, 'Growth range (TEU)': 1618},
{ 'company': 'CMACGM', '2010': 3269,  '2011': 3715,  '2012': 4004, '2013': 4004,'2014': 4333,'2015': 4006,'Index': 123, 'Revenues (US$)': 15674, 'Operating profit': 911, 'Margin %': 5.81, 'Rel growth of avg vsl size 2015/2010 (%)': 4.51, 'Avg growth of vsl size 2015/2010 (TEU)': 147, 'Growth range (TEU)': 737},
{ 'company': 'COSCO', '2010': 3468,  '2011': 3848,  '2012': 4304, '2013': 4614,'2014': 5397,'2015': 5406,'Index': 156, 'Revenues (US$)': 7181,...