Lines

For line charts: [Grouped] Line/Spline/Step/Jump Line.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/xy.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/radar.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 485px;
    height: 300px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('http://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 300px; }
img { z-index: -1; }
.amcharts-graph-g1
{
    filter: url(#blur);
}

JavaScript

$(function () {
    
    var options = {
        type: "serial",
        colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798bf", "#aaeeee", "#ff0066", "#eeaaee", "#55bf3b", "#df5353", "#7798bf", "#aaeeee"],
        addClassNames: true,
        labelsEnabled: false,
        titles: [{
            text: "Grouped Jump Lines with amCharts",
            id: "main",
            size: 18,
            bold: true,
            color: "#000000",
        },],
        legend: {
            enabled: false,
        },
        categoryAxis: {
            title: "year",
            labelsEnabled: true,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 14,
            color: "#000000",
            fontSize: 12,
        },
        valueAxes: [{ 
            id: "v1",
            title: "sales",
            position: "bottom",
            labelsEnabled: true,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 14,
            color: "#000000",
            fontSize: 12,
        }, {
            id: "v2",
            position: "left",
            labelsEnabled: true,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 14,
       ...