When drawing a Three.js BufferGeometry lines, colors don't stick to segments

Question

When drawing a BufferGeometry line, I set the indices like: indices = [1,2,2,3,3,4] and the colors like: colors = [r1,g1,b1,r1,g1,b1, r2,g2,b2,r2,g2,b2, r3,g3,b3,r3,g3]. Yet, the colors don't stick to the segments and go beyond them, eventually blending with the next color. Something I have noticed is that it doesn't draw all the colors, only the first, like if it was coloring segment and a half per color. I have created a fiddle: http://jsfiddle.net/0f1oxdjx/

var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
var colors = new Float32Array(2*(MAX_POINTS-1)*3);
var indices = new Uint16Array(2*(MAX_POINTS-1));
var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;
    x += ( Math.random() - 0.5 ) * 300;
    y += ( Math.random() - 0.5 ) * 300;
    z += ( Math.random() - 0.5 ) * 300;
}
var iindex = 0, cindex = 0;
for ( var i = 1, l = MAX_POINTS; i < l; i ++ ) {
    indices[iindex++] = i-1;
    indices[iindex++] = i;
    x = ( Math.random() );
    y = ( Math.random() );
    z = ( Math.random() );
    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;

    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ));
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.setIndex(new THREE.BufferAttribute( indices, 1 ));

// material
var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors, linewidth:2});    

Edited the fiddle.

Answer 1

As WestLangley pointed out, by using non-indexed geometry I was able to solve the problem. You can see a working fiddle here:

http://jsfiddle.net/ed00u25s/

positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;
for ( var i = 1, l = MAX_POINTS-1; i < l; i ++ ) {
    x += ( Math.random() - 0.5 ) * 300;
    y += ( Math.random() - 0.5 ) * 300;
    z += ( Math.random() - 0.5 ) * 300;
    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;
}
positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;
var iindex = 0, cindex = 0;
for ( var i = 1, l = MAX_POINTS; i < l; i ++ ) {
    x = ( Math.random() );
    y = ( Math.random() );
    z = ( Math.random() );
    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;

    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;
}