jqplot,jq-plot,linechart, line chart,time,time period,day perion,hour

jqplot,jq-plot,linechart, line chart,time,time period,day perion,hour

by Şuayip Ekmekci

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.cursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<button id="dataHide">Hide Data</button>
<div id="resize">
    <div id="displayClicks"></div>
</div>

CSS

#displayClicks {
    height:360px;
    width:100%;
}

.jqplot-table-legend{margin-bottom:0 !important;}

.resetLineChart{
  font-weight:bold;
    position: absolute;
    margin-top: 10px;
    left: 50%;
    margin-left: -48px;
    cursor: pointer;
}

JavaScript

var SummaryColors = ["#6B74DB", "#68B771", "#F370FF", "#E56D4B", "#F99857", "#6BACDB", "#86B768", "#904CFF", "#E54B77", "#F95767", "#6BACDB", "#86B768", "#CF70FF", "#E54B77", "#F95767", "#6BC8DB", "#9AB768", "#689FFF", "#E54B9D", "#F95790"];

function format_number(number) {
    number = number + '';
    var n = number.split(" ");
    if (n.length == 2) return n[0] + " <span style='font-family:'Open Sans'; font-size:10px;'>" + n[1] + "</span>";
    return number;
}


var chartDataSet = {
    "o": {
        "list": {
            "KANAL 7": {
                "00:00:00": 0.66,
                    "01:00:00": 0.62,
                    "02:00:00": 0.62,
                    "03:00:00": 0.62,
                    "04:00:00": 0.05,
                    "05:00:00": 0.06,
                    "06:00:00": 0.82,
                    "07:00:00": 1.6,
                    "08:00:00": 0.63,
                    "09:00:00": 0.62,
                    "10:00:00": 0.66,
                    "11:00:00": 0.66,
                    "12:00:00": 0.65,
                    "13:00:00": 0.64,
                    "14:00:00": 0.66,
                    "15:00:00": 0.73,
                    "16:00:00": 0.67,
                    "17:00:00": 0.64,
                    "18:00:00": 0.66,
                    "19:00:00": 0.69,
                    "20:00:00": 0.62,
                    "21:00:00": 0.33,
                    "22:00:00": 0.67,
                    "23:00:00": 0.64
            },
                "KANAL D": {
                "00:00:00": 0.72,
                    "01:00:00": 0.57,
                    "03:00:00": 0.01,
                    "04:00:00": 0.01,
                    "05:00:00": 0.02,
                    "06:00:00": 0.34,
                    "07:00:00": 0.61,
                    "08:00:00": 0.6,
                    "09:00:00": 0.58,
                    "10:00:00": 0.58,
                    "11:00:00": 0.68,
                    "12:00:00": 0.62,
                    "13:00:00": 0.65,
           ...