I am trying to do simple operations with dojo datagrid before I move on to complicated ones. However, I am now stuck at saving to store. I am using the code in the browser and the players data in a .json file, for convenience, I put all in the source code for now.
When I refresh the browser, the data I just saved is not updated to the json file. Why is it so? And how do I fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.dojoxGrid table { margin: 0; }
html, body { width: 100%; height: 100%; margin: 0; }
</style>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// our test data store for this example:
var store = new dojo.data.ItemFileWriteStore({
//url: 'players.json'
data: {
label: 'pId',
items: [{"Player":"Wayne Gretzky","Games":"1487","Points":"2857","PPG":"1.92"},
{"Player":"Mark Messier","Games":"1756","Points":"1887","PPG":"1.07"},
{"Player":"Gordie Howe","Games":"1767","Points":"1850","PPG":"1.04"},
{"Player":"Ron Francies","Games":"1731","Points":"1798","PPG":"1.03"},
{"Player":"Marcel Dionne","Games":"1348","Points":"1771","PPG":"1.31"},
{"Player":"Steve Yzerman","Games":"1514","Points":"1755","PPG":"1.16"},
{"Player":"Mario Lemieux","Games":"915","Points":"1723","PPG":"1.88"},
{"Player":"Joe Sakic","Games":"1378","Points":"1641","PPG":"1.19"},
{"Player":"Jaromir Jagr","Games":"1273","Points":"1599","PPG":"1.25"},
{"Player":"Phil Esposito","Games":"1282","Points":"1590","PPG":"1.24"}]}
});
// set the layout structure:
var layout = [{
field: 'Player',
name: 'Player',
width: '200px',
styles:"text-align:center;"
},
{
field: 'Games',
name: 'Games Played',
width: '50px',
styles:"text-align:center;"
},
{
field: 'Points',
name: 'Points',
width: '50px',
styles:"text-align:center;"
},
{
field: 'PPG',
name: 'Points Per Game',
width: '50px',
styles:"text-align:center;"
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
Player: '*'
},
store: store,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
// append the new grid to the div "gridContainer":
dojo.byId("gridContainer").appendChild(grid.domNode);
// Call startup, in order to render the grid:
grid.startup();
//dojo.forEach(grid.structure, function(itemData, index, list){
//itemData.editable = true;
//});
var btnAdd = new dijit.form.Button({
label: "Add",
onClick: function(){
grid.store.newItem({
Player: "Someone",
Games: "1000",
Points: "1000",
PPG: "1.0"
});
}
}, "btnAdd");
var btnRemove = new dijit.form.Button({
label: "Remove",
onClick: function(){
var items = grid.selection.getSelected();
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
grid.store.deleteItem(selectedItem);
}
});
}
}
}, "btnRemove");
var btnSave = new dijit.form.Button({
label: "Save",
onClick: function(){
grid.store.save({onComplete: saveDone, onError: saveFailed});
}
}, "btnSave");
});
function saveDone(){
alert("Done saving.");
}
function saveFailed(){
alert("Save failed.");
}
</script>
</head>
<body class=" tundra">
<button id="btnAdd" type="button"></button>
<button id="btnRemove" type="button"></button>
<button id="btnSave" type="button"></button>
<br />
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
</body>
</html>
The source code is also here: http://jsfiddle.net/cDCWk/
You need to implement something server side to handle the .save() part of dojo.data.ItemFileWriteStore as explained here.
I have modified your source code, in order for it to be a bit easier to deal with: http://jsfiddle.net/kitsonk/cDCWk/1/
Also, personally, implementing something server-side for ItemFileWriteStore might be a bit silly when you can far more easily integrate the Grid with the dojox.data.JsonRestStore or the new dojo.store.JsonRest.
Related
I am using Jitsi-Meet iframe Api to have a custom video calling feature. It is working as expected. However I would like to add a feature to this. The feature is to auto-join or auto-start the meeting on http load. How do I do this instead of the user manually pressing the join button?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://meet.jit.si/external_api.js'></script>
<script>
$(document).ready(function () {
var domain = "meet.jit.si";
var options = {
roomName: "TestingMeet",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
},
interfaceConfigOverwrite: {
DEFAULT_BACKGROUND: "#3b98ff",
noSsl: true,
SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_POWERED_BY: false,
TOOLBAR_BUTTONS: [
'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
'fodeviceselection', 'hangup', 'profile', 'recording',
'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
'videoquality', 'filmstrip', 'feedback', 'stats', 'shortcuts',
'tileview'
],
}
}
var api = new JitsiMeetExternalAPI(domain, options);
api.executeCommands({
displayName: ['nickname'],
toggleVideo: [],
toggleAudio: []
});
});
</script>
<style>
.title {
text-align: center;
font-family: "Segoe UI";
font-size: 48px;
}
</style>
</head>
<body>
<div id="meet"></div>
</body>
</html>
I got it, there is an option called as configOverwrite; and you have to add this inside:
var options = {
roomName: "RoomName",
width: "100%",
height: 1080,
parentNode: document.querySelector("#meet"),
configOverwrite: {
prejoinPageEnabled: false //This here
},
...
...
Another way, just pass #config.prejoinPageEnabled=false, in the url and done.
Now you should pass:
configOverwrite: {
prejoinConfig: {
enabled: false
}
}
When I try to create a BarChart in js view tab, it gives me this error.
Here is my html code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="Styles/MainPage.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("empcrud");
//sap.ui.localResources("Styles");
var app = new sap.m.App("AppId", { initialPage: "idEMainPage1" });
var page = sap.ui.view({ id: "idEmpDetails1", viewName: "empcrud.EmpDetails", type: sap.ui.core.mvc.ViewType.JS });
var page1 = sap.ui.view({ id: "idEMainPage1", viewName: "empcrud.MainPage", type: sap.ui.core.mvc.ViewType.JS });
var page2 = sap.ui.view({ id: "idGrafPage1", viewName: "empcrud.Grafik", type: sap.ui.core.mvc.ViewType.JS });
app.addPage(page).addPage(page1).addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
And here is my view code where I use sap.viz.ui5
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [
{
axis: 1,
name: 'Uname',
value: "{Uname}"
}
],
measures: [
{
name: 'Modno',
value: '{Modno}'
},
],
data: {
path: "/results"
}
});
var oBarChart = new sap.viz.ui5.Bar({
width: "80%",
height: "400px",
plotArea: {
//'colorPalette' : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Modno Grafiği'
},
dataset: oDataset
});
When I try to paste my view code in html script its works fine, also with xml view it works. I think its about the connection between js view and html. However view can not see sap.viz.Is there a way to define sap.viz in js or how can I overcome that?
Thanks.
The problem is about sapui lib, just add online core library and just works fine.
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
I have code for a simple bar chart using c3.js:
<!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>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data/output.csv'
type: 'bar'
}
});
</script>
</body>
</html>
The file output.csv looks like this:
A,B,C,D
25,50,75,100
And the graph ends up looking like this:
which is all of the data in one group.
What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example:
<!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>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
which would give a graph that looks like this:
Here is a jFiddle link.
My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series.
C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like.
Instead parse the csv outside the chart using D3's parseRows function. Then prepend a row descriptor which C3 can use to know which bit of the file does what.
https://jsfiddle.net/bm57gye5/2/
// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>
// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
columns: data,
x: "Letter",
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so:
d3.text("data/output.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...
}
I am trying to generate a simple line chart using HighChart. The source code is given below. The challenge is that I am getting my X-Axis and Y-Axis on the screen but the chart itself is missing. When I move the cursor across the screen, I can see the X and Y values displayed on the screen. I have tried to debug the program but I am not able to find a solution. Can someone guide me?
Regards
Sachin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Pollution Level'
},
xAxis: {
categories: [''],
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Pollution %'
}
},
series: []
};
$.get('data/graphs/pollution.csv', function(data) {
window.alert(data);
// Split the lines
var lines = data.split('\n');
window.alert(lines);
lines = lines.map(function(line) {
var data = line.split(',');
data[1] = parseFloat(data[1]);
return data;
});
window.alert(lines);
var series = {
data: lines
};
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body >
<div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
</body>
</html>
Update 1-Mar-2016
I have modified the program as follows. I am still not able to get a line chart. The funny thing is that if I change the type of chart from 'line' to 'column' I can see a chart. Not sure of the problem. Please advise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Pollution Level'
},
xAxis: {
categories: [''],
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Pollution %'
}
},
series: [ {
plotLines: [{
color: '#000000'
}],
data: []
}]
};
$.get('data/graphs/pollution.csv', function(data) {
window.alert(data);
// Split the lines
var lines = data.split('\n');
window.alert(lines);
var series = {
data: [],
name: 'serie1'
};
lines = lines.map(function(line) {
var data = line.split(',');
if (data[0] != "DATE"){
options.xAxis.categories.push(data[0]);
data1 = parseFloat(data[1]);
series.data.push(parseFloat(data[1]));
return data;
}
});
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body >
<div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
<?php
?>
</body>
</html>
Be sure you are fetching valid values instead of a string:
Please, check this section:
lines = lines.map(function(line) {
var data = line.split(',');
data[1] = parseFloat(data[1]);
return data;
});
Q: Could you share your CSV (pollution.csv)?
Thanks for your data: please check the following example
The parsing section is:
for (i = 0; i < lines.length; i++) {
var items = lines[i].split(',');
if (i == 0) {
ctg[0] = items[0];
ctg[1] = items[1];
} else {
dataYAxis.push([(new Date(items[0])).getTime(), parseFloat(items[1])]);
}
}
As you can see, I isolated the titles (DATE, LVL) from the data, the next step is to save data in dataYAxis array: date first and data second. I am using 'datetime' in xAxis to show date in xAxis' labels.
I'm using Kendo UI 2013.2.716 and JQuery 2.0.3 and I am placing a grid on my page, and my question is:
Does anyone know how to tell what has been destroyed by the destroy command from the grid?
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
alert("OK, so something got destroyed, but what??");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>
I found the requestEnd callback in the documentation but I am totally flummoxed as to know where the item that was destroyed would be. I just need the ID of the item really so that I can update other parts of my page appropriately.
I am wondering if I need to capture it somehow beforehand.
You need to configure the transport object on your datasource. In your current configuration, does anything really get destroyed? Sure, the item may disappear from your grid, but I wonder if it's still there in the datasource. Maybe that's what you intended.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.destroy
If you're just looking for a way to get at the data that's being destroyed, hook into the parameterMap() function of the transport object. In there you can manipulate the object being deleted before the operation is executed.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
Thanks to #Brett for pointing out the destroy property on the transport. This code does the trick - allowing me to capture what was being destroyed (see the transport.destroy part):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
}
}
},
transport: {
read: function (options) {
var products = [];
for(var i = 1; i <= 40; i++) {
products.push({
ProductId: i,
ProductName: "Product " + i
});
}
options.success(products);
},
destroy: function (options) {
var data = $("#grid")
.data("kendoGrid").dataSource.data();
var products = [];
for(var i = 0; i < data.length; i++) {
if (data[i].ProductId !== options.data.ProductId) {
products.push(data[i])
}
}
options.success(products);
alert("Woo hoo - the product with the ID: "
+ options.data.ProductId + " was destroyed!");
}
}
},
editable: "inline",
columns: [
"ProductName",
{ command: "destroy", title: " ", width: "100px" }
]
});
});
</script>
</body>
</html>