<div class="row" style="margin-left:18%;">
    <form>
        <div class="row">
            <div class="col-md-3">
                <label class="radio">
                    <input type="radio" name="radio" value="barras" onclick="setType(this.value);" checked><i class="rounded-x"></i> Gr&aacute;fica de barras
                </label>
            </div>
            <div class="col-md-3">
                <label class="radio">
                    <input type="radio" name="radio" value="lineas" onclick="setType(this.value);"><i class="rounded-x"></i> Gr&aacute;fica de líneas
                </label>
            </div>
            <div class="col-md-3">
                <label class="radio">
                    <input type="radio" name="radio" value="curvas" onclick="setType(this.value);"><i class="rounded-x"></i> Gr&aacute;fica de curvas
                </label>
            </div>
            <div class="col-md-3">
                <label class="radio">
                    <input type="radio" name="radio" value="pie" onclick="setType(this.value);"><i class="rounded-x"></i> Gr&aacute;fica de pie
                </label>
            </div>
        </div>
    </form>
</div>

<div id="chartdiv" style="width: 100%; height: 600px;"></div>
<div id="chartPie" class="hidden" style="width: 100%; height: 750px;"></div>

<div class="row" id="chartAxis">
    <div class="col-md-4">
        <div id="DropTargetX" class="DropTarget">
            <h1 style="margin-top:60px">Arrastre aqu&iacute; el eje X</h1>
        </div> 
        <input type="hidden" id="ejex" value="" />
    </div>
    <div class="col-md-4">
        <div class="DropTarget ui-droppable" id="DropTargetY">
            <h1 style="margin-top:60px">Arrastre aqu&iacute; el eje Y</h1>
            <div id="axis_y">
                
            </div>
        </div>
        <div id="hidden_inputs"></div>
    </div>

    <div class="col-md-4 magazine-page">
        <div id="accordion-2" class="panel-group acc-v1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a>
                            Graficar
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse in" id="collapse-2">
                    <div class="panel-body" style='max-height: 210px; overflow: scroll; overflow-x: hidden;'>
                        <?php
                        if(!empty($modelEnc)){
                            echo '<ul id="DragWordList" class="list-unstyled">';
                            foreach ($modelEnc as $encabezado) {
                                echo '<li class="DragWord" title="'.$encabezado['descripcion'].'" id="'.$encabezado['encabezado'].'">'.$encabezado['nombre_corto'].'</li>';
                            }
                            echo '</ul>';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row hidden" id="pieAxis">
    <div class="col-md-8">
        <div class="DropTarget ui-droppable" id="pieDropTarget" style="height: 80px !important;">
            <h1>Arrastre aquí el campo a graficar</h1>
        </div>
        <input type="hidden" id="piefield" value="" />
    </div>
    <div class="col-md-4 magazine-page">
        <div id="accordion-2" class="panel-group acc-v1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a>
                            Graficar
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse in" id="collapse-2">
                    <div class="panel-body" style='max-height: 210px; overflow: scroll; overflow-x: hidden;'>
                        <?php
                        if(!empty($modelEnc)){
                            echo '<ul id="DragWordList" class="list-unstyled">';
                            foreach ($modelEnc as $encabezado) {
                                echo '<li class="DragWord" title="'.$encabezado['descripcion'].'" id="'.$encabezado['encabezado'].'">'.$encabezado['nombre_corto'].'</li>';
                            }
                            echo '</ul>';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>