Vendor : Flot Chart
Attractive JavaScript charts for jQuery
- License: IOLA and Ole Laursen
- https://github.com/flot/flot
src/js/vendors/vendor.flot.js
Flot Ajax - JSON
Click the graph to see the modal. On click you can open: an ajax modal, go to URL or only pass data to a callback! See
Using
data-flot-click variables. Using
data-ajax-update-interval="1000" (or more, in ms), graph is realtime updated!
<!-- optional save button -->
<a href="#" data-flot-id="flot_json_example" data-file-name="json-flot" class="flot-save btn btn-sm btn-primary" title="Save Chart" aria-label="Save Chart">
<svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-save-fill" viewBox="0 0 16 16">
<path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6c-.314.418-.5.937-.5 1.5v7.793L4.854 6.646a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0-.708-.708L8.5 9.293V1.5z"></path>
</svg>
<span class="ms-2">Save chart</span>
</a>
Read about data-ajax-params
<!--
data-flot-type="bar|fill"
data-flot-click="modal|url|callback"
empty = no click,
url = redirect to url,
modal = open ajax modal if SOW : Modal plugin is present!
callback = data is send to callback function only
flot_callback = function(event, pos, item) { ... }
modal attributes (?demo=true. is added to avoid error on local .html)
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
Note: is dinamically added to URL val_x, val_y, pos_x, pos_y
Example: &val_x=5&val_y=17168&pos_x=5.069341808617234&pos_y=15708.968144044322
Debug is on, url is visible in browser console.
-->
<div class="flot-chart small"
data-flot-id="flot_json_example"
data-flot-border-color="#eaeaea"
data-flot-type="fill"
data-flot-legend-show="true"
data-ajax-url="_ajax/flot_chart_data.json"
data-ajax-update-interval="0"
data-ajax-params="['action','graph_data']['param2','value2']"
data-ajax-method="GET"
data-ajax-dataType="json"
data-flot-click="modal"
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
data-flot-ticks='[
[1, "Jan"],
[2, "Feb"],
[3, "Mar"],
[4, "Apr"],
[5, "May"],
[6, "Jun"],
[7, "Jul"],
[8, "Aug"],
[9, "Sep"],
[10, "Oct"],
[11, "Nov"],
[12, "Dec"]
]' style="height:400px;"></div>
[
{
"label":"Visits",
"color": "#6DBB30",
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 7881],
[5, 17168],
[6, 18596],
[7, 27374],
[8, 19294],
[9, 0],
[10, 0],
[11, 0],
[12, 0]
]
},{
"label":"Orders",
"color": "#FF9F01",
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 7881],
[5, 7168],
[6, 8596],
[7, 7374],
[8, 9294],
[9, 0],
[10, 0],
[11, 3000],
[12, 0]
]
}
]
Flot Bars
<!--
data-flot-type="bar|fill"
data-flot-click="modal|url|callback"
empty = no click,
url = redirect to url,
modal = open ajax modal if SOW : Modal plugin is present!
callback = data is send to callback function only
flot_callback = function(event, pos, item) { ... }
modal attributes (?demo=true. is added to avoid error on local .html)
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
Note: is dinamically added to URL val_x, val_y, pos_x, pos_y
Example: &val_x=5&val_y=17168&pos_x=5.069341808617234&pos_y=15708.968144044322
Debug is on, url is visible in browser console.
-->
<div class="flot-chart small"
data-flot-id="flot_yearly"
data-flot-border-color="#eaeaea"
data-flot-type="bar"
data-flot-legend-show="true"
data-flot-click="modal"
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
data-flot-color-1="#6595b4"
data-flot-label-1="Visits"
data-flot-data-1="[
[1, 0],
[2, 0],
[3, 0],
[4, 7881],
[5, 17168],
[6, 18596],
[7, 27374],
[8, 19294],
[9, 0],
[10, 0],
[11, 0],
[12, 0]
]"
data-flot-ticks='[
[1, "Jan"],
[2, "Feb"],
[3, "Mar"],
[4, "Apr"],
[5, "May"],
[6, "Jun"],
[7, "Jul"],
[8, "Aug"],
[9, "Sep"],
[10, "Oct"],
[11, "Nov"],
[12, "Dec"]
]' style="height:400px;"></div>
Flot 3 graphs
<div class="flot-chart small"
data-flot-id="flot_three"
data-flot-border-color="#eaeaea"
data-flot-type="fill"
data-flot-legend-show="true"
data-flot-click="modal"
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
data-flot-color-1="#6595b4"
data-flot-label-1="Visits"
data-flot-data-1="[
[1, 0],
[2, 0],
[3, 0],
[4, 7881],
[5, 17168],
[6, 18596],
[7, 27374],
[8, 19294],
[9, 0],
[10, 0],
[11, 0],
[12, 0]
]"
data-flot-color-2="#FF9F01"
data-flot-label-2="Orders"
data-flot-fill-2="false"
data-flot-data-2="[
[1, 0],
[2, 0],
[3, 0],
[4, 3881],
[5, 3168],
[6, 1596],
[7, 2774],
[8, 1924],
[9, 0],
[10, 0],
[11, 0],
[12, 0]
]"
data-flot-color-3="#6DBB30"
data-flot-label-3="Conversions"
data-flot-fill-3="true"
data-flot-data-3="[
[1, 3588],
[2, 1897],
[3, 4888],
[4, 1881],
[5, 2168],
[6, 596],
[7, 6774],
[8, 924],
[9, 4877],
[10, 3211],
[11, 2100],
[12, 8900]
]"
data-flot-ticks='[
[1, "Jan"],
[2, "Feb"],
[3, "Mar"],
[4, "Apr"],
[5, "May"],
[6, "Jun"],
[7, "Jul"],
[8, "Aug"],
[9, "Sep"],
[10, "Oct"],
[11, "Nov"],
[12, "Dec"]
]' style="height:400px;"></div>
Flot Inline Javascript
<div class="flot-chart small"
data-flot-id="my_flot_id"
data-flot-custom-data="my_flot_data"
data-flot-custom-options="my_flot_options" style="height:400px;">
</div>
/*
define only once,
if multiple graphs are on the same page
*/
var flot_custom = {};
flot_custom['my_flot_data'] = [
{ /* data */
data: [
[1, 871],
[2, 938],
[3, 957],
[4, 946],
[5, 837],
[6, 895],
[7, 881],
[8, 978],
[9, 882],
[10, 891]
],
label: 'My Custom Flot',
lines: { show: true },
points: { show: true },
color: '#6dbb30'
}
];
flot_custom['my_flot_options'] = {
grid: {
mouseActiveRadius : 30,
hoverable : true,
borderWidth : 0,
tickColor : '#ebebeb',
borderColor : '#ebebeb',
},
tooltip : true,
tooltipOpts : {
content : function(label, xval, yval, flotItem) {
return "Value: "+yval;
},
dateFormat : "%y-%0m-%0d"
},
legend: {
show: true,
noColumns: 1,
},
// https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
xaxis:{
ticks: [
[1, "01"], [2, "02"],
[3, "03"], [4, "04"],
[5, "05"], [6, "06"],
[7, "07"], [8, "08"],
[9, "09"], [10, "10"]
],
tickLength : 5,
mode: "time"
},
series : {
/* bars */
bars: {
show: true,
lineWidth:0,
align: "center",
barWidth: 0.5
},
/* lines */
lines : {
show : true,
lineWidth : 1,
fill : true,
fillColor : {
colors : [{
opacity : 0.1
}, {
opacity : 0.15
}]
}
},
}
};
Flot Pie
<div class="flot-chart small"
data-flot-type="pie"
data-flot-legend-show="true"
data-flot-click="modal"
data-flot-click-url="_ajax/modal_flot.html?demo=true"
data-flot-modal-size="modal-lg"
data-flot-modal-backdrop="static"
data-flot-modal-centered="true"
data-flot-id="pie_example1"
data-flot-pie-data='[
{
"label": "Asia",
"data": "4119630000",
"color": "#007bff"
},
{
"label": "Latin America",
"data": "590950000",
"color": "#dc3545"
},
{
"label": "Africa",
"data": "1012960000",
"color": "#ffc107"
},
{
"label": "Oceania",
"data": "95100000",
"color": "#28a745"
},
{
"label": "Europe",
"data": "727080000",
"color": "#6610f2"
},
{
"label": "North America",
"data": "344120000",
"color": "#e83e8c"
}
]' style="height:400px;"></div>