# Trouble with polylines

**URL:** <https://community.cesium.com/t/trouble-with-polylines/2510>\
**Category:** CesiumJS\
**Created:** [May 18, 2015, 10:26am UTC](https://community.cesium.com/t/trouble-with-polylines/2510 "2015-05-18T10:26:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dracoooo26](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dracoooo26](https://community.cesium.com/u/dracoooo26)\
**Post date:** [May 18, 2015, 10:26am UTC](https://community.cesium.com/t/trouble-with-polylines/2510/1 "2015-05-18T10:26:03Z")

</div>

Can someone please tell me what’s wrong with this piece of code?

```auto
    Cesium.Math.setRandomNumberSeed(1234);

    var viewer = new Cesium.Viewer('cesiumContainer');
    var entities = viewer.entities;
    var boxes = entities.add(new Cesium.Entity());
    var polylines = new Cesium.PolylineCollection();

    //Create the entities and assign each entity's parent to the group to which it belongs.
    for (var i = 0; i < 5; ++i) {
        var height = 100000.0 + (200000.0 * i);
        entities.add({
            parent : boxes,
            position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
            box : {
                dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
                material : Cesium.Color.fromRandom({alpha : 1.0})
            }
        });
        entities.add({
            parent : polylines,
            position : Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height),
            polyline : {
                width : new Cesium.ConstantProperty(2),
                material : Cesium.Color.fromRandom({alpha : 1.0}),
                followSurface : new Cesium.ConstantProperty(false)
            }
        });
    }
    viewer.zoomTo(viewer.entities);

```

It displays boxes at the given coordinates but when I am trying to draw a poly-line it gives this error: Uncaught TypeError: Cannot read property ‘push’ of undefined (on line 300 of[https://cesiumjs.org/Cesium/Source/DataSources/Entity.js](https://cesiumjs.org/Cesium/Source/DataSources/Entity.js))

I want something like this [https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Custom%20DataSource.html&label=Showcases](https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Custom%20DataSource.html&label=Showcases)

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Scott\_Reynolds](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_reynolds/32/2014_2.png) [@Scott\_Reynolds](https://community.cesium.com/u/Scott_Reynolds)\
**Post date:** [May 19, 2015, 1:16pm UTC](https://community.cesium.com/t/trouble-with-polylines/2510/2 "2015-05-19T13:16:48Z")

</div>

The crash is caused by attempting to use a PolylineCollection as the parent of an entity. You can eliminate the crash by changing line 6 to

var polylines = entities.add(new Cesium.Entity());

``

At which point you will need to supply positions to the PolylineGraphics object to have a line drawn.

Scott

---

<div class="post-metadata">

**Author:** ![dracoooo26](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dracoooo26](https://community.cesium.com/u/dracoooo26)\
**Post date:** [May 20, 2015, 5:33am UTC](https://community.cesium.com/t/trouble-with-polylines/2510/3 "2015-05-20T05:33:03Z")

</div>

Thank you so much.  
I want a vertical line. Can you please help me with that.

---

<div class="post-metadata">

**Author:** ![Scott\_Reynolds](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_reynolds/32/2014_2.png) [@Scott\_Reynolds](https://community.cesium.com/u/Scott_Reynolds)\
**Post date:** [May 20, 2015, 1:44pm UTC](https://community.cesium.com/t/trouble-with-polylines/2510/4 "2015-05-20T13:44:12Z")

</div>

Below you will find code to draw a polyline from one height to the next, similar to what you did with the boxes.

```
Cesium.Math.setRandomNumberSeed(1234);

var viewer = new Cesium.Viewer('cesiumContainer');

var entities = viewer.entities;

var boxes = entities.add(new Cesium.Entity());

var polylines = entities.add(new Cesium.Entity());

//Create the entities and assign each entity's parent to the group to which it belongs.

var prevHeight = 0.0;

for (var i = 0; i < 5; ++i) {

    var height = 100000.0 + (200000.0 * i);

    entities.add({

        parent : boxes,

        position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),

        box : {

            dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),

            material : Cesium.Color.fromRandom({alpha : 1.0})

        }

    });

    entities.add({

        parent : polylines,

        position : Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height),

        polyline : {

            positions: [

                Cesium.Cartesian3.fromDegrees(-86.0, 55.0, prevHeight),

                Cesium.Cartesian3.fromDegrees(-86.0, 55.0, height)

            ],

            width : new Cesium.ConstantProperty(2),

            material : Cesium.Color.fromRandom({alpha : 1.0}),

            followSurface : new Cesium.ConstantProperty(false)

        }

    });

    

    prevHeight = height;

}

viewer.zoomTo(viewer.entities);

```

``

---

<div class="post-metadata">

**Author:** ![dracoooo26](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dracoooo26](https://community.cesium.com/u/dracoooo26)\
**Post date:** [May 21, 2015, 4:04am UTC](https://community.cesium.com/t/trouble-with-polylines/2510/5 "2015-05-21T04:04:29Z")

</div>

Thank you so much! You made my day.

---

<div class="post-metadata">

**Author:** ![dracoooo26](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@dracoooo26](https://community.cesium.com/u/dracoooo26)\
**Post date:** [May 21, 2015, 4:43am UTC](https://community.cesium.com/t/trouble-with-polylines/2510/6 "2015-05-21T04:43:36Z")

</div>

How can I display tooltip when I hover over the polyline?

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [May 22, 2015, 2:03pm UTC](https://community.cesium.com/t/trouble-with-polylines/2510/7 "2015-05-22T14:03:03Z")

</div>

onHover is going to be a difficult proposition because of the expense of auto picking at each pixel the mouse hovers over. You’re better off with a click event for triggering a tooltip.

---

<div class="post-metadata">

**Author:** ![bushra.nayab](https://avatars.discourse-cdn.com/v4/letter/b/8baadc/32.png) [@bushra.nayab](https://community.cesium.com/u/bushra.nayab)\
**Post date:** [May 29, 2015, 7:35am UTC](https://community.cesium.com/t/trouble-with-polylines/2510/8 "2015-05-29T07:35:19Z")

</div>

Can i display stacked bars in cesium?  
I will use a poly-line with different width but how to display different colors as in this  
[https://www.google.com.pk/search?q=stacked+bars&biw=1920&bih=955&source=lnms&tbm=isch&sa=X&ei=KhZoVaTYOdLkuQS-goLIAg&ved=0CAYQ\_AUoAQ#imgrc=gf73VpC1sohVlM%3A%3Bs-loaRVabg2h1M%3Bhttp%3A%2F%2Fthedailyviz.com%2Fwp-content%2Fuploads%2F2012%2F08%2Fguns-620x415.png%3Bhttp%3A%2F%2Fvizwiz.blogspot.com%2F2012%2F08%2Fdisplaying-time-series-data-stacked.html%3B620%3B415](https://www.google.com.pk/search?q=stacked+bars&biw=1920&bih=955&source=lnms&tbm=isch&sa=X&ei=KhZoVaTYOdLkuQS-goLIAg&ved=0CAYQ_AUoAQ#imgrc=gf73VpC1sohVlM%253A%3Bs-loaRVabg2h1M%3Bhttp%253A%252F%252Fthedailyviz.com%252Fwp-content%252Fuploads%252F2012%252F08%252Fguns-620x415.png%3Bhttp%253A%252F%252Fvizwiz.blogspot.com%252F2012%252F08%252Fdisplaying-time-series-data-stacked.html%3B620%3B415)

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [May 29, 2015, 2:33pm UTC](https://community.cesium.com/t/trouble-with-polylines/2510/9 "2015-05-29T14:33:45Z")

</div>

I don’t see why not 🙂

you could do this in 1 of 2 ways that I can think of off the top of my head.

- Custom Canvas on Material on a single geometry
- Multiple Geometries that have their position adjusted accordingly.  
If your going to be displaying charts, presumably on a billboard or overlay, I personally would recommend the canvas route.

Anyone else have an alternative or recommendation?