AmCharts - graphs connected by starting and ending points

Question

I have multiple graphs per chart and for some unknown(to me) reason each graph is connected by the start and the end points of it e.g. Simple question: How to remove it? I couldn't find anything in the documentation that controls it.

My code as follows:

lineChart = function(id, period) {
    var chart, data = [];
    var cData = chartData[id];
    AmCharts.ready(function() {
        for (item in cData) {
            var i = cData[item];
            data.push({
                date: new Date(i.date),
                impressions: i.impressions,
                clicks: i.clicks,
                conversions: i.conversions,
                ctr: i.ctr,
                profit: i.profit,
                cost: i.cost,
                revenue: i.revenue
            });
        }

        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = data;
        chart.categoryField = "date";
        chart.balloon.color = "#000000";

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.fillAlpha = 1;
        categoryAxis.fillColor = "#FAFAFA";
        categoryAxis.gridAlpha = 0;
        categoryAxis.axisAlpha = 0;
        categoryAxis.minPeriod = period;
        categoryAxis.parseDates = true;
        categoryAxis.gridPosition = "start";
        categoryAxis.position = "bottom";

        // value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.dashLength = 5;
        valueAxis.axisAlpha = 0;
        valueAxis.integersOnly = true;
        valueAxis.gridCount = 10;
        chart.addValueAxis(valueAxis);

        // GRAPHS
        // Impressions graph                                            
        var graph = new AmCharts.AmGraph();
        graph.title = "Impressions";
        graph.valueField = "impressions";
        graph.balloonText = "[[title]]: [[value]]";
        //graph.lineAlpha = 1;
        graph.bullet = "round";
        chart.addGraph(graph);

        // Clicks graph
        var graph = new AmCharts.AmGraph();
        graph.title = "Clicks";
        graph.valueField = "clicks";
        graph.balloonText = "[[title]]: [[value]]";
        graph.bullet = "round";
        chart.addGraph(graph);

        // Conversions graph
        var graph = new AmCharts.AmGraph();
        graph.title = "Conversion";
        graph.valueField = "conversions";
        graph.balloonText = "[[title]]: [[value]]";
        graph.bullet = "round";
        chart.addGraph(graph);

        // LEGEND
        var legend = new AmCharts.AmLegend();
        legend.markerType = "circle";
        chart.addLegend(legend);

        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        if(period == 'hh')
            chartCursor.categoryBalloonDateFormat = "MMM DD, JJ:00";
        chart.addChartCursor(chartCursor);
        // WRITE
        chart.write(id);
    });
};

Answer 1

The problem was that each chart was rendered within it's own AmCharts.ready method. The documentation states that it's allowed, however it didn't work for me, therefore I wrapped all rendering within one ready method and the issue was fixed.

Answer 2

This looks like the data issue. Make sure your data points are strictly in consecutive ascending order.

To verify how your actual data looks like, add the second line below to your code. Then run your chart in Google Chrome with Console open (F12 then select Console tab)

chart.dataProvider = data;
console.debug(data);

Check the datapoints for irregularities. Especially the last two ones.