Skip to content

Instantly share code, notes, and snippets.

@JSchaenzle

JSchaenzle/jqplot_temp.html

Created April 8, 2014 03:40
Download ZIP

Revisions

  1. JSchaenzle created this gist Apr 8, 2014.
    106 changes: 106 additions & 0 deletions jqplot_temp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="./public/jquery/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="public/jqplot/jqplot.canvasOverlay.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./public/jqplot/jquery.jqplot.min.css">
    </head>

    <body>
    <div id="temperature_chart" style="height: 600px; width: 900px; position: relative;" class="jqplot-target"> </div>
    </body>

    <script class="code" type="text/javascript">

    var actual_temp_data = function() {
    return [ ["2014-04-05 07:00:00 -0400", 25, ""],
    ["2014-04-05 07:01:00 -0400", 26, ""],
    ["2014-04-05 07:02:00 -0400", 27, ""],
    ["2014-04-05 07:03:00 -0400", 29, ""],
    ["2014-04-05 07:04:00 -0400", 31, ""],
    ["2014-04-05 07:05:00 -0400", 33, ""],
    ["2014-04-05 07:06:00 -0400", 36, ""],
    ["2014-04-05 07:07:00 -0400", 40, ""],
    ["2014-04-05 07:08:00 -0400", 43, ""],
    ["2014-04-05 07:09:00 -0400", 47, ""],
    ["2014-04-05 07:10:00 -0400", 50, ""],
    ["2014-04-05 07:11:00 -0400", 52, "52°C"]];
    }

    var projected_temp_data = function() {
    return [ ["2014-04-05 07:11:00 -0400", 52, ""],
    ["2014-04-05 07:35:17 -0400", 100, "7:35:17 AM"]];
    }

    var target_temp_dashed_line = function(target_temp) {
    return { dashedHorizontalLine: {
    name: 'Boiling Pt',
    y: target_temp,
    lineWidth: 3,
    color: '#EF3E42',
    shadow: false
    }
    };
    }

    $(document).ready(function(){

    var plot1 = $.jqplot('temperature_chart', [actual_temp_data(), projected_temp_data(), []], {
    title: "Process Temperature",
    legend: {
    show: true,
    labels:["Actual Temperature", "Projected Temperature", "Target Temperature"]
    },
    seriesDefaults: {
    showMarker:false,
    pointLabels: {show:true},
    rendererOption:{smooth: true}
    },
    canvasOverlay: {
    show: true,
    objects: [target_temp_dashed_line(100)],
    },
    axesDefaults: {
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    axes: {
    xaxis: {
    label: "Time",
    renderer: $.jqplot.DateAxisRenderer,
    tickOptions:{formatString:'%I:%M:%S %p'},
    numberTicks: 8,
    },
    yaxis: {
    label: "Temperature °C"
    },
    },
    });

    var coolTheme = {
    legend: {
    location: 'se',
    },
    title: {
    textColor: '#002225',
    fontSize: '25',
    },
    series: [
    {color: '#00AAA1', lineWidth:5, markerOptions:{show: true}},
    {color: '#79ccc7', lineWidth:2, linePattern:'dashed'},
    {color: '#EF3E42'},
    ],
    grid: {
    backgroundColor: '#E3E7EA',
    gridLineColor: '#002225'
    },
    };
    coolTheme = plot1.themeEngine.newTheme('coolTheme', coolTheme);
    plot1.activateTheme('coolTheme');
    });
    </script>
    </html>