Flot Combine Chart
Line and Bar chart
Source Code
Expand
Pageview Last 48 Hours Comparison
Source Code
Expand
ExampleCombine chart
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script> <script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script> <!-- Javascript --> <script type="text/javascript"> $(function () { var data1 = [ [1354586000000, 153], [1364587000000, 658], [1374588000000, 198], [1384589000000, 663], [1394590000000, 801], [1404591000000, 1080], [1414592000000, 353], [1424593000000, 749], [1434594000000, 523], [1444595000000, 258], [1454596000000, 688], [1464597000000, 364] ]; var data2 = [ [1354586000000, 53], [1364587000000, 65], [1374588000000, 98], [1384589000000, 83], [1394590000000, 980], [1404591000000, 808], [1414592000000, 720], [1424593000000, 674], [1434594000000, 23], [1444595000000, 79], [1454596000000, 88], [1464597000000, 36] ]; var data = [{ label: "data1", data: data1, bars: { show: true, barWidth: 30 * 60 * 60 * 1000 * 80 } },{ label: "data2", data: data2, lines: { show: true }, points:{ show:true } }]; var options = { xaxis: { mode: "time" }, grid:{ backgroundColor: { colors: ["#969696", "#5C5C5C"] } } }; var plot = $.plot($("#example-section25 #flotcontainer"), data, options); }); </script> <!-- HTML --> <div id="example-section25"> <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;"> </div> </div>
Pageview Last 48 Hours Comparison
ExamplePageview comparison chart
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script> <script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script> <!-- Javascript --> <script type="text/javascript"> $(function () { var data24Hours = [ [0, 601],[1, 520],[2, 337],[3, 261],[4, 157],[5, 78],[6, 58],[7, 48],[8, 54],[9, 38],[10, 88],[11, 214],[12, 364], [13, 449],[14, 558],[15, 282],[16, 379],[17, 429],[18, 518],[19, 470],[20, 330],[21, 245],[22, 358],[23, 74] ]; var data48Hours = [ [0, 445],[1, 592],[2, 738],[3, 532],[4, 234],[5, 143],[6, 147],[7, 63],[8, 64],[9, 43],[10, 86],[11, 201],[12, 315], [13, 397],[14, 512],[15, 281],[16, 360],[17, 479],[18, 425],[19, 453],[20, 422],[21, 355],[22, 340],[23, 801] ]; var dataDifference = [ [23, -727],[22, 18],[21, -110],[20, -92],[19, 17],[18, 93],[17, -50],[16, 19],[15, 1],[14, 46],[13, 52],[12, 49], [11, 13],[10, 2],[9, -5],[8, -10],[7, -15],[6, -89],[5, -65],[4, -77],[3, -271],[2, -401],[1, -72],[0, 156] ]; var ticks = [ [0, "22h"],[1, ""],[2, "00h"],[3, ""],[4, "02h"],[5, ""],[6, "04h"],[7, ""],[8, "06h"],[9, ""],[10, "08h"], [11, ""],[12, "10h"],[13, ""],[14, "12h"],[15, ""],[16, "14h"],[17, ""],[18, "16h"],[19, ""],[20, "18h"], [21, ""],[22, "20h"],[23, ""] ]; var data = [{ label: "Last 24 Hours", data: data24Hours, lines: {show: true}, points: {show:true} },{ label: "Last 48 Hours", data: data48Hours, lines: {show: true}, points: {show:true} },{ label: "Difference", data: dataDifference, bars: {show: true} }]; var options = { xaxis: { ticks: ticks }, grid:{ backgroundColor: { colors: ["#C9E3FF", "#8CC4FF"] } }, legend: { labelBoxBorderColor: "#000000", container: $("#legendcontainer"), noColumns: 0 }, }; var plot = $.plot($("#example-section26 #flotcontainer"), data , options); }); </script> <!-- HTML --> <div id="example-section26"> <div id="legendcontainer" style="width: 600px;"></div> <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;"> </div> </div>