free-jQgrid throws SystemOutofMemoryException if data count is more than 10K - asp.net-mvc-5

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.

Related

Flutter convert xlsx to List<Object>

I have an xlsx excel table and I need to convert it into a List<Object> and take just the following columns: D, F, H, J, L. I'm trying everything but nothing works.
I'm using the following plugin to do it:
file_picker
excel
Does anyone know how can I convert it?
Table
Here is my example code:
import 'package:adminpanelweb/models/import_users.dart';
import 'package:excel/excel.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
Future importUsers(BuildContext context, String palaceId) async {
FilePickerResult? pickedFile = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['xlsx'],
allowMultiple: false,
);
if (pickedFile != null) {
var bytes = pickedFile.files.single.bytes;
var excel = Excel.decodeBytes(bytes!);
List<ImportUsers> users = [];
List<String> stringList = [];
for (var table in excel.tables.keys) {
for (var rows in excel.tables[table]!.rows) {
// print(
// '${rows.toString().isNotEmpty ? rows.map((e) => e?.value).toList() : ''}',
// );
stringList.add(
'${rows.toString().isNotEmpty ? rows.map((e) => e?.value).toList() : ''}');
}
}
final regExp = RegExp(r'(?:\[)?(\[[^\]]*?\](?:,?))(?:\])?');
final input = stringList.toString();
final result = regExp
.allMatches(input)
.map((m) => m.group(1))
.map((String? item) => item?.replaceAll(RegExp(r'[\[\]]'), ''))
.map((m) => [m])
.toList();
for (var items in result) {
users = items.map((e) {
return {
"field1": e?[0],
"WEB": e?[1],
"R": e?[2],
"Denominazione": e?[3],
"Data Uscita": e?[4],
"Codice Fiscale": e?[5],
"Partita IVA": e?[6],
"Username": e?[7],
"field9": e?[8],
"Password": e?[9],
"Profilo": e?[10],
"Email": e?[11],
};
}).toList() as List<ImportUsers>;
print(items);
}
// print('sadasdasdasdsad ${users.length}');
}
}
After some hours I solved as it:
Future importUsers(BuildContext context, String palaceId) async {
FilePickerResult? pickedFile = await FilePicker.platform.pickFiles(
type: FileType.custom,
allowedExtensions: ['xlsx'],
allowMultiple: false,
);
if (pickedFile != null) {
List<User> xlsxToList = [];
var bytes = pickedFile.files.single.bytes;
var excel = Excel.decodeBytes(bytes!);
for (var table in excel.tables.keys) {
for (var row in excel.tables[table]!.rows) {
xlsxToList.add(
User(
userEmail: row[11]?.value.toString(),
userUsername: row[7]?.value.toString(),
userName: row[3]?.value.toString(),
userCf: row[5]?.value.toString(),
userPassword: row[9]?.value.toString(),
),
);
}
}
xlsxToList.removeAt(0);
print('__________ ${userToJson(xlsxToList)}');
}
}

Tabulator: How to create a dynamic custom editor based on another cell's value

Using Tabulator, I want to dynamically create a cell's editor, either input or select, based on another cell's value.
Declaring:
var valueEditor = function(cell, onRendered, success, cancel, editorParams)
I seem to be able to declare the correct editor and I have the list of values are available in the editorParams the is passed to the function API, but for theselect I can't get the drop-down to display the values.
Here's a code snippet:
var valueEditor = function(cell, onRendered, success, cancel, editorParams) {
const item = cell.getRow().getData();
var editor = null;
// Use a combobox when the type is Choice, or regular input cell otherwise
if (item.type === "Choice") {
editor = document.createElement("select");
editor.setAttribute("values", editorParams.values ); // <-- This is probably incorrect, but I'm unable to assign the right attribute
} else {
editor = document.createElement("input");
editor.setAttribute("type", "text");
}
//create and style input
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
editor.value = item.value;
//when the value has been set, trigger the cell to update
function successFunc(){
success(editor.value );
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
//return the editor element
return editor;
};
{title: 'Name', field: 'name', width: 130},
{title: 'Type', field: 'type', width: 95},
{title: 'Value', field: 'value', width: 260, editor: valueEditor }];
When my row's type column is "Choice", I would like to show a combobox with, say Choice1, Choice2, Choice3, Choice4. Otherwise, I want to have a regular Input cell where the user can enter any values.
It took much time and I found this way to create custom select editor of Tabulator for showing NAME base on KEY value. Hope this post helps someone.
var cboData = [
{
"key": "",
"name": ""
},
{
"key": "01",
"name": "OPTION 1"
},
{
"key": "02",
"name": "OPTION 2"
}];
var comboEditor = function (cell, onRendered, success, cancel, editorParams) {
var editor = document.createElement("select");
for (var i = 0; i < editorParams.length; i++) {
var opt = document.createElement('option');
opt.value = editorParams[i].key;
opt.innerHTML = editorParams[i].name;
editor.appendChild(opt);
}
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
editor.value = cell.getValue();
onRendered(function () {
editor.focus();
editor.style.css = "100%";
});
function successFunc() {
success(editor.value);
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
return editor;
};
In columns setting like this:
{
title: "SELECTION",
field: 'select_key',
headerHozAlign: 'center',
hozAlign: 'center',
editor: comboEditor,
editorParams: cboData,
formatter: function (cell, formatterParams) {
for (var i = 0; i < formatterParams.length; i++) {
if (formatterParams[i].key == cell.getValue()) {
return formatterParams[i].name;
}
}
},
formatterParams: cboData,
},
Edited:
If you want to load dropdown value based on another cell value, you can change as bellow:
var cboData = []; //Store last values based on another cell value
var comboEditor = function (cell, onRendered, success, cancel, editorParams) {
var editor = document.createElement("select");
//GET DATA FOR THIS HERE. NOTE THAT THIS CALL EVERY TIME YOU SELECT THIS DROPDOWN
let otherCellValue = cell.getData().OtherColName;
$.ajax({
type: 'POST',
url: [URL TO GET VALUE],
contentType: "application/json; charset=utf-8",
data: '{ key:' + JSON.stringify(otherCellValue ) + '}',
async: false, //wait ultil get data done
processData: false,
success: function (result) {
//assume that result is an array of data with VALUE/TEXT fields
for (var i = 0; i < result.length; i++) {
var item = {};
item.key = result[i].Value;
item.name = result[i].Text;
cboData.push(item);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
for (var i = 0; i < cboData.length; i++) {
var opt = document.createElement('option');
opt.value = cboData[i].key;
opt.innerHTML = cboData[i].name;
editor.appendChild(opt);
}
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
editor.value = cell.getValue();
onRendered(function () {
editor.focus();
editor.style.css = "100%";
});
function successFunc() {
success(editor.value);
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
return editor;
};
item, I think, is an object, so you would need to find your property value for your cell, like :
editor.value = item[cell.getField()]

creating tickboxes to show/hide series in 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

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);

Resources