creating tickboxes to show/hide series in flot - flot
I am trying to show/hide each line in graph using checkbox. The check box appears but nothing happens when i click it
https://jsfiddle.net/shorif2000/2pb3yu5t/
var arrayFromPHP = {
chartdata: {
"2G": "[[1450623600000,99.55],[1450620000000,99.54],[1450616400000,99.51],[1450612800000,99.51],[1450609200000,99.5],[1450605600000,99.51],[1450602000000,99.52],[1450598400000,99.55],[1450594800000,99.57],[1450591200000,99.57],[1450587600000,99.58],[1450584000000,99.58],[1450580400000,99.58],[1450576800000,99.57],[1450573200000,99.54],[1450569600000,99.54],[1450566000000,99.53],[1450562400000,99.5],[1450558800000,99.49],[1450555200000,99.5],[1450551600000,99.54],[1450548000000,99.6],[1450544400000,99.6],[1450540800000,99.6],[1450537200000,99.57],[1450533600000,99.52],[1450530000000,99.55],[1450526400000,99.56],[1450522800000,99.54],[1450519200000,99.52],[1450515600000,99.55],[1450512000000,99.59],[1450508400000,99.57],[1450504800000,99.57],[1450501200000,99.57],[1450497600000,99.59],[1450494000000,99.59],[1450490400000,99.58],[1450486800000,99.58],[1450483200000,99.57],[1450479600000,99.58],[1450476000000,99.58],[1450472400000,99.57],[1450468800000,99.57],[1450465200000,99.56],[1450461600000,99.56],[1450458000000,99.55],[1450454400000,99.49],[1450450800000,99.39],[1450447200000,99.36],[1450443600000,99.28],[1450440000000,99.23],[1450436400000,99.17],[1450432800000,99.18],[1450429200000,99.28],[1450425600000,99.34],[1450422000000,99.44],[1450418400000,99.44],[1450414800000,99.46],[1450411200000,99.45],[1450407600000,99.45],[1450404000000,99.35],[1450400400000,99.36],[1450396800000,99.35]]",
"2G3G": "[[1450623600000,99.53],[1450620000000,99.52],[1450616400000,99.5],[1450612800000,99.49],[1450609200000,99.5],[1450605600000,99.5],[1450602000000,99.51],[1450598400000,99.55],[1450594800000,99.58],[1450591200000,99.58],[1450587600000,99.58],[1450584000000,99.59],[1450580400000,99.58],[1450576800000,99.58],[1450573200000,99.57],[1450569600000,99.57],[1450566000000,99.54],[1450562400000,99.56],[1450558800000,99.58],[1450555200000,99.57],[1450551600000,99.59],[1450548000000,99.62],[1450544400000,99.61],[1450540800000,99.58],[1450537200000,99.57],[1450533600000,99.52],[1450530000000,99.53],[1450526400000,99.53],[1450522800000,99.49],[1450519200000,99.5],[1450515600000,99.53],[1450512000000,99.6],[1450508400000,99.6],[1450504800000,99.6],[1450501200000,99.6],[1450497600000,99.6],[1450494000000,99.6],[1450490400000,99.6],[1450486800000,99.6],[1450483200000,99.6],[1450479600000,99.6],[1450476000000,99.6],[1450472400000,99.58],[1450468800000,99.56],[1450465200000,99.57],[1450461600000,99.56],[1450458000000,99.56],[1450454400000,99.48],[1450450800000,99.38],[1450447200000,99.3],[1450443600000,99.25],[1450440000000,99.16],[1450436400000,99.03],[1450432800000,99.04],[1450429200000,99.14],[1450425600000,99.23],[1450422000000,99.36],[1450418400000,99.37],[1450414800000,99.38],[1450411200000,99.37],[1450407600000,99.37],[1450404000000,99.34],[1450400400000,99.34],[1450396800000,99.34]]",
"2G3G4G": "[[1450623600000,99.57],[1450620000000,99.56],[1450616400000,99.55],[1450612800000,99.54],[1450609200000,99.56],[1450605600000,99.55],[1450602000000,99.56],[1450598400000,99.59],[1450594800000,99.62],[1450591200000,99.62],[1450587600000,99.63],[1450584000000,99.63],[1450580400000,99.62],[1450576800000,99.62],[1450573200000,99.62],[1450569600000,99.62],[1450566000000,99.59],[1450562400000,99.61],[1450558800000,99.62],[1450555200000,99.62],[1450551600000,99.63],[1450548000000,99.65],[1450544400000,99.65],[1450540800000,99.62],[1450537200000,99.61],[1450533600000,99.55],[1450530000000,99.56],[1450526400000,99.56],[1450522800000,99.53],[1450519200000,99.54],[1450515600000,99.57],[1450512000000,99.64],[1450508400000,99.64],[1450504800000,99.64],[1450501200000,99.64],[1450497600000,99.64],[1450494000000,99.64],[1450490400000,99.63],[1450486800000,99.63],[1450483200000,99.63],[1450479600000,99.62],[1450476000000,99.62],[1450472400000,99.61],[1450468800000,99.6],[1450465200000,99.6],[1450461600000,99.59],[1450458000000,99.59],[1450454400000,99.52],[1450450800000,99.43],[1450447200000,99.34],[1450443600000,99.3],[1450440000000,99.2],[1450436400000,99.07],[1450432800000,99.08],[1450429200000,99.19],[1450425600000,99.28],[1450422000000,99.41],[1450418400000,99.42],[1450414800000,99.42],[1450411200000,99.42],[1450407600000,99.42],[1450404000000,99.39],[1450400400000,99.39],[1450396800000,99.4]]",
"3G": "[[1450623600000,99.51],[1450620000000,99.52],[1450616400000,99.5],[1450612800000,99.48],[1450609200000,99.5],[1450605600000,99.49],[1450602000000,99.5],[1450598400000,99.54],[1450594800000,99.58],[1450591200000,99.58],[1450587600000,99.58],[1450584000000,99.59],[1450580400000,99.57],[1450576800000,99.58],[1450573200000,99.58],[1450569600000,99.58],[1450566000000,99.55],[1450562400000,99.58],[1450558800000,99.61],[1450555200000,99.6],[1450551600000,99.61],[1450548000000,99.63],[1450544400000,99.61],[1450540800000,99.58],[1450537200000,99.57],[1450533600000,99.51],[1450530000000,99.52],[1450526400000,99.52],[1450522800000,99.48],[1450519200000,99.49],[1450515600000,99.52],[1450512000000,99.6],[1450508400000,99.62],[1450504800000,99.62],[1450501200000,99.61],[1450497600000,99.61],[1450494000000,99.61],[1450490400000,99.61],[1450486800000,99.61],[1450483200000,99.61],[1450479600000,99.6],[1450476000000,99.6],[1450472400000,99.58],[1450468800000,99.56],[1450465200000,99.57],[1450461600000,99.56],[1450458000000,99.56],[1450454400000,99.48],[1450450800000,99.38],[1450447200000,99.28],[1450443600000,99.24],[1450440000000,99.13],[1450436400000,98.98],[1450432800000,98.99],[1450429200000,99.09],[1450425600000,99.19],[1450422000000,99.33],[1450418400000,99.34],[1450414800000,99.35],[1450411200000,99.34],[1450407600000,99.34],[1450404000000,99.33],[1450400400000,99.33],[1450396800000,99.33]]",
"4G": "[[1450623600000,99.89],[1450620000000,99.84],[1450616400000,99.87],[1450612800000,99.89],[1450609200000,99.95],[1450605600000,99.95],[1450602000000,99.96],[1450598400000,99.95],[1450594800000,99.97],[1450591200000,99.96],[1450587600000,99.96],[1450584000000,99.97],[1450580400000,99.97],[1450576800000,99.98],[1450573200000,99.99],[1450569600000,99.98],[1450566000000,99.97],[1450562400000,99.97],[1450558800000,99.96],[1450555200000,99.96],[1450551600000,99.95],[1450548000000,99.92],[1450544400000,99.92],[1450540800000,99.9],[1450537200000,99.89],[1450533600000,99.84],[1450530000000,99.81],[1450526400000,99.84],[1450522800000,99.82],[1450519200000,99.81],[1450515600000,99.83],[1450512000000,99.93],[1450508400000,99.92],[1450504800000,99.92],[1450501200000,99.92],[1450497600000,99.92],[1450494000000,99.92],[1450490400000,99.85],[1450486800000,99.86],[1450483200000,99.86],[1450479600000,99.84],[1450476000000,99.83],[1450472400000,99.88],[1450468800000,99.85],[1450465200000,99.84],[1450461600000,99.84],[1450458000000,99.84],[1450454400000,99.8],[1450450800000,99.75],[1450447200000,99.67],[1450443600000,99.64],[1450440000000,99.51],[1450436400000,99.34],[1450432800000,99.36],[1450429200000,99.56],[1450425600000,99.69],[1450422000000,99.79],[1450418400000,99.78],[1450414800000,99.78],[1450411200000,99.77],[1450407600000,99.78],[1450404000000,99.77],[1450400400000,99.79],[1450396800000,99.87]]"
},
data_rows: 64,
days: "3",
days_per_period: 1,
days_per_period_unavailability: 1,
filter: "",
filtersql: "",
filtersql2: " AND crqcoos is null AND crqinflight is null",
hours: 1,
hours_unavailability: 1,
max_days: 30,
min: 98,
period: "hh24",
tick: 6,
tick_type: "hour",
timeformat: "%a<br>%H:%M %p<br>%d %b"
};
var datasets = {};
choices_CAGraph(arrayFromPHP);
function choices_CAGraph(arrayFromPHP) { //initial load
//var datasets = [];
$.each(arrayFromPHP.chartdata, function(i, elem) {
var jsonObj = $.parseJSON('[' + elem + ']');
var iLabel = i;
datasets[i.toLowerCase()] = {
label: iLabel,
data: jsonObj[0]
};
});
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
var choiceContainer_CAGraph = $("#choices_CAGraph");
$.each(datasets, function(key, val) {
choiceContainer_CAGraph.append("<input class='cc' type='checkbox' name='" + key + "' checked='checked' id='id" + key + "' value='" + key + "'></input>" + "<label for='id" + key + "'>" + val.label + "</label>");
});
//choiceContainer_CAGraph.find("input").click(plotAccordingToChoices());
var showpoints = false;
if ((arrayFromPHP.data_rows == 1) && (arrayFromPHP.period == "hh24") && (arrayFromPHP.days == 1))
showpoints = true;
else if ((arrayFromPHP.period == "dd" || arrayFromPHP.period == "day" || arrayFromPHP.period == "mon") && arrayFromPHP.days == 1)
showpoints = true;
var options = {
legend: {
position: "sw",
noColumns: 5
},
yaxis: {
min: arrayFromPHP.min,
max: 100
},
xaxis: {
mode: "time",
timeformat: arrayFromPHP.timeformat,
tickSize: [arrayFromPHP.tick, arrayFromPHP.tick_type]
},
grid: {
clickable: true,
hoverable: true
},
series: {
points: {
show: showpoints
}
}
};
plotAccordingToChoices(options);
}
function plotAccordingToChoices(options) {
var choiceContainer_CAGraph = $("#choices_CAGraph");
var data = [];
choiceContainer_CAGraph.find("input:checked").each(function() {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});
$.plot("#CAGraph", data, options);
}
arrayFromPHP is json output from ajax request. I have 5 graphs on this page and I am trying to reuse this function so they all have show/hide feature. currently the tick boxes appear but nothing happens.
Change
//choiceContainer_CAGraph.find("input").click(plotAccordingToChoices());
to
choiceContainer_CAGraph.find("input").click(function() { plotAccordingToChoices(options); });
Updated fiddle
Related
free-jQgrid throws SystemOutofMemoryException if data count is more than 10K
Recently, I have started getting an issue related to "SystemOutOfMemoryException" in free-jQgrid. The version that I am using is 4.15.4 with MVC 5 and Sql Server DB queries for bringing data . The reason I have found is growth of the data. If data is around 10K with LoadOnce:true at that point it works without any issue. But when more data comes then it started throwing this issue.
I am getting all data from database in one go and loads it to the grid.
Here is some pieces of controller code:
public JsonResult GetDataWRTLanguage(string searchKey)
{
FormBL formsbl = new FormBL();
List<Form_Check> lstPPVM = new List<Form_Check>();
filter f = new filter();
string returnedLangCode = "";
if (searchKey != "")
{
TempData["LanguageCode"] = searchKey;
}
if (Convert.ToString(TempData["LanguageCode"]) != "")
{
returnedLangCode = Convert.ToString(TempData["LanguageCode"]);
TempData.Keep("LanguageCode");
}
else{
returnedLangCode = searchKey;
}
lstPPVM = formsbl.getDataWithLanguage(returnedLangCode);
//var newList = JsonConvert.SerializeObject(lstPPVM);
int page = 1, rows = 1;
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = lstPPVM.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
var Results = lstPPVM.AsQueryable();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = Results
};
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
Here is jqgrid code
$("#grid").jqGrid({
url: '/MView/GetDataWRTLanguage?searchKey=' + LanguageId + "",
mtype: "GET",
datatype: "json",
colNames: [*more than 15*]
colModel: [*body of all columns with search*]
loadComplete: function () {
if ($('#grid').getGridParam('records') === 0) {
oldGrid = $('#GridIdb2 tbody').html();
$(".jqgfirstrow").css("height", "1px");
}
else {
oldGrid = "";
}
this.p.lastSelected = lastSelected;
var obj = JSON.parse(sessionStorage.getItem('majorgridInfo'));
if (obj != undefined || obj != undefined || obj != null || obj != null) {
jQuery("#grid").setGridParam({ rowNum: obj.rowNum.toString() });
var grid = $("#grid");
jQuery("#grid").setGridParam({ rowNum: obj.rowNum }).trigger("reloadGrid");
$('.ui-pg-selbox').val(obj.rowNum);
}
},
onPaging: function (pgbtn) {
Selected_RowList = $('.ui-pg-selbox').val();
saveGridParameters();
},
forceClientSorting: true,
cmTemplate: { autoResizable: true },
width: '100%',
scrollbar: true,
autoResizing: { compact: true },
editurl: "/MajorsView/EditParticipantRecords/",
pager: jQuery('#pager'),
loadonce: true,
viewrecords: true,
gridview: true,
height: '480px',
//width: '100%',
//maxHeight: 980,
//pager: '#pager',
rowNum: 25, //// adjust height of Jqgrid
rowList: [25, 100, 200, 500, 1000,10000], ////adjust height of Jqgrid
ignoreCase: true,
autowidth: true,
shrinkToFit: false,
hidegrid: true, //To disable collapsing
iconSet: "fontAwesome",
caption: "<i class='fa fa-users'></i> Participant List",
multiSort: true,
sortname: 'ReferenceId',
sortOrder: 'asc',
rowattr: function (rd) {
if (rd.Check === "true") {
return { "class": "state_inactive" };
}
},
multiselect: false,
emptyrecords: "No records to display",
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "ReferenceId"
},
inlineEditing: { keys: true, defaultFocusField: "ReferenceId", focusField: "ReferenceId" },
});
Here I also used JsonMaxLength property but it still throws error.
I've seen that even 60K data is still working fine with it but for me it starts giving error on more than 10K data.
Additional questions: Should I use Server side jqgrid implementation, if yes then how can i modify this link to newer version of MVC and jQgrid version.
Any help would be greatly appreciated.
lodash _.filter timestamp between range of timestamp?
Here my data:
[
{
"idi": 0,
"ut": 1479679625,
"eid": 0,
"ide": 0
},
{
"idi": 1,
"ut": 1479679630,
"eid": 1,
"ide": 0
},
{
"idi": 2,
"ut": 1479679650,
"eid": 0,
"ide": 1
},
{
"idi": 3,
"ut": 1479679655,
"eid": 1,
"ide": 1
}
]
ut is unix timestamp, I need to get all objects between range of 2 ut values. like >= 1479679625 && <= 1479679655 (all objects between first & last object). I use lodash with lowdb and nodejs:
const low = require('lowdb');
var _ = require('lodash');
var DB = low('pathDB');
var TIME_QUERY_START_UNIX = 1479679625;
var TIME_QUERY_STOP_UNIX = 1479679655;
var QUERY = _.filter(DB, function(o) { return TIME_QUERY_START_UNIX <= o.ut && o.ut <= TIME_QUERY_STOP_UNIX; });
but it throws an
Cannot read property 'ut' of undefined
How I do a right command?
Thanks
_.filter(data, function(item) {
return _.inRange(
item.ut,
TIME_QUERY_START_UNIX,
TIME_QUERY_STOP_UNIX + 1
);
})
check item.eid = 0
_.filter(data, function(item) {
return _.every([
_.inRange(
item.ut,
TIME_QUERY_START_UNIX,
TIME_QUERY_STOP_UNIX + 1
),
item.eid === 0
]);
})
Code inject via Content Script gets removed
I am creating a Chrome Extension that would draw an image above tag showing Flash content. I have written the content script in my "contentscript.js" file which does nothing but simply inserts another script file "backgroundscript.js" into page's body via a script tag.
The code works on few of sites having flash videos and shows the image right above the Flash Player window but on other sites it does not show up. Also on few it shows up for a fraction of a second and then gets disappeared.
Below is my manifest file:
{
"name": "My First Chrome Extension",
"version": "1.0.0.0",
"description": "Tag videos from websites with a single click!",
"icons": { "16":"application_16.png","48":"application_48.png","128":"application_128.png" },
"homepage_url": "http://www.myurl.com",
"page_action":{
"default_icon":{
"19":"application_19.png",
"38":"application_38.png"
},
"default_title":"VDownloader browser plugin"
},
"content_scripts": [ { "js": [ "contentscript.js" ], "matches": [ "http://*/*" ], "run_at" : "document_end", "all_frames": true} ],
"plugins": [ { "path": "myplugin.dll", "public": true } ],
"manifest_version":2,
"minimum_chrome_version":"17",
"offline_enabled":true,
"permissions":["tabs","http://*/*", "https://*/*","contextMenus"],
"web_accessible_resources":["application.png","backgroundscript.js"]
}
Also I checked by inserting "debugger;" into my script and monitoring code execution via console; the script gets added at least once into the page body. Even in the cases where no image button is shown.
Is this some kind of anit-XSS control implemented on the the more advanced sites not showing my button?
I would really appreciate your help as I have been trying to get over this from past couple of weeks without success :(
EDIT:
Please see the content script below:
var s = document.createElement('script');
s.src = chrome.extension.getURL("backgroundscript.js");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
Target sites:
Does not show the button: http://www.metacafe.com
Shows the button for a moment: http://www.dailymotion.com
Shows the button correctly: http://www.myreviewalarm.com
Please take a look at backgroundscript.js content:
var vdDelayTimer;
var vdUpdateInterval;
var playerButtons;
embedPlugin();
function embedPlugin() {
var embed = document.createElement('embed');
embed.setAttribute('type', 'application/x-myplugin');
embed.setAttribute('id', 'myplugin');
embed.setAttribute('style', 'width:1px;height:1px;position:absolute;left:0px;top:0px;');
if(document.body!=null)
{
document.body.appendChild(embed);
}
testPlugin();
}
function testPlugin() {
var plugin = document.getElementById('vdPlugin');
if (plugin != null) {
playerButtons = [];
vdDelayTimer = setTimeout("appendButtons()", 2000);
}
else {
window.alert('Plugin does not exist!');
}
}
function updateButtons() {
for (i = 0; i < playerButtons.length; i += 2) {
updateButtonLocation(playerButtons[i], playerButtons[i + 1]);
}
}
function updateButtonLocation(player, button) {
var playerX = getX(player);
var playerY = getY(player);
var buttonHeight = 38;
var buttonWidth = 196;
var buttonX = playerX + player.offsetWidth - buttonWidth - 12;
var buttonY = playerY - buttonHeight + 1;
button.setAttribute('style', 'background-image: url(http://myurl.com/img/browser-download-button.png); width:' + buttonWidth + 'px;height:' + buttonHeight + 'px;position:absolute;left:' + buttonX + 'px;top:' + buttonY + 'px; cursor:pointer; cursor:hand;');
}
function appendButtons() {
debugger;
var objectTags = document.getElementsByTagName('object');
for (var i = 0; i < objectTags.length; i++) {
var objectTag = objectTags[i];
if ((objectTag.hasAttribute('classid') && objectTag.getAttribute('classid') == 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000')
|| (objectTag.hasAttribute('type') && objectTag.getAttribute('type') == 'application/x-shockwave-flash')) {
if (objectTag.offsetWidth >= 320 && objectTag.offsetHeight >= 240)
createButton(objectTag, getX(objectTag), getY(objectTag), objectTag.offsetWidth);
}
}
var embedTags = document.getElementsByTagName('embed');
for (var i = 0; i < embedTags.length; i++) {
try {
var embedTag = embedTags[i];
if (embedTag.hasAttribute('type') && embedTag.getAttribute('type') == 'application/x-shockwave-flash') {
if (embedTag.offsetWidth >= 320 && embedTag.offsetHeight >= 240)
createButton(embedTag, getX(embedTag), getY(embedTag), embedTag.offsetWidth);
}
}
catch (err) { }
}
var videoTags = document.getElementsByTagName('video');
for (var i = 0; i < videoTags.length; i++) {
try {
var videoTag = videoTags[i];
if (videoTag.hasAttribute('src')) {
if (videoTag.offsetWidth >= 320 && videoTag.offsetHeight >= 240)
createButton(videoTag, getX(videoTag), getY(videoTag), videoTag.offsetWidth);
}
}
catch (err) { }
}
vdUpdateInterval = setInterval("updateButtons();", 500);
}
function createButton(videoTag, playerX, playerY, playerWidth) {
debugger;
var buttonHeight = 38;
var buttonWidth = 196;
var buttonX = playerX + playerWidth - buttonWidth - 12;
var buttonY = playerY - buttonHeight + 1;
var vdPlugin = document.getElementById('vdPlugin');
var strLocation = window.location.toString();
// if (isSupported(strLocation)) {
var downloadButton = document.createElement('img');
downloadButton.setAttribute('title', 'Tag this video');
downloadButton.setAttribute('src', 'http://myurl.com/img/browser-download-button.png');
downloadButton.setAttribute('style', 'background-image: url(http://myurl.com/img/browser-download-button.png); width:' + buttonWidth + 'px;height:' + buttonHeight + 'px;position:absolute;left:' + buttonX + 'px;top:' + buttonY + 'px; cursor:pointer;cursor:hand;z-index:2147483647;');
downloadButton.setAttribute('onclick', 'javascript:document.getElementById(\'vdPlugin\').downloadNow(window.location.href);');
downloadButton.setAttribute('oncontextmenu', 'javascript:return false;');
document.body.appendChild(downloadButton);
playerButtons.push(videoTag, downloadButton);
// }
}
function getY(oElement) {
var iReturnValue = 0;
while (oElement != null) {
iReturnValue += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
function getX(oElement) {
var iReturnValue = 0;
while (oElement != null) {
iReturnValue += oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
function isSupported(url) {
var regLen = supportedSites.length;
var regEx;
var res = false;
try {
for (var i = 0; i < regLen && res == false; i++) {
regEx = new RegExp(supportedSites[i], "i");
res = regEx.test(url);
}
}
catch (ex) {
}
return res;
}
Rickshaw.Graph.RangeSlider TypeError: $(element).slider is not a function
I have this error:
TypeError: $(element).slider is not a function
with the following script:
Rickshaw.namespace('Rickshaw.Graph.RangeSlider');
Rickshaw.Graph.RangeSlider = function(args) {
var element = this.element = args.element;
var graph = this.graph = args.graph;
$( function() {
$(element).slider( {
range: true,
min: graph.dataDomain()[0],
max: graph.dataDomain()[1],
values: [
graph.dataDomain()[0],
graph.dataDomain()[1]
],
slide: function( event, ui ) {
graph.window.xMin = ui.values[0];
graph.window.xMax = ui.values[1];
graph.update();
// if we're at an extreme, stick there
if (graph.dataDomain()[0] == ui.values[0]) {
graph.window.xMin = undefined;
}
if (graph.dataDomain()[1] == ui.values[1]) {
graph.window.xMax = undefined;
}
}
} );
} );
$(element)[0].style.width = graph.width + 'px';
graph.onUpdate( function() {
var values = $(element).slider('option', 'values');
$(element).slider('option', 'min', graph.dataDomain()[0]);
$(element).slider('option', 'max', graph.dataDomain()[1]);
if (graph.window.xMin == undefined) {
values[0] = graph.dataDomain()[0];
}
if (graph.window.xMax == undefined) {
values[1] = graph.dataDomain()[1];
}
$(element).slider('option', 'values', values);
} );
};
From the following page:
https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Graph.RangeSlider.js
The javascript debugger show me this line: slide: function( event, ui ) {
Can you show me a way to resolve my problem. Thanks you!
You should import jqueryui before using the slider. http://jqueryui.com/slider/
Flot tooltip hovering
I have an issue with the tooltip in flot. I'm passing a timestamp data and it will reflect as a number, e.g 1113340002003. What I want to do is that when I hover over a data point, it will reflect as the date: 01/04/2012 and not that number. Any help would be great! Stuck here for a few hours....
This is what I'm passing to plot:
var time = (new Date(dates[i]));
graph.push([time, demand[i]]);
This is the section that I used to plot my graph:
var options = {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 0, max: 20000 },
xaxis: {
mode: "time", timeformat: "%d/%m/%y"}
var plot = $.plot($("#placeholder"),
[ { data: graph, label: "price" } ],
options);
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
var td = x.split("/");
Just convert it to a javascript data object and then build the string yourself. var d = new Date(item.datapoint[0]); var someDay = d.getDate(); var someMonth = d.getMonth() + 1; //months are zero based var someYear = d.getFullYear(); var stringDate = someMonth + "/" + someDay + "/" + someYear; var x = stringDate; var y = item.datapoint[1].toFixed(2);