How to populate Pie Chart the correct way? [Powerbuilder] - powerbuilder

I want it to look like an ordinary pie chart but I don't know what I'm doing wrong, I've tried different ways but all of them generate a different problem.
So I got 2 faults here, the legends are all the same and the actual pie chart looks weird.
Here is my code, been searching for a while but can't seem to find the actual way to do it. I'm pretty sure that I'm just missing something super simple.
gr_pass_stats.Reset( All! )
//Populate Graph
int SNum
SNum = gr_pass_stats.AddSeries("Numeric")
gr_pass_stats.AddData(SNum, li_num, "Numeric") // Category is Numeric.
SNum = gr_pass_stats.AddSeries("Alphabetic")
gr_pass_stats.AddData(SNum, li_alph, "Alphabetic") // Category is Alphabetic.
SNum = gr_pass_stats.AddSeries("Combo")
gr_pass_stats.AddData(SNum, li_combo, "Combo") // Category is Combo.
SNum = gr_pass_stats.AddSeries("Wordlist")
gr_pass_stats.AddData(SNum, li_word, "Wordlist") // Category is Wordlist.
SNum = gr_pass_stats.AddSeries("Wordnum")
gr_pass_stats.AddData(SNum, li_word_num, "Wordnum") // Category is Wordnum.

Paste this in design page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'CHART',
width: 400,
height: 400,
bar: { groupWidth: "95%" },
legend: { position: "none" },
isStacked: true
};
$.ajax({
type: "POST",
url: "Chart.aspx/GetChartData", //Chart.aspx is the page name.
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
debugger;
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]); //***PieChart***
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 500px; height: 500px;"> //this is the div which shows the chart.
</div>
Paste this in your c# page.
using System.Web.Services;
[WebMethod]
public static List<object> GetChartData()
{
string query = "select Share,Value from Table";
string constr = ConfigurationManager.ConnectionStrings["dbcn"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"Share", "Value"
});
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["Share"], sdr["Value"]
});
}
}
con.Close();
return chartData;
}
}
}

Related

Is it possible to change the editoptions value of jqGrid's edittype:“select”?

I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That's why I am searching on how to change the editoptions:value of an edittype:"select".
Here's the sample jqGrid code:
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
Scenario:
All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.
How can I change the options?
I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
// get the selected stock column value before the editRow
var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
if( stockValue == 'Yes') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
} else if( stockValue == 'No') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
}
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}

Google Time-Date Chart Color display in android webview

Here i'm trying to set column color to "#FFFFFF00".
This color code working proper in Desktop or laptop browser.
But, while using same method trying to load chart in Android device using webview display message like '#FFFFFF00' is not valid hex color
Here is Android Device Screen
Here is Web browser screen
Here is the code what i'm using.
<html>
<body>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonObj = {"graphData":[{"label":"Data1","startTime":1533875458929,"endTime":1533882249978},{"label":"Data1","startTime":1533883034531,"endTime":1533884571783},{"label":"Data3","startTime":1533885078579,"endTime":1533885080601},{"label":"Data2","startTime":1533885080692,"endTime":1533885085560},{"label":"Data2","startTime":1533885288787,"endTime":1533885289822},{"label":"Data1","startTime":1533885291855,"endTime":1533885294676},{"label":"Data1","startTime":1533885299333,"endTime":1533886561000},{"label":"Data1","startTime":1533895149007,"endTime":1533906604650},{"label":"Data2","startTime":1533895309727,"endTime":1533895312451},{"label":"Data3","startTime":1533895309784,"endTime":1533895312367},{"label":"Data2","startTime":1533895797279,"endTime":1533895804452},{"label":"Data3","startTime":1533895797503,"endTime":1533895804848},{"label":"Data2","startTime":1533895807047,"endTime":1533895812201},{"label":"Data3","startTime":1533895807276,"endTime":1533895812003},{"label":"Data3","startTime":1533897706544,"endTime":1533897709518},{"label":"Data2","startTime":1533897706714,"endTime":1533897709651},{"label":"Data3","startTime":1533897711492,"endTime":1533897712438},{"label":"Data2","startTime":1533897711685,"endTime":1533897712545},{"label":"Data2","startTime":1533897732040,"endTime":1533897787031},{"label":"Data3","startTime":1533897732126,"endTime":1533897772174},{"label":"Data2","startTime":1533897788230,"endTime":1533897790235},{"label":"Data2","startTime":1533897848566,"endTime":1533897852356},{"label":"Data3","startTime":1533897848661,"endTime":1533897852427},{"label":"Data3","startTime":1533897977422,"endTime":1533897979531},{"label":"Data2","startTime":1533897977571,"endTime":1533897979731},{"label":"Data3","startTime":1533898561521,"endTime":1533898563708},{"label":"Data2","startTime":1533898561641,"endTime":1533898563783},{"label":"Data3","startTime":1533898565041,"endTime":1533898567063},{"label":"Data2","startTime":1533898565254,"endTime":1533898567174},{"label":"Data3","startTime":1533899674499,"endTime":1533899678492},{"label":"Data2","startTime":1533899674587,"endTime":1533899677559},{"label":"Data3","startTime":1533899786994,"endTime":1533899989725},{"label":"Data2","startTime":1533899787081,"endTime":1533899989806},{"label":"Light","startTime":1533899787081,"endTime":1533899989806}],"colorsData":{"Data3":"green","Data2":"green","Data1":"red","Light":"#FFFFFF00"}};
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Equipment'});
dataTable.addColumn({ type: 'date', id: 'Start'});
dataTable.addColumn({ type: 'date', id: 'End'});
var chartData = jsonObj.graphData;
var rowData = new Array(chartData.length);
var number = 0;
for (i in chartData) {
rowData[i] = [chartData[i].label,new Date(chartData[i].startTime),new Date(chartData[i].endTime)];
}
dataTable.addRows(rowData);
var colors = [];
var columns = [];
var colorMap = jsonObj.colorsData;
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
columns.push(dataTable.getValue(i, 0));
}
let unique = columns.filter((it, i, ar) => ar.indexOf(it) === i);
for (var i = 0; i < unique.length; i++) {
colors.push(colorMap[unique[i]]);
}
var options = {
height: 10,
timeline: {
groupByRowLabel: true,
colorByRowLabel: true
},
is3D:true,
colors: colors
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</body>

Binding ajax data to Bootgrid not showing result

I am facing issue on search functionality.I am searching data and while key in any value & debug gave me error on below line:
if (column.searchable && column.visible &&
column.converter.to(row[column.id]).search(searchPattern) > -1)
My implementation:
$(document).ready(function()
{
sendRESTQuery(asmx());
});
function asmx() {
var url = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;
var asmx = url + "/_vti_bin/listdata.svc/AD?$select=Column1,Column2,Column5,Column7,Column9"; //?$select=Column1,Column2,Column3,Column4
return asmx;
}
function testBtn() {
sendRESTQuery(asmx());
}
var baseUrl = asmx();
function sendRESTQuery(baseUrl) {
$.ajax({
contentType: 'application/json;odata=verbose',
url: baseUrl,
headers: {
'X-RequestDigest': $('#__REQUESTDIGEST').val(),
"Accept": "application/json; odata=verbose"
},
post: function () {alert('true')},
complete: function (result) {
var response = JSON.parse(result.responseText);
if (response.error) {
}
else {
bgDetails = response.d;
onSuccess(bgDetails.results);
}
}
});
}
function onSuccess(bgDetails) {
$("#grid-data").bootgrid().bootgrid("append", bgDetails);
$("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.js"></script>
<table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-keep-selection="true">
<thead>
<tr>
<th data-column-id="Column1" data-type="numeric" data-identifier="true" data-visible="false" >Employee ID</th>
<th data-column-id="Column2">Full Name</th>
<th data-column-id="Column5">Department</th>
<th data-column-id="Column7" >Work Phone</th>
<th data-column-id="Column9">Email</th>
</tr>
</thead>
</table>
This is a known bug in bootgrid when you work with append with a json containing null values for a searchable column.
You must make sure you don't have null values in any of your searchable column's rows. One way of doing this:
function onSuccess(bgDetails) {
// iterate every row, and every property with null, and set an empty string...
for (var i = 0; i < array.length; i++) {
var row = array[i];
for (var prop in row) {
if (row.hasOwnProperty(prop) && row[prop] === null) {
row[prop] = "";
}
}
}
$("#grid-data").bootgrid().bootgrid("append", bgDetails);
$("#grid-data").bootgrid("sort", { Column2 : "asc"}).bootgrid("search", $('.search-field').val());
}
Another option would be to use their ajax instead of using append with something like this:
$("#grid-data").bootgrid({
ajax: true,
ajaxSettings: {
contentType: 'application/json;odata=verbose',
headers: {
'X-RequestDigest': $('#__REQUESTDIGEST').val(),
"Accept": "application/json; odata=verbose"
}
},
url: baseUrl
});
$("#grid-data").bootgrid("sort", { Column2 : "asc"})
.bootgrid("search", $('.search-field').val());
...but you might need to change the server api response to fit the json they expect, which is something like this (see in their examples):
{
"current": 1,
"rowCount": 10,
"rows": [
{
"id": 19,
"sender": "123#test.de",
"received": "2014-05-30T22:15:00"
},
{
"id": 14,
"sender": "123#test.de",
"received": "2014-05-30T20:15:00"
},
...
],
"total": 1123
}

Cordova + JQuery + IndexedDB how to make a simple .add() & .get()?

I am having a hard time wrapping my head around all the different syntax from all the examples I have seen. I have even tried modifying a working example, but the example does so many things at once that I don’t understand it all to be able to break it down.
Can someone please write out a simple copy/paste working example of how you create a db and then interact with it using IndexedDB? All I want is a input/button that will save a value to the db and then a second button that will print the value to the screen.
Here, I did up an example where you enter text in a textbox that is written to indexeddb on save. It then fetches that data from the db and places it in a tag.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="text" id="dataGoesHere" placeholder="item to be saved"/>
<button id="clickme">Save</button>
<div id="saved"></div>
</br>
<input type="text" id="loadData" placeholder="type item here" />
<button id="loadme">Load</button>
</br>
</br>
<input type="text" id="updateData" placeholder="loaded item to update" />
<button id="updateme">Update</button>
</body>
</html>
JS:
(function ($, window, document) {
myDb = function () {
var name = "test",
version = "1",
db,
testStoreName = "exampleStore",
testIndexName = "testIndexName",
addToTestIndex = false,
init = function () {
var deferred = $.Deferred(),
openRequest = indexedDB.open(name, version);
openRequest.onupgradeneeded = dbUpgrade;
openRequest.onsuccess = dbOpen;
openRequest.onerror = dbError;
return deferred.promise();
function dbUpgrade(evt) {
//here our db is at evt.target.result here we can adjust stores and indexes
var thisDb = evt.target.result, //the current db we are working with
newStore = thisDb.createObjectStore(testStoreName, {keyPath: "id", autoIncrement: true});
//Using indexes, you can target specific keys, this can be an array!
newStore.createIndex("testIndexKey", "testIndexKey", {unique : false});
newStore.createIndex("item", "item", {unique : false});
console.log("Doing an upgrade");
}
function dbOpen(evt) {
console.log("DB successfully opened");
db = evt.target.result;
deferred.resolve();
}
function dbError(error) {
console.log("DB Error");
console.log(error);
deferred.reject(error);
}
},
add = function(item) {
var itemToAdd = {"item" : item},
objStore,
request,
deferred = $.Deferred();
if (!addToTestIndex) {
addToTestIndex = !addToTestIndex;
itemToAdd.testIndexKey = "This is a test";
}
//first get the object store with the desired access
objStore = db.transaction([testStoreName], "readwrite").objectStore(testStoreName);
//next create the request to add it
request = objStore.add(itemToAdd);
request.onsuccess = function (evt) {
deferred.resolve(evt.target.result);
};
request.onerror = function (evt) {
deferred.reject(evt);
};
return deferred.promise();
},
get = function (index) {
//Since our store uses an int as a primary key, that is what we are getting
//The cool part is when you start using indexes...
var deferred = $.Deferred(),
store = db.transaction([testStoreName], "readonly").objectStore(testStoreName),
request = store.get(parseInt(index));
request.onsuccess = function (evt) {
deferred.resolve(evt.target.result);
};
request.onerror = function (evt) {
deferred.reject("DBError: could not get " + index + " from " + testStoreName);
};
return deferred.promise();
};
getItem = function (itemText) {
//Since our store uses an int as a primary key, that is what we are getting
//The cool part is when you start using indexes...
var deferred = $.Deferred(),
store = db.transaction([testStoreName], "readonly").objectStore(testStoreName),
testIndex = store.index("item"),
request = testIndex.getKey(itemText);
request.onsuccess = function (evt) {
deferred.resolve(evt.target.result);
};
request.onerror = function (evt) {
deferred.reject("DBError: could not get " + index + " from " + testStoreName);
};
return deferred.promise();
};
put = function (item) {
var deferred = $.Deferred(),
store = db.transaction([testStoreName], "readwrite").objectStore(testStoreName),
request = store.put(item);
request.onsuccess = function (evt) {
deferred.resolve(evt.target.result);
};
request.onerror = function (evt) {
deferred.reject("DBError: could not get " + index + " from " + testStoreName);
};
return deferred.promise();
}
indexedDB.deleteDatabase('test');
return {
init: init,
get: get,
getItem: getItem,
add: add,
put: put
};
}
var db = new myDb(),
itemToUpdate;
db.init().then(function () {
$("#clickme").click(function(evt) {
console.log("Adding new item to db");
db.add($("#dataGoesHere").val())
.then(function (res) {
return db.get(res);
})
.then(function (res) {
$('#saved').append('<p>'+res.item+'</p>');
});
});
$("#loadme").click(function(evt) {
db.getItem($("#loadData").val())
.then(function (res) {
console.log("Have our index:");
console.log(res);
return db.get(res);
})
.then(function (res) {
console.log("Fetched to populate update input:")
console.log(res);
itemToUpdate = res;
$('#updateData').val(itemToUpdate.item);
});
});
$("#updateme").click(function(evt) {
itemToUpdate.item = $('#updateData').val();
db.put(itemToUpdate)
.then(function(res) {
console.log("Item should be updated");
console.log(res);
})
});
})
})(jQuery, window, document);
Plunker you can play with: http://plnkr.co/edit/Zxh7KYGylyZNYGTVKsQl?p=preview
You really have to deal with the callbacks, that is the tricky part. I also try to outline indexes. You can use these to quickly to perform a reduce your dataset, and can have cursor's opened for, or be fetched from directly.
EDIT:
Alright, a lot of copy pasta code in there, but I updated the example. Begin by saving a value. Type the item to load, which will populate the update input. Change that input to update the value.
Again, the tricky part is wrapping your head around the fact that it is async, where something like localStorage is not. Using promises you can easily mimic the behavior of something like localStorage (as you reference in the comment thread,) but indexeddb also offers reductions over your dataset (among many other features.)

asp.net mvc2 actionlink with parameters similar to getelementbyid

My Action link is as follows:
<%: Ajax.ActionLink("linktext", "actionName", "controllerName", new {area="areaName",id = "abcd", productURLName = "choc"}, new AjaxOptions { UpdateTargetId = "SFS", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }, new { style = "color:#00FF00" })%>
I need to get the value of a control in runtime and pass it as parameter in place of "abcd".
In javascript I can do getelementbyId. Is there anything I can do in this case.
To get similar functionality I have also tried jquery ajax, but in that case the controller action is not even getting called, at least the action link works::
function SendInvite() {
var url = "areaName/controllerName/actionName/" + document.getElementById("BasicUserInfo").value + "?productURLName=choc";
$.post(url, function (data) {
if (data == '<%= Boolean.TrueString %>') {
$("#result").append("Invite Sent");
} else {
$("#result").append("Error, Please try later");
}
});
}
Thanks
Arnab
you have to write your jquery code at click event of the link. for example this is your link
<%:Html.ActionLink("linkText", "actionName", "controllerName", new {area="areaName",id = "abcd", productURLName = "choc"}, new {#class="myclass", style = "color:#00FF00" })%>
then u have to write jquery function that hooks the click event of this link. here i m using class selector
$(".myclass").live('click', function(){
var url = "areaName/controllerName/actionName/" + document.getElementById("BasicUserInfo").value + "?productURLName=choc";
$.post(url, function (data) {
if (data == '<%= Boolean.TrueString %>') {
$("#result").append("Invite Sent");
} else {
$("#result").append("Error, Please try later");
}
});
return false;
});
u can also get url in event handler using
var url = $(this).attr('href');
You may get rid of MicrosoftAjax and try like this:
<%= Html.ActionLink(
"linktext",
"actionName",
"controllerName",
new { area = "areaName", productURLName = "choc" },
new { style = "color:#00FF00", id = "myLink" }
) %>
and then:
$(function() {
$('#myLink').click(function() {
var id = $('#BasicUserInfo').val();
$.post(this.href, { id: id, productURLName: 'choc' }, function(result) {
$('#SFS').html(result);
});
return false;
});
});

Resources