How to create buffer styles in openlayers3 - openlayers-3

I am creating buffer style in openlayers3.but not getting styles.can anybody help?
what wrong in this code.I am not getting any error.But styles are not adding to feature. I am not getting error in this code.when i click for second time i am getting error like NS_ERROR_FAILURE: in (ol.js)..
function getbuffer(code, bufferdistance) {
var bufferdistance = ($("#DropDownList1").val()) * 1000;
$.ajax({
type: "POST",
url: "--.asmx/buffer",
data: "{'code':'" + code + "','bufferdistance':'" + bufferdistance + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess
});
function OnSuccess(data, status) {
var myObject = JSON.parse(data.d);
var value = $('#ddlvalue option:selected').val();
$.ajax({
type: "POST",
url: "--.asmx/Getxy",
data: "{'-code':'" + value + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, status) {
var ObjectIDs = [];
var obj = JSON.parse(data.d);
for (var i = 0; i < obj.length; i++) {
ObjectIDs.push(myObject[i].x);
ObjectIDs.push(myObject[i].y);
}
var x = ObjectIDs[0].toString();
var y = ObjectIDs[1].toString();
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
var bufferfeature = new ol.Feature(pointgeom);
var bufferstyle = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
width: 5,
color: 'blue'
}),
radius: bufferdistance
}),
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
bufferfeature.setStyle(bufferstyle);
vectorSource.addFeature(bufferfeature);
}
});
}
}

Related

export a div containing arabic text and highcharts divs

i am working on a php page that includes an export button to export the a div containing Arabic text labels and divs and highcharts divs, my issue is that jspdf can't export Arabic characters and using html2canvas didn't export the highcharts divs
function saveaspdf(){
html2canvas(document.getElementById(\"chart-container\"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var imgWidth = 295;
var pageHeight = 210;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('l', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');
heightLeft -= pageHeight;
}
doc.save('file.pdf');
}
});
}
the result of this code is a pdf file with no highchart and arabic characters are not showing properly
To create a pdf with Highcharts chart with additional content (using jspdf) you can follow these steps:
send AJAX to Highcharts server with chart options.
The return will be an URL to the image on the server.
convert the chart image from Highcharts server into a base64 format. (You can
use these approaches: https://stackoverflow.com/a/20285053/10077925)
Add chart image and your additional content to pdf using jspdf library and save
the result.
Example:
$(function() {
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
var chartOptions = {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
};
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#cmd').click(function() {
var obj = {
options: JSON.stringify(chartOptions),
type: 'image/png',
async: true
},
exportUrl = 'https://export.highcharts.com/',
imgContainer = $("#container"),
doc = new jsPDF(),
chartsLen = 1,
imgUrl;
var calls = [];
for (var i = 0; i < chartsLen; i++) {
calls.push({
type: 'post',
url: exportUrl,
data: obj,
});
}
$.when(
$.ajax(calls[0])
).done(function(c1) {
imgUrl = exportUrl + c1;
toDataURL(imgUrl)
.then(dataUrl => {
doc.setFontSize(30);
doc.text(35, 25, 'Your text here...');
doc.addImage(dataUrl, 'PNG', 15, 40);
doc.save('sample-file.pdf');
})
});
});
var chart1 = Highcharts.chart('container', chartOptions);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="cmd">generate PDF</button>
Demo:
https://jsfiddle.net/BlackLabel/r58m6h4z/

Highchart multiseries issue for passing string using spring and jsp

My problem is I have one string which has all the data in json right format but when I am giving this string in Highchart series oprtion it is not coming properly.
below is the scrip which is written in jsp:
<script>
var blocksdata = '["(0-6)", "(6-12)" , "(12-24)", "(24-48)", "(48-72)", ">72"]';
var i;
function chartData (reportDataString) {
$('#TATChart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'TAT Data'
},
xAxis: {
type: 'category',
categories: JSON.parse(blocksdata),
labels: {
rotation: -90,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of candidates verified'
}
},
legend: {
enabled: true
},
series: reportDataString
});
};
var processed_json1 = new Array();
var url ='${pageContext.servletContext.contextPath}';
$.ajax({ url: url+'/bgvservice/getChart',
type: "GET",
dataType: 'json',
success: function (data) {
var names = [];
var values = [];
for(i=0;i<data.finalData.length;i++){
names.push(data.finalData[i].key);
values.push(data.finalData[i].value);
}
var reportdata;
var reportDataString;
for(var i=0;i<names.length;i++) {
reportdata = "{name: \""+names[i]+"\",data: "+values[i]+",dataLabels: {enabled: true,rotation: 0,color: '#FFFFFF',align: 'center',x: 4,y: 10,style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif',textShadow: '0 0 3px black'}}}";
if(reportDataString!=undefined){
reportDataString = reportDataString+','+reportdata;
}
else
reportDataString = reportdata;
}
alert('outside'+reportDataString);
chartData(reportDataString);
}
});
</script>
But chart is not displaying on page.
I not able to find the issue.

OpenLayers3 GeoJSON parsing wrong argument?

after drawing features to OpenLayers map (map overlay) I want to parse features to be able to send it.
Problem is that when I call getArray() it works and without getArray it doesn't. Shouldn't parse.writeFeatures get as paramater featureOverlay.getFeatures() and not featureOverlay.getFeatures().getArray()?
$.FooBarNS.featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
$.FooBarNS.featureOverlay.setMap(map);
$('#save_polygon').click( function(){
var parser = new ol.format.GeoJSON();
//features = $.FooBarNS.features;
var features = $.FooBarNS.featureOverlay.getFeatures().getArray();
console.log(features);
var featuresGeoJSON = parser.writeFeatures(features, {'dataProjection':'EPSG:4326','featureProjection':'EPSG:3857'});
console.log(featuresGeoJSON);
$.ajax({
type: 'POST',
url: 'http://gis.FooBar.com/testpolygon/',
dataType: 'json',
//contentType: 'application/json;charset=utf-8',
data: featuresGeoJSON
}).then(function(response) {
//console.log(response);
});
});
Check the API docs: http://openlayers.org/en/v3.5.0/apidoc/ol.format.GeoJSON.html#writeFeatures
writeFeatures takes an Array of ol.Feature so that's what you need to pass in.

Hi I am trying to push the run time values that i am getting from the odata services through ajax calls to the highcharts

Following is the code that I have developed:
<body>
<div id="container"></div>
</body>
$(function(){
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: [],
labels: {
y: 20,
rotation: -45,
align: 'right'
}
},
series: []
};
var oDataUrlEntity = serviceUrl;
$.ajax({
type: "GET",
dataType: "json",
url: oDataUrlEntity,
username: "xxxx",
password: "xxxx",
async: false,
cache: false,
timeout: 5000,
error: function(jqXHR, textStatus, errorThrown) {
debugger;
},
success: function(data, textStatus, jqXHR) {
debugger;
data_poRequest = {
rootNode: []
};
for (var i = 0; i < data.d.results.length; i++) {
var obj = data.d.results[i];
data_poRequest.rootNode.push({
key1: obj.fieldName1,
key2: obj.fieldName2
});
}
for (var i = 0; i < data_poRequest.rootNode.length; i++) {
debugger;
options.xAxis.categories.push(data_poRequest.rootNode[i]['fieldName']);
series = {
data: []
};
series.data.push(data_poRequest.rootNode[0]);
options.series.push(series);
//
}
debugger;
chart = new Highcharts.Chart(options);
}
});
});
The problem is now on the highcharts I am getting only one value out of the 24 values in the cateogies array.Also only the legend is coming with 24 series.
Also,in the debugger i can see values inside options.xAxis.categories & also inside series.data,But they are not getting reflected on the Highcharts.
Could anyone help me with this.Thanks in advance.
The problem is that you are creating every time new series. Won't you have instead one series?
So change:
for (var i = 0; i < data_poRequest.rootNode.length; i++) {
debugger;
options.xAxis.categories.push(data_poRequest.rootNode[i]['fieldName']);
series = {
data: []
};
series.data.push(data_poRequest.rootNode[0]);
options.series.push(series);
//
}
To:
series = {
data: []
};
for (var i = 0; i < data_poRequest.rootNode.length; i++) {
options.xAxis.categories.push(data_poRequest.rootNode[i]['fieldName']);
series.data.push(data_poRequest.rootNode[0]);
}
options.series.push(series);

Post Data to the action result when Dropdown list change in ASP.NET MVC using jqgrid

I have Created JqGrid for loading some records like below.
<script type="text/javascript">
$(document).ready(function () {
$('#jqgRequests').jqGrid({
defaults: {
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No Request Found",
loadtext: "Loading...",
pgtext: "Page {0} of {1}"
},
//url from wich data should be requested
url: '#Url.Action("LoadRequest")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Is Approved','Requestor', 'Request Type', 'Request Date', 'Approved Date', 'Package','Comments','RequestID', '','',''],
//columns model
colModel: [
{ name: 'IsApproved',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if (status == 1) {
return '<input type="checkbox" name="approval" checked disabled="disabled">';
}
else if(status==2) {
return '<img src="#Url.Content("~/Content/images/reject.jpg")"></img>';
}
else{
return '<input type="checkbox" name="approval" disabled="disabled" >';
}
},sortable:false, align: 'center', width: 80, index: 'subColumn'
},
{ name: 'Requestor', index: 'Requestor', width: 170, align: 'left' },
{ name: 'Request Type', index: 'RequestType', width: 90, align: 'left' },
{ name: 'RequestDate', index: 'RequestDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'ApprovedDate', index: 'ApprovedDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'Package', index: 'Package', width: 150, align: 'left' },
{ name: 'Comments', index: 'Comments', width: 300, align: 'left' },
{ name: 'RequestID', index: 'RequestID', width: 1, align: 'left',hidden:true },
{ name: 'Approve',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==1)
{
return '#Html.ActionLink("Approve", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already approved');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Approve", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return ConfirmPopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Approve", "Approve", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to approve this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 45
},
{ name: 'Reject',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==2)
{
return '#Html.ActionLink("Reject", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already rejected');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Reject", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return Rejectpopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Reject", "Reject", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to reject this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 60
},
{ name: 'More',
formatter: function (cellvalue, options, rowObject) {
// var x = "<a class='btnMore' onclick='GetDetail('myId');' style = 'color:blue;font-weight:bold;' href='#'>More Detail</a>"
var x='#Html.ActionLink("Detail", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return GetDetail('myId');", href = "#" })';
return x.replace("myId",rowObject[7]);
},sortable:false, align: 'left', width: 80
}
],
//pager for grid
pager: $('#jqgpRequests'),
//number of rows per page
rowNum: 25,
//initial sorting column
sortname: 'RequestID',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
});
</script>
Action Result
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request)
{
int totalRecords = _dashboardRepository.RequestCount;
var response = new JqGridResponse()
{
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
PageIndex = request.PageIndex,
TotalRecordsCount = totalRecords
};
const string subColumn = "";
foreach (var dashboard in _dashboardRepository.LoadAllRequests(request.SortingName, request.SortingOrder.ToString(), request.PageIndex, request.RecordsCount))
{
response.Records.Add(new JqGridRecord(dashboard.RequestID.ToString(), new List<object>()
{
dashboard.IsApproved,
dashboard.Requestor,
dashboard.RequestType,
dashboard.RequestDate,
dashboard.ApprovedDate,
dashboard.Package,
dashboard.Comments,
dashboard.RequestID
}));
}
return new JqGridJsonResult { Data = response };
}
This jqGrid load when the page load. Also i have added a dropdown list for filtering. For this i need to post some parameters for the JqGridRequest class . How can i possible this?
Assuming that your dropdown id is ddlFilter you can write the JavaScript change event handler like this:
$('#ddlFilter').on('change', function(e) {
$('#jqgRequests').setGridParam({ postData: { FilterValue: $(this).val(); } }).trigger('reloadGrid', [{ page: 1 }]);
});
On server side you can create following view model for handling the post data:
public class PostDataViewModel
{
public string FilterValue { get; set; }
}
And add it as one more parameter to your action:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request, PostDataViewModel postData)
{
...
}
Unless there is some specifc requirement or edge case you haven't describe in your question this should do the trick.
If I understand you correct you can follow the suggestion from the old answer.
If you have for example <select id="mySelect">...</select> on the page you can use jqGrid option
postData: {
myFilter: function () {
return $("#mySelect option:selected").val();
}
}
to send the value of the select box together with other standard jqGrid parameters (see JqGridRequest). If you want additionally to reload the grid after every changes of the select you can use .trigger("reloadGrid"). You need just set change and keyup event handler and calls .trigger("reloadGrid") it it require. See the answer for more code example.

Resources