We Keep Coding

GWT Highcharts - Semi circle donut

I am using GWT Highcharts and want to create Semi circle donut (http://www.highcharts.com/demo/pie-semi-circle). This is done in javascript with plotOptions.pie.startAngle und plotOptions.pie.endAngle. There seems to be no method for that in GWT Highcharts. I then tried to set it manually with .setOption("/plotOptions/pie/endAngle", "90"), but this had no effect. Maybe this was not support in HighStock 1.2.4 (latest version that is supported by GWT Highcharts)?
My code looks like this:
final Chart chart = new Chart()
.setType(Series.Type.PIE)
.setChartTitleText("Browser market shares at a specific website, 2010")
.setPlotBackgroundColor((String) null)
.setPlotBorderWidth(null)
.setPlotShadow(false)
.setOption("/plotOptions/pie/startAngle", "-90")
.setOption("/plotOptions/pie/endAngle", "90")
.setPiePlotOptions(new PiePlotOptions()
.setAllowPointSelect(true)
.setCursor(PlotOptions.Cursor.POINTER)
.setPieDataLabels(new PieDataLabels()
.setConnectorColor("#000000")
.setEnabled(true)
.setColor("#000000")
.setFormatter(new DataLabelsFormatter() {
#Override
public String format(DataLabelsData dataLabelsData) {
return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %";
}
})
)
)
.setLegend(new Legend()
.setLayout(Legend.Layout.VERTICAL)
.setAlign(Legend.Align.RIGHT)
.setVerticalAlign(Legend.VerticalAlign.TOP)
.setX(-100)
.setY(100)
.setFloating(true)
.setBorderWidth(1)
.setBackgroundColor("#FFFFFF")
.setShadow(true)
)
.setToolTip(new ToolTip()
.setFormatter(new ToolTipFormatter() {
#Override
public String format(ToolTipData toolTipData) {
return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %";
}
})
);
The working javscript is looking like this:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares',
align: 'center',
verticalAlign: 'middle',
y: 50
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
{
name: 'Others',
y: 0.7,
dataLabels: {
enabled: false
}
}
]
}]
});
});
Is there any way to get this working with GWT Highcharts?

I think that may be problem with Highcharts version, according to docs - it's supported from 2.3.4. Well, there is no 2.3.4 version, there should be 2.3.5.
Highstock 1.2.4 is version released between Highcharts 2.3.3 and 2.3.5. Is there any chanse you can update Highstock to 1.2.5 ? In 1.2.5 it's supported for sure.

Change row color using Google spreadsheet API

I'd like to change the row color of a spreadsheet using the Google Spreadsheet API.
I'm using JAVA, I saw it working in JavaScript but I don't found it in JAVA.

Google Sheet API Documentation is not the best to say the least but after some fiddling here is python code that works:
http = credentials.authorize(httplib2.Http())
discovery_url = ('https://sheets.googleapis.com/$discovery/rest?'
'version=v4')
service = discovery.build('sheets', 'v4', http=http, discoveryServiceUrl=discovery_url, cache_discovery=False)
spreadsheet = service.spreadsheets().get(spreadsheetId=ss.id).execute()
requests = []
for sheet in spreadsheet.get('sheets'):
sheetId = sheet.get('properties').get('sheetId')
requests.append({
"updateCells": {
"rows": [
{
"values": [{
"userEnteredFormat": {
"backgroundColor": {
"red": 1,
"green": 0,
"blue": 0,
"alpha": 1
}}}
]
}
],
"fields": 'userEnteredFormat.backgroundColor',
"range": {
"sheetId": sheetId,
"startRowIndex": 0,
"endRowIndex": 1,
"startColumnIndex": 0,
"endColumnIndex": 1
}}})
body = {
'requests': requests
}
response = service.spreadsheets().batchUpdate(spreadsheetId=ss.id, body=body).execute()

With JavaScript API you could use this:
const range = {
sheetId: 250062959, // find your own
startRowIndex: 0,
endRowIndex: 1,
startColumnIndex: 0,
endColumnIndex: 1,
};
const request = {
spreadsheetId, // fill with your own
resource: {
requests: [
{
updateCells: {
range,
fields: '*',
rows: [
{
values: [
{
userEnteredValue: { stringValue: 'message' },
userEnteredFormat: {
backgroundColor: { red: 1, green: 0, blue: 0 },
},
},
],
},
],
},
},
],
},
};
try {
const result = await client.spreadsheets.batchUpdate(request);
console.log(result);
} catch (error) {
throw `update row error ${error}`;
}

I know this is a long time since you originally asked but according to the v4 API you could technically set a conditional format that is always true with spreadsheets.batchUpdate
eg. https://developers.google.com/sheets/api/samples/conditional-formatting
May not be the easiest thing to manage but is 'technically' possible

object = {
"updateCells": {
"range": {
"sheetId": sheetId,
"startRowIndex":startRowIndex,
"endRowIndex": endRowIndex,
"startColumnIndex": startColumnIndex,
"endColumnIndex": endColumnIndex
}
"rows": [{
"values": [{
"textFormatRuns": [
{"format": {
"foregroundColor": {
"red": 0.0,
"green": 255.0,
"blue": 31.0
},
},"startIndex": 0
},
]
}
]
}]
"fields": "textFormatRuns(format)"
}
 }

Set cell color:
https://developers.google.com/apps-script/reference/spreadsheet/range#setBackground(String)
google-apps-script (JavaScript) is the only option as far as I know. It can't be done with the spreadsheet-API (gdata)

Highcharts not displaying chart correctly/not reading array properly

I am reading in some information from a database and putting it in to an arraylist for highcharts to be able to read. The Arraylist is in the form of [String,int] and it represents a date/number of users. It looks like this
[[2014-06-25, 35], [2014-06-26, 48], [2014-06-27, 60], [2014-06-28, 14], [2014-06-29, 8], [2014-06-30, 26], [2014-07-01, 21], [2014-07-02, 32], [2014-07-03, 33], [2014-07-04, 17], [2014-07-05, 18], [2014-07-06, 14], [2014-07-07, 26], [2014-07-08, 18], [2014-07-09, 26], [2014-07-10, 21], [2014-07-11, 1]]
I got to feed that in to my highchart, which looks like this:
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Users',
x: -20 //center
},
subtitle: {
text: 'subtitle',
x: -20
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Number of users'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Users',
data: '<%=combined%>'
}]
});
But it comes out like this
I'm trying to do this in a jsp file, can highcharts read java ArrayLists?
Thanks

Change
xAxis: {
type: 'category',
to
xAxis: {
type: 'datetime',
One more thing - date format should be like this - [Date.UTC(2014,06,25), 35] - Run it as it is to get idea..
http://jsfiddle.net/8jwHV/4/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Users',
x: -20 //center
},
subtitle: {
text: 'subtitle',
x: -20
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Number of users'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Users',
data: [
[Date.UTC(2014,06,25), 35],
[Date.UTC(2014,06,26), 40],
[Date.UTC(2014,06,27), 41],
[Date.UTC(2014,06,28), 80],
]
}, ]
});
});

xAxis: {
type: 'datetime',
tickInterval: 50
}

Clicking a column header displays jqgrid in ascending order

Currently i am working in java jqgrid I want to display the sorted grid after clicking of a column header.I already used onsortcol.but it is not working .her is my code.onsort col function is in active but it doesnt performs sorting.thanks in advance
CODE:
jq(function() {
var base = "<%=request.getContextPath()%>";
var records = -1;
jq("#grid").jqGrid({
url:base+'/admin/adminusermanagecrud.htm',
datatype: 'json',
mtype: 'GET',
colNames:['', 'Name','Employee ID','User Name','Mobile','City','State','Is Active','Created Date','Role','Bank Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,hidden:true},
{name:'adminName',index:'adminName', width:175,editable:true,sortable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,readonly:false,disabled:false},search:false},
{name:'adminEmployeeId',index:'adminEmployeeId', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,readonly:true,disabled:false},search:true},
{name:'adminuserName',index:'adminuserName', width:175,editable:true, editrules:{edithidden:false,required:false}, editoptions:{size:25,readonly:false,disabled:false},search:true},
{name:'mobile',index:'mobile', width:175,editable:true, editrules:{edithidden:false,required:false}, editoptions:{size:25,disabled:false},search:true},
{name:'city',index:'city', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:true},
{name:'state',index:'state', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:true},
{width:165,formatter:linkFormat,editable:true,edittype:'select',editrules:{edithidden:true,required:false}, editoptions:{value:"0:Activate;1:De-Activate",size:25,disabled:false,multiple:false},search:false},
{name:'createDate',index:'createDate',width:185,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:false},
{name:'role',index:'role',width:175,editable:true,editrules:{edithidden:true,required:false},editoptions:{size:25,disabled:true},search:false},
{name:'bankName',index:'bankName',width:175,editable:true,editrules:{edithidden:true,required:false},editoptions:{size:25,disabled:true},search:false}
],
postData:{
},
loadError:function(xhr,status,error)
{
var base = "<%=request.getContextPath()%>";
alert(status);
if(xhr.status == '403' || xhr.status == '401' || status == 'parsererror')
{
window.location.href = base+"/login.htm";
}
},
rowNum:5,
//rowList:[5,10,15,20],
height: 150,
//width:750,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'adminName',
scrollrows:true,
viewrecords: true,
sortorder: "asc",
caption:"Admin Users Summary",
onSortCol: function (index, columnIndex, sortOrder) {
alert(index);
return 'stop';
},
cellEdit: false,
emptyrecords: "Search returned no results",
loadonce: false,
loadComplete: function()
{
},
jsonReader : {
root: function(obj)
{
if(obj.status == false)
{
window.location.href = base+"/login.htm";
}
else
{
records = obj.records;
return obj.rows;
}
},
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
editurl:base+"/admin/edit.htm"
});
jq("#grid").navGrid('#pager',
{edit:false,add:false,del:false,search:true,excel:true},
{ },
{ },
{ },
{
sopt:['eq','cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: false,
closeAfterSearch: true
}
);
jq("#btnFilter").click(function()
{
jq("#grid").jqGrid('searchGrid',
{
multipleSearch: false,
sopt:['eq']
}
);
});
});

Inside your controller you would need to handle the sorting. Something similar to
var pagedQuery = filteredQuery.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
where you actually sort your dataset and return it to jqGrid.

How to traverse a JSON file?

The JSON I have is mentioned below :-
{ head: {
link: [],
vars: [
"CompanyName",
"Company_Name",
"Foundation_URI",
"Foundation_Name",
"Latitude",
"Longitude"
] }, results: {
distinct: false,
ordered: true,
bindings: [
{
CompanyName: {
type: "uri",
value: "http://dbpedia.org/resource/United_Christian_Broadcasters"
},
Company_Name: {
type: "literal",
xml:lang: "en",
value: "United Christian Broadcasters"
},
Foundation_URI: {
type: "uri",
value: "http://dbpedia.org/resource/Christchurch"
},
Foundation_Name: {
type: "literal",
xml:lang: "en",
value: "Christchurch"
},
Latitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "-43.52999877929688"
},
Longitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "172.6202850341797"
}
},
{
CompanyName: {
type: "uri",
value: "http://dbpedia.org/resource/United_Christian_Broadcasters"
},
Company_Name: {
type: "literal",
xml:lang: "en",
value: "UCB Media"
},
Foundation_URI: {
type: "uri",
value: "http://dbpedia.org/resource/Christchurch"
},
Foundation_Name: {
type: "literal",
xml:lang: "en",
value: "Christchurch"
},
Latitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "-43.52999877929688"
},
Longitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "172.6202850341797"
}
},
{
CompanyName: {
type: "uri",
value: "http://dbpedia.org/resource/Kathmandu_%28company%29"
},
Company_Name: {
type: "literal",
xml:lang: "en",
value: "Kathmandu"
},
Foundation_URI: {
type: "uri",
value: "http://dbpedia.org/resource/Christchurch"
},
Foundation_Name: {
type: "literal",
xml:lang: "en",
value: "Christchurch"
},
Latitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "-43.52999877929688"
},
Longitude: {
type: "typed-literal",
datatype: "http://www.w3.org/2001/XMLSchema#float",
value: "172.6202850341797"
}
}
] } }
I want to know that how can I traverse this JSON to get the values of the appropriate variables as mentioned in the JSON file. I would like to know this with respect to JavaScript as well as Java. Please let me know how to traverse this JSON so as to get data easily.

This is not a JSON string but luckily a YAML standrd format.
You can use YAML library to transverse your jSON-like string

Here is a rather simple tree traversal routine:
function traverse(o) {
if( o instanceof Object ) {
for( key in o ) {
traverse(o[key]);
}
}
else if( o instanceof Array ) {
for( value in o ) {
traverse(value);
}
}
else {
console.log(o);
}
}
var q = { name : 'me', data : [ { a: 'a1', b: 'b1' }, { a: 'a2', b: 'b2'} ] };
traverse(q);
However, I think this is not quite what you're looking for. Please clarify and I will update my answer accordingly.

Following is a simple traversing of JSON object, this should help you undersatnd your JSON object normal traversing. Check the https://github.com/substack/js-traverse link for a detailed tutorial for complex traversing of any javascript object
<script language="javascript">
var emp = {"details" : [
{
"Name" : "Nitin1",
"Salary" : 10000,
"DOJ" : "16th Sept 2010"
}
,
{"Name" : "Abhijit2",
"Salary" : 5000,
"DOJ" : "15th Sept 2010"}
,
{"Name" : "Nilesh",
"Salary" : 50000,
"DOJ" : "10th Sept 2010"}
]
};
document.writeln("<table border='1'><tr><td>Name</td><td>Salary</td><td>DOJ</td></tr>");
var i=0;
for(i=0;i<emp.details.length; i++)
{
document.writeln("<tr><td>" + emp.details[i].Name + "</td>");
document.writeln("<td>" + emp.details[i].Salary +"</td>");
document.writeln("<td>" + emp.details[i].DOJ +"</td></tr>");
}
document.writeln("</table>");
</script>

If you only want to retrieve particular values - you do not need to traverse the entire JSON file.
This can be done in Javascript as follows:
Declared JSON variable:
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
Fetch a particular value:
myJSONObject.bindings[0].method // "newURI"
For a full reference you can go here.
I do not use Java myself, but XML.java (documentation available here) allows you to convert the JSON into XML. Parsing an XML is easy - you will find plenty of tutorials on it for Java such as:
http://www.seas.gwu.edu/~simhaweb/java/xml/xml.html
Cheers!