This is my code, I am trying to populated the grid using the data added in data.json, a default sorting is supposed to be added to the jqgrid which doesn't happen. I have given data in data.json which will be populated on the grid. Paging works but sorting doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jqgrid/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="js/jqgrid/jqgridscreen-min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/custom.css" />
<meta charset="utf-8" />
<title>jqGrid Loading Data - JSON</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
datatype: "json",
colModel: [
{ label: 'Category Name', name: 'CategoryName', width: 75, sorttype:'string' },
{ label: 'Product Name', name: 'ProductName', width: 90, sorttype:'string' },
{ label: 'Country', name: 'Country', width: 100, sorttype:'string'},
{ label: 'Price', name: 'Price', width: 80, sorttype:'float' },
{ label: 'Quantity', name: 'Quantity', width: 80, sorttype:'integer' }
],
loadonce: true,
gridview: true,
autoencode: true,
width: 780,
height: 200,
rowNum: 15,
viewrecords: true,
pager: "#jqGridPager",
loadComplete: function () {
var $self = $(this);
if ($self.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$self.trigger("reloadGrid"); // Call to fix client-side sorting
}, 50);
}
}
});
});
</script>
</body>
</html>
What is the mistake and why sorting doesn't occur?
If you use free jqGrid fork, then you can remove your current loadComplete and to add forceClientSorting: true option instead. The option works only in combination with loadonce: true. It allows to sort and to filter the data locally direct after loading from the server. See UPDATE part of the old answer
Related
I am new to web development and am trying to use patternFly Donut chart for my project. But when I try to check it by running as simple HTML it throws below error. Could someone help me with this?
Error image
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig.bindto = '#donut-chart-6';
utilizationDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
utilizationDonutChartConfig.size = {
width: 200,
height: 171
};
utilizationDonutChartConfig.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
Your use of $() is confusing. Commenting out the lines that use it yields a donut chart. It seems like you're trying to load default configurations, but I didn't find any information on the c3 website indicating that it was a jQuery plugin. Perhaps you're misunderstanding what jQuery does? If you're trying to load some sort of default configurations from a form as JSON then you might need to get more creative.
For simplicity, in the example below I've reformatted your data as a single object.
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
//var c3ChartDefaults = $().c3ChartDefaults();
//var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig = {
bindto : '#donut-chart-6',
data : {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
},
size : {
width: 200,
height: 171
},
tooltip : {
//contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
}
}
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
//$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
var c3ChartDefaults = (<any>$()).c3ChartDefaults();
This worked for me.
I created a highchart element on my page. Then I wanted to rewrite it as a highstock element. I had some errors with highstock and I could`t get rid of them. Finally i copy-pasted highstock code from documentation but it also gives an error.
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>avra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="font/font-awesome/css/font-awesome.min.css">
<!-- HTML5 SHIV -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<![endif]-->
</head>
<body>
<main>
POP-UP
</main>
<div class="container">
</div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/highcharts/highstock.js"></script>
<!--<script type="text/javascript" src="node_modules/highcharts/modules/exporting.js"></script>-->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
My JS file:
$(document).ready(function(){
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var dataObject = {
rangeSelector: {
selected: 1,
inputEnabled: $('#container').width() > 480
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}],
chart: {
renderTo: 'container'
}
};
var chart = new Highcharts.StockChart(dataObject);
//var chart = $('#container').highcharts('StockChart', dataObject);
});
});
Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
You would like to try this:
var chartingOptions = {
chart: {
renderTo: 'Container_ID', //**Observation**
defaultSeriesType: 'column'
},
chart = new Highcharts.Chart(chartingOptions)
}
How can I execute a joint.js program? I have downloaded the required js files and have saved the below below code in an HTML file. I tried opening in IE and Chrome, but it resulted in a blank page instead:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
You have to take care of the version of the decencies, check the versions in below image, or else use the below CDN.
<link rel="stylesheet" href="joint.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
Clone jointjs project from https://github.com/clientIO/joint.git. And Go to demo folder, open any html file in browser.
I think that will help you to start work with jointjs.
dependencies are
jquery.js
backbone.js
joint.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/paper.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/joint.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
I have jtable working in debug mode from visual Studio using iisExpress, but when i publish it and install it on IIS it doesn't work any more.
the jtable doesn't even show when in IIS
Can anyone give me an help on this?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Filtering.aspx.cs" Inherits="jTableWithAspNetWebForms.Filtering" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Filtering With jTable and ASP.NET Web Forms</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/metroblue/jquery-ui.css" rel="stylesheet"
type="text/css" />
<!-- jTable style file -->
<link href="/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet"
type="text/css" />
<script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"> </script>
<script src="/Scripts/jtablesite.js" type="text/javascript"></script>
<!-- A helper library for JSON serialization -->
<script type="text/javascript" src="/Scripts/jtable/external/json2.js"> </script>
<!-- Core jTable script file -->
<script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js"></script>
<!-- ASP.NET Web Forms extension for jTable -->
<script type="text/javascript" src="/Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>
<style>
div.filtering
{
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
}
</style>
</head>
<body>
<div class="site-container">
<div class="filtering">
<form runat="server">
<label>
Name:
<input type="text" name="name" id="name" /></label>
<label>
City:
<asp:DropDownList ID="ddlCities" runat="server">
</asp:DropDownList>
</label>
<button type="submit" id="LoadRecordsButton">
Load records</button>
</form>
</div>
<div id="StudentTableContainer">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//Prepare jtable plugin
$('#StudentTableContainer').jtable({
title: 'The Student List',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Name ASC',
actions: {
listAction: '/Filtering.aspx/StudentListByFilter',
createAction: '/Filtering.aspx/CreateStudent',
updateAction: '/Filtering.aspx/UpdateStudent',
deleteAction: '/Filtering.aspx/DeleteStudent'
},
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
}
RecordDate: {
title: 'Record date',
width: '15%',
type: 'date',
displayFormat: 'dd.mm.yy',
create: false,
edit: false,
sorting: false //This column is not sortable!
}
}
});
//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
e.preventDefault();
$('#StudentTableContainer').jtable('load', {
name: $('#name').val(),
cityId: $('#<% = ddlCities.ClientID %>').val()
});
});
//Load all records when page is first shown
$('#LoadRecordsButton').click();
});
</script>
</body>
</html>
I have tried plotting on highchart, the code works okay on jsfiddle but fails when I test it locally.
I'm using flask, jinja2 and twitter-bootstrap in my code. The data for the highcharts is supplied as json dumps (marked safe) by jinja2.
I cannot figure out my the chart is not appearing on my browser.
I'm testing the code on firefox, so it's not a IE issue.
I'm also fetching jquery before highcharts.js so the import order is okay.
code:
`
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="/static/bootstrap3/js/jquery-1.js"></script>
<script src="/static/bootstrap3/js/bootstrap.js"></script>
<script src="/static/bootstrap3/js/docs.js"></script>
<script src="/static/js/Chart.js"></script>
<link rel="shortcut icon" href="/static/"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css"/>
<!-- custom styles -->
<link rel="stylesheet" href="/static/css/dashboard.css"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css" id="holderjs-style"></style>
<title>
Weekly Reports
</title>
</head>
<div id="percentiles" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#percentiles').highcharts({
title:{
text: 'Gas Usage Weekly Percentiles',
x: -20 //center
},
xAxis:{
categories : ["week 4", "week 5", "week 6", "week 7"]
},
yAxis: {
title: {
text: 'Percentiles'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '25th',
data: [0.69499999999999995, 0.01, 1.5350000000000001, 2.0175000000000001]
},{
name: '50th',
data: [3.2349999999999999, 1.6349999999999998, 3.25, 3.2599999999999998]
},{
name: '75th',
data: [4.4925000000000006, 4.4625000000000004, 4.9300000000000006, 4.2575000000000003]
}]
});
});
</script>
</html>`