VisualData
/
index.html

<!DOCTYPE html>
<html>

<head>
    <title>Visual Data</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="lib/datatables.css" />
    <link rel="stylesheet" type="text/css" href="site.css" />
</head>

<body>
    <header class="page-header">
        <h2>Data Visualization Tool</h2>
        <div class="label-success">
            <div>
                <a data-toggle="collapse" data-target="#tips" aria-expanded="false" aria-controls="tips"
                    title="Show/Hide Tips" href="#">
                    <label>Tips:</label>
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
            </div>
            <ol id="tips" class="collapse">
                <li>Select a data file to load. Currently it supports csv and json files.</li>
                <li>Once the data loaded, the data grid section would show the data in table format.</li>
                <li>You can specify settings for x and y axis to draw chart based on the data.</li>
            </ol>
        </div>
    </header>
    <div class="container-fluid">
        <!--Select data file-->
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Data File</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <!-- <label for="dataFile">Data File</label> -->
                    <input type="file" id="dataFile" class="input-sm" />
                    <div id="loadingLabel" class="text-success" style="display: none">
                        <b>Loading file...</b>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title">
                            Options
                            <div class="btn-group-xs pull-right">
                                <button data-toggle="collapse" data-target="#data-parser-options"
                                    class="btn btn-default btn-xs" aria-expanded="false"
                                    aria-controls="data-parser-options" title="Show/Hide Options">
                                    <span class="glyphicon glyphicon-chevron-up">Hide</span>
                                    <span class="glyphicon glyphicon-chevron-down">Show</span>
                                </button>
                            </div>
                        </h4>
                    </div>
                    <div id="data-parser-options" class="panel-body collapse form-group">
                        <div class="row">
                            <label class="col-md-3" class="form-control">
                                <input type="checkbox" id="dynamicTyping" checked="true"> Dynamic typing
                                <span class="option-tip">Turns numeric data into numbers and true/false into
                                    booleans.</span>
                            </label>
                            <label class="col-md-3">
                                <input type="checkbox" id="header" checked="true"> Header row
                                <span class="option-tip">Keys data by field name rather than an array.</span>
                            </label>
                            <label class="col-md-3">
                                Delimiter:<input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"
                                    class="input-sm"><a href="javascript:" id="insert-tab">tab</a>
                                <span class="option-tip">The delimiting character. Usually comma or tab. Default is
                                    comma.</span>
                            </label>
                            <label class="col-md-3">
                                Encoding:<input type="text" id="encoding" placeholder="default" size="7"
                                    class="input-sm">
                                <span class="option-tip">Only applies when reading local files. Default is specified
                                    by
                                    the browser (usually UTF-8).</span>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="datagrid-tab" data-toggle="tab" href="#datagrid" role="tab"
                    aria-controls="datagrid" aria-selected="true">Data</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="datacharts-tab" data-toggle="tab" href="#datacharts" role="tab"
                    aria-controls="datacharts" aria-selected="false">Charts</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade in active" id="datagrid" role="tabpanel" aria-labelledby="datagrid-tab">
                <!--Show data in table-->
                <div class="panel panel-info">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title">
                            <div class="btn-group-xs pull-right">
                                <button data-toggle="collapse" data-target="#dataGridContainer" class="btn btn-default"
                                    aria-expanded="true" aria-controls="dataGridContainer" title="Show/Hide Data table">
                                    <span class="glyphicon glyphicon-chevron-up">Hide</span>
                                    <span class="glyphicon glyphicon-chevron-down">Show</span>
                                </button>
                            </div>
                        </h4>
                    </div>
                    <div id="dataGridContainer" class="panel-body collapse in">
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="datacharts" role="tabpanel" aria-labelledby="datacharts-tab">
                <!--Show data in charts-->
                <div class="panel panel-info">
                    <div class="panel-heading clearfix">
                        <h4 class="panel-title">
                            <div class="btn-group-xs pull-right">
                                <button id="addChartBtn" class="btn btn-default btn-xs" title="Add New Chart">
                                    <span class="glyphicon glyphicon-plus">Add</span>
                                </button>
                            </div>
                        </h4>
                    </div>
                    <div id="chartsPanel" class="panel-body">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Define template for chart-->
    <script id="chart-template" type="text/x-custom-template">
        <div id="chart${chartNum}" class="panel panel-default my-chart-container">
        <div class="panel-heading clearfix">
            <h4 class="panel-title">
                Chart ${chartNum}
                <div class="btn-group pull-right">
                    <button class="my-remove-chart-btn btn btn-default btn-xs" title="Remove Current Chart">
                        <span class="glyphicon glyphicon-remove">Remove</span>
                    </button>
                </div>
            </h4>
        </div>
        <div class="panel-body">
            <div class="row">
                <fieldset class="col-md-4">
                    <legend class="text-info my-legend">General</legend>
                    <div>
                        <label>Title</label>
                        <input class="form-control my-chart-title" type="text"
                            placeholder="Specify chart title" />
                    </div>
                    <div>
                        <label>Type</label>
                        <select class="my-chart-type form-control ">
                            <option value="bar">bar</option>
                            <option value="line">line</option>
                            <option value="scatter">scatter</option>
                            <option value="pie">pie</option>
                            <!-- <option value="radar">radar</option> -->
                        </select>
                    </div>
                    <div
                        title="Filter expression by checking properties in dataItem. Example: &#10;dataItem.SecondsCostOnNewAck > 0 && dataItem.SecondsCostOnNewAck < 100000 ;">
                        <label>Filter Expression (dataItem)</label>
                        <textarea class="my-filter-expression form-control "
                            placeholder="filter expression by checking properties in dataItem. Example: &#10;dataItem.SecondsCostOnNewAck > 0 && dataItem.SecondsCostOnNewAck < 100000 ;"
                            style="height: 100px">
                            </textarea>
                    </div>
                </fieldset>
                <fieldset class="col-md-4">
                    <legend class="text-info my-legend">X Axis</legend>
                    <div>
                        <label>Filed</label>
                        <select class="my-x-axis form-control " title="Select a filed as X axis">
                        </select>
                    </div>
                    <div>
                        <label>Type</label>
                        <select class="my-x-axis-type form-control "
                            title="Select a type as X axis, mostly just use 'category'.">
                            <option value="category">category</option>
                            <option value="value">value</option>
                            <option value="time">time</option>
                            <option value="log">log</option>
                        </select>
                    </div>
                    <div>
                        <label>Group Expression</label>
                        <textarea class="my-group-expression form-control "
                            placeholder="Group expression for x axis. Example: &#10;dataItem.NewOrderTime.substr(0, 15);"
                            style="height: 100px">
                        </textarea>
                    </div>
                </fieldset>
                <fieldset class=" col-md-4">
                    <legend class="text-info my-legend">Y Axis</legend>
                    <div class="my-y-series">
                        <div>
                            <label>Series</label>
                            <div class="btn-group-sm pull-right">
                                <a class="add-y-serie-button" href="#" title="Add a new y serie" style="display: inline">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                </a>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table_morecondensed" title="Setting for selected series.">
                            <thead>
                                <tr>
                                    <th style="width:5%"></th>
                                    <th>Filed</th>
                                    <th style="width:20%">YAxis</th>
                                    <th style="width:20%">Aggregation</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </div>
            <div class="row">
                <div class="col-md-1 pull-right" style="top: 10px">
                    <button class="btn btn-primary btn-sm my-generate-btn">
                        <span class="glyphicon glyphicon-picture" title="Generate the Chart">Generate</span>
                    </button>
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-12 my-chart"></div>
            </div>
        </div>
    </div>
    </script>

    <script id="serie-row-template" type="text/x-custom-template">
        <tr>
            <td>
                <div class="btn-group-sm">
                    <a class="remove-y-serie-button" href="#" title="Remove current y serie">
                        <span class="glyphicon glyphicon-remove-sign"></span>
                    </a>
                </div>
            </td>
            <td>
                <select class='my-selected-y-serie form-control' data-y-axis-position='left' data-y-axis-aggregate-type=''>
                </select>
            </td>
            <td>
                <select class='my-y-axis-position form-control'>
                    <option value='left'>Left</option>
                    <option value='right'>Right</option>
                </select>
            </td>
            <td>
                <select class='my-y-axis-aggregate-type form-control'>
                    <option value=""></option>
                    <option value="Sum">Sum</option>
                    <option value="Count">Count</option>
                    <option value="Avg">Avg</option>
                    <option value="Max">Max</option>
                    <option value="Min">Min</option>
                    <option value="First">First</option>
                    <option value="Last">Last</option>
                </select>
            </td>
        </tr>
    </script>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

    <!--Ref jstable https://datatables.net/-->
    <script type="text/javascript" src="lib/datatables.js"></script>
    <!--Ref https://www.papaparse.com-->
    <script type="text/javascript" src="lib/papaparse.js"></script>
    <script type="text/javascript" src="lib/echarts.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>

</html>