amcharts Segmented line chart

HTML

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

JavaScript

var chart;

var chartData = [
    { status: 1, app: 1, balloon1: 1},
   
/*color2 segment */
    { status: 2, app: 1, balloon2: 1}, /* and emmediatelly after that to color3 */
    { status: 3, app: 1, balloon3: 1}];

AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.dataProvider = chartData;
    chart.categoryField = "status";

    // AXES
    // Category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.startOnAxis = true;
    categoryAxis.showLastLabel = false;

    // GRAPHS
    // first graph
    var graph = new AmCharts.AmGraph();
    graph.type = "line";
    graph.valueField = "app";
    graph.balloonText = "[[balloon1]]";
    graph.lineThickness = 3;
    graph.connect = true;
    chart.addGraph(graph);

    // second graph
    graph = new AmCharts.AmGraph();
    graph.type = "line";
    graph.valueField = "app";
    graph.balloonText = "[[balloon2]]";
    graph.lineThickness = 3;
    graph.connect = true;
    chart.addGraph(graph);

    // third graph
    graph = new AmCharts.AmGraph();
    graph.type = "line";
    graph.valueField = "app";
    graph.balloonText = "[[balloon3]]";
    graph.lineThickness = 3;
    graph.connect = true;
    chart.addGraph(graph);
    
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
    chartCursor.cursorAlpha = 0;
    chart.addChartCursor(chartCursor);

    // WRITE
    chart.write("chartdiv");
});