<!DOCTYPE HTML>
<html>
<head>
    <title>Graph2d | External legend Example</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .customStyle1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }

        path.customStyle3.fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }

         .graphGroup0 {
            fill:#4f81bd;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #4f81bd;
        }

         .graphGroup1 {
            fill:#f79646;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #f79646;
        }

         .graphGroup2 {
            fill: #8c51cf;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8c51cf;
        }

         .graphGroup3 {
            fill: #75c841;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #75c841;
        }

         .graphGroup4 {
            fill: #ff0100;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff0100;
        }

         .graphGroup5 {
            fill: #37d8e6;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #37d8e6;
        }

         .graphGroup6 {
            fill: #042662;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #042662;
        }

         .graphGroup7 {
            fill:#00ff26;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #00ff26;
        }

         .graphGroup8 {
            fill:#ff00ff;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff00ff;
        }

         .graphGroup9 {
            fill: #8f3938;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8f3938;
        }

         .fill {
            fill-opacity:0.1;
            stroke: none;
        }


         .bar {
            fill-opacity:0.5;
            stroke-width:1px;
        }

         .point {
            stroke-width:2px;
            fill-opacity:1.0;
        }


         .legendBackground {
            stroke-width:1px;
            fill-opacity:0.9;
            fill: #ffffff;
            stroke: #c2c2c2;
        }


         .outline {
            stroke-width:1px;
            fill-opacity:1;
            fill: #ffffff;
            stroke: #e5e5e5;
        }

         .iconFill {
            fill-opacity:0.3;
            stroke: none;
        }

        div.descriptionContainer {
            float:left;
            height:30px;
            width:160px;
            padding-left:5px;
            padding-right:5px;
            line-height: 30px;
        }

        div.iconContainer {
            float:left;
        }

        div.legendElementContainer {
            display:inline-block;
            width:200px;
            height:30px;
            border-style:solid;
            border-width:1px;
            border-color: #e0e0e0;
            background-color: #ffffff;
            margin:4px;
            padding:4px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:pointer;
        }
        div.legendElementContainer.hidden {
            background-color: #d3e6ff;
        }

        svg.legendIcon {
            width:30px;
            height:30px;
        }

        div.externalLegend {
            position:relative;
            margin-left: -5px;
            width: 900px;
        }




    </style>

    <script src="../../dist/vis.js"></script>

</head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
    groups by updating the dataset.

</div>
<br />
<div id="Legend" class="externalLegend"></div>
<div id="visualization"></div>


<script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
                size: 10
            }
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: false
        }
    });

    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

    var container = document.getElementById('visualization');
    var items = [
        {x: '2014-06-12', y: 0 , group: 0},
        {x: '2014-06-13', y: 30, group: 0},
        {x: '2014-06-14', y: 10, group: 0},
        {x: '2014-06-15', y: 15, group: 1},
        {x: '2014-06-16', y: 30, group: 1},
        {x: '2014-06-17', y: 10, group: 1},
        {x: '2014-06-18', y: 15, group: 1},
        {x: '2014-06-19', y: 52, group: 1},
        {x: '2014-06-20', y: 10, group: 1},
        {x: '2014-06-21', y: 20, group: 2},
        {x: '2014-06-22', y: 600, group: 2},
        {x: '2014-06-23', y: 100, group: 2},
        {x: '2014-06-24', y: 250, group: 2},
        {x: '2014-06-25', y: 300, group: 2},
        {x: '2014-06-26', y: 200, group: 3},
        {x: '2014-06-27', y: 600, group: 3},
        {x: '2014-06-28', y: 1000, group: 3},
        {x: '2014-06-29', y: 250, group: 3},
        {x: '2014-06-30', y: 300, group: 3}
    ];

    var dataset = new vis.DataSet(items);
    var options = {
        dataAxis: {showMinorLabels: false},
        start: '2014-06-09',
        end: '2014-07-03'
    };
    var graph2d = new vis.Graph2d(container, items, options, groups);


    /**
     * this function fills the external legend with content using the getLegend() function.
     */
    function populateExternalLegend() {
        var groupsData = groups.get();
        var legendDiv = document.getElementById("Legend");
        legendDiv.innerHTML = "";

        // get for all groups:
        for (var i = 0; i < groupsData.length; i++) {
            // create divs
            var containerDiv = document.createElement("div");
            var iconDiv = document.createElement("div");
            var descriptionDiv = document.createElement("div");

            // give divs classes and Ids where necessary
            containerDiv.className = 'legendElementContainer';
            containerDiv.id = groupsData[i].id + "_legendContainer"
            iconDiv.className = "iconContainer";
            descriptionDiv.className = "descriptionContainer";

            // get the legend for this group.
            var legend = graph2d.getLegend(groupsData[i].id,30,30);

            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
            // icons with the same classes if they are using the default ones.
            legend.icon.setAttributeNS(null, "class", "legendIcon");

            // append the legend to the corresponding divs
            iconDiv.appendChild(legend.icon);
            descriptionDiv.innerHTML = legend.label;

            // determine the order for left and right orientation
            if (legend.orientation == 'left') {
                descriptionDiv.style.textAlign = "left";
                containerDiv.appendChild(iconDiv);
                containerDiv.appendChild(descriptionDiv);
            }
            else {
                descriptionDiv.style.textAlign = "right";
                containerDiv.appendChild(descriptionDiv);
                containerDiv.appendChild(iconDiv);
            }

            // append to the legend container div
            legendDiv.appendChild(containerDiv);

            // bind click event to this legend element.
            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
        }
    }

    /**
     * This function switchs the visible option of the selected group on an off.
     * @param groupId
     */
    function toggleGraph(groupId) {
        // get the container that was clicked on.
        var container = document.getElementById(groupId + "_legendContainer")
        // if visible, hide
        if (graph2d.isGroupVisible(groupId) == true) {
            groups.update({id:groupId, visible:false});
            container.className = container.className + " hidden";
        }
        else { // if invisible, show
            groups.update({id:groupId, visible:true});
            container.className = container.className.replace("hidden","");
        }
    }

    populateExternalLegend()

</script>
</body>
</html>