Create chart in a new Tab using Angular Js - javascript

I have a function that creates a chart in a new tab. I have done this in javascript. How should this be converted into AngularJs.
function OpenWin() {
var w = window.open();
w.document.open();
w.document.write('<div id="container" style="width:100%; height:400px;"></div>');
w.document.write('<select id="type" onchange="ChartFunc(this.value)"><option value="line">line</option><option value="column">column</option> <option value="area">area</option><option value="bar">bar</option></select>');
var scriptHead = w.document.createElement("SCRIPT");
var scriptHead1 = w.document.createElement("SCRIPT");
var link = "http://code.highcharts.com/highcharts.js";
var link1 = "http://code.highcharts.com/modules/exporting.js";
scriptHead.onload = function() {
var script = w.document.createElement("SCRIPT");
w.document.body.appendChild(script);
var js = w.document.createTextNode('var a = localStorage.getItem("ImportOptions"); var jsona = JSON.parse(a); var chart = new Highcharts.Chart(jsona);function ChartFunc(value){ console.log(value); jsona.chart.type = value;var chart = new Highcharts.Chart(jsona); }');
script.appendChild(js);
w.document.close();
scriptHead1.src = link1;
w.document.head.appendChild(scriptHead1);
}
scriptHead.src = link;
w.document.head.appendChild(scriptHead);
}

Related

Get value from the people picker and add it to a list in a person column

I have a simple JS form on my SP16 site where I added this standard people picker:
$(document).ready(function() {
initializePeoplePicker('pickerUAT');
function initializePeoplePicker(peoplePickerElementId) {
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = false;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '269px';
this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}
});
I am able to get the selected value (as a display name, email, whatever) from the picker like this:
function getEmailFromPeoplePicker(title) {
var ppDiv = $("div[title='" + title + "']")[0];
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.pickerUAT_TopSpan;
var userList = peoplePicker.GetAllUserInfo();
var userInfo = userList[0];
var addThisUser;
if(userInfo != null)
{
addThisUser = userInfo.Key;
}
return addThisUser;
}
And I have a list to which I can add other values taken from other form fields, usually through document.getElementById("XXX").value and this piece of code:
function addSubUser(addThisValue) {
var clientContext = new SP.ClientContext(siteurl);
var itemCreateInfo = new SP.ListItemCreationInformation();
var valueToAdd = addThisValue;
var list = clientContext.get_web()
.get_lists()
.getByTitle("UAT");
this.oListItem = list.addItem(itemCreateInfo);
oListItem.set_item('userUAT', valueToAdd);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
However, this code doesn't work for the value taken from the people picker. Console.log(typeof addThisUser) tells me the value I get from the picker is just a string, do I assume correctly that I cannot simply add a string to a person/group column? In any event, how can I make it work?

I think You may try to update the filed using two different methods
as lookup giving ID of user
var LookupSingle = new SP.FieldLookupValue();
LookupSingle.set_lookupId(2); // UserId
oListItem.set_item('SomeLookupColumn', LookupSingle);
as Single User Field
var singleUser = SP.FieldUserValue.fromUser('name surname');
oListItem.set_item('SomeSingleUserColumn', singleUser);

Sample test script in my local SharePoint 2016(multiple user field).
CustomPeoplePicker:
<div id="peoplePickerDiv"></div>
<input id="Button1" onclick="SaveItem()" type="button" value="button" />
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/1033/strings.js"></script>
<script src="/_layouts/15/clienttemplates.js"></script>
<script src="/_layouts/15/clientforms.js"></script>
<script src="/_layouts/15/clientpeoplepicker.js"></script>
<script src="/_layouts/15/autofill.js"></script>
<script src="_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
})
function sharePointReady() {
context = new SP.ClientContext.get_current();
web = context.get_web();
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = true;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';
this.SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', null, schema);
}
function SaveItem() {
var ctx = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle("MyList");
var listCreationInformation = new SP.ListItemCreationInformation();
var listItem = list.addItem(listCreationInformation);
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
// Get information about all users.
var users = peoplePicker.GetAllUserInfo();
// Get user keys.
var keys = peoplePicker.GetAllUserKeys();
var finalusers = new Array();
for (var i = 0; i < users.length; i++) {
var arryuser = users[i];
finalusers.push(SP.FieldUserValue.fromUser(arryuser.Key));
}
listItem.set_item("Title", "Title");
listItem.set_item("Requestor", finalusers);
listItem.update();
ctx.load(listItem);
ctx.executeQueryAsync(
Function.createDelegate(this, function () {
console.log(listItem);
}),
Function.createDelegate(this, function (sender, args) {
alert('Query failed. Error: ' + args.get_message());
})
);
}
</script>

How to set 'ColumnWidth' using ActiveXObject("Excel.Application")?

I'm using ActiveXObject("Excel.Application") to export html table to Exel in IE Explorer,here is my code:
var curTbl = document.getElementById(tableId);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.execCommand("Copy");
xlsheet.Paste();
var fname = oXL.Application.GetSaveAsFilename(name+".xls", "Excel Spreadsheets (*.xls), *.xls");
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
I searched this and get this.
xlsheet.ActiveSheet.Columns(startcol+":"+endcol).ColumnWidth = 22;
But it didn't work and 'ActiveSheet' is undifined.Help ,thank you.

Finally,i find an answer.Use
xlsheet.columns.AutoFit();
or
var myRange = xlsheet.Range(xlsheet.Cells(2, 1), xlsheet.Cells(2, 7));
myRange.Columns.AutoFit();
myRange.Rows.AutoFit();

Retrieve Fields/Column Names of a Sharepoint List using Javascript

<script type="text/javascript">
function retrieveFieldsOfListView(){
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('pranav_list');
var view = list.get_views().getByTitle('Main');
this.listFields = view.get_viewFields();
clientContext.load(this.listFields);
clientContext.executeQueryAsync(Function.createDelegate(this,
this.onListFieldsQuerySucceeded9), Function.createDelegate(this,
this.onListFieldsQueryFailed));
}
function onListFieldsQuerySucceeded9() {
var fieldsinfo='';
var fieldEnumerator = listFields.getEnumerator();
while (fieldEnumerator.moveNext()) {
var oField = fieldEnumerator.get_current();
var fType = oField.get_fieldTypeKind();
fieldsinfo +='\n '+oField.get_title();
}
alert(fieldsinfo);
}
</script>
I want to show the fields of the view using javascript.
Note: My list name is "pranav_list" and view is "Main".
Help..!

SP.View.viewFields property returns field names but not a Field client object collection.
The following example demonstrates how to print field names from a View:
function retrieveFieldsOfListView(listTitle,viewName){
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(listTitle);
var view = list.get_views().getByTitle(viewName);
var viewFields = view.get_viewFields();
context.load(viewFields);
context.executeQueryAsync(printFieldNames,onError);
function printFieldNames() {
var e = viewFields.getEnumerator();
while (e.moveNext()) {
var fieldName = e.get_current();
console.log(fieldName);
}
}
function onError(sender,args)
{
console.log(args.get_message());
}
}

Open layers label not working

I've been trying to get the openlayers label feature to work and produced the following example:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
</script>
</body>
</html>
The code works but the label on the polygons displays as Label:${Label} rather than interpreting the variable to read Label: First label etc.
When this is integrated into a larger application the first label is not interpreted correctly but the second is. I suspect that it may be a layer initialisation problem but have no idea how to get over this.
Any help would be appreciated!!

Have you tried to add attributes as object after declaring the feature for example:
FEA.attributes = {
label:locname
}
It worked this way see, the changes below:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label:locname
}
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label: locname
}
veclayer.addFeatures([FEA]);
</script>
</body>
</html>

Chrome not displaying the image drawn on the canvas

I am trying to display some objects drawn on the canvas.
It works fine in the firefox but in chrome the image is drawn under the canvas.
In my case the there is an image on the top of canvas on which I am trying to draw some shapes.
Please help.
<SCRIPT>
var oImageBuffer = document.createElement('img');
$(document).ready(function() {
document.getElementById("semiAutoAdjustments").style.visibility = "hidden";
checkProgress();
setCanvas("ImageResultsCanvas");
CanvasUtils.ImageBuffer = oImageBuffer;
CanvasUtils.URLPrefix = "${ctx}/project/image?id=";
CanvasUtils.LongAxis = 440;
CanvasUtils.ShortAxis = 330;
populateRecipes();
changeCanvasImage("${selectedImageID}");
InstantiateProcessedImage();
setProcessedImage(m_oProcessedImage);
RepaintCanvas();
});
function InstantiateProcessedImage()
{
<c:if test="${not empty selectedProcessImage.toogleProcessedImage}">
var l_lImageId = "${selectedProcessImage.toogleProcessedImage.imageId}";
var imageName = "${selectedProcessImage.toogleProcessedImage.imageName}";
var i=0;var d=0;
m_oProcessedImage = new ProcessedImage();
m_oProcessedImage.ImageID = l_lImageId;
var l_aJSMeasurements = new Array();
<c:forEach var="measItem" varStatus="status" items="${selectedProcessImage.toogleProcessedImage.measurements}">
var l_oMeasurement = new Measurement();
l_oMeasurement.Name = "${measItem.name}";
l_oMeasurement.Value = ${measItem.value};
l_oMeasurement.DefiningPoints = new Array();
<c:forEach var="definingPointsItem" varStatus="cnt" items="${measItem.definingPoints}">
l_oMeasurement.DefiningPoints[${cnt.index}] = new Pixel();
l_oMeasurement.DefiningPoints[${cnt.index}].x = ${definingPointsItem.x};
l_oMeasurement.DefiningPoints[${cnt.index}].y = ${definingPointsItem.y};
</c:forEach>
l_aJSMeasurements.push(l_oMeasurement);
</c:forEach>
m_oProcessedImage.Measurements = l_aJSMeasurements;
var l_aJSMeasurementBoxes = new Array();
<c:forEach var="measBoxItem" varStatus="meanBoxCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes}">
var l_oMeasuredImageBox = new MeasuredImageBox();
l_oMeasuredImageBox.Region = new Box();
l_oMeasuredImageBox.Region.UL = new Pixel();
l_oMeasuredImageBox.Region.LR = new Pixel();
l_oMeasuredImageBox.Region.UL.x = ${measBoxItem.region.ul.x};
l_oMeasuredImageBox.Region.UL.y = ${measBoxItem.region.ul.y};
l_oMeasuredImageBox.Region.LR.x = ${measBoxItem.region.lr.x};
l_oMeasuredImageBox.Region.LR.y = ${measBoxItem.region.lr.y};
l_oMeasuredImageBox.LayerBottoms = ${measBoxItem.layerBottoms};
l_oMeasuredImageBox.Measurements = new Array();
<c:forEach var="measFromMeasBoxItem" varStatus="measFromMeasBoxItemCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes[meanBoxCnt.index].measurements}">
var l_oMeasurement = new Measurement();
l_oMeasurement.Name = "${measFromMeasBoxItem.name}";
l_oMeasurement.Value = ${measFromMeasBoxItem.value};
l_oMeasurement.DefiningPoints = new Array();
<c:forEach var="measDefPtsFromMeasBoxItem" varStatus="measDefPtsFromMeasBoxItemCnt" items="${measFromMeasBoxItem.definingPoints}">
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}] = new Pixel();
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].x = ${measDefPtsFromMeasBoxItem.x};
l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].y = ${measDefPtsFromMeasBoxItem.y};
</c:forEach>
l_oMeasuredImageBox.Measurements.push(l_oMeasurement);
</c:forEach>
l_aJSMeasurementBoxes.push(l_oMeasuredImageBox);
</c:forEach>
m_oProcessedImage.MeasuredBoxes = l_aJSMeasurementBoxes;
</c:if>
}
function ProcessedImageFromDTO(p_oProcessImageDTO) {
var l_oProcessedImage = new ProcessedImage();
l_oProcessedImage.MeasuredBoxes = new Array();
for (var iBox=0; iBox<p_oProcessImageDTO.measurementList.length; ++iBox) {
}
return l_oProcessedImage;
}
function getResults4Image(obj)
{
//alert(obj.id);
var imageId = obj.id;
//get selected recipe name
var l_iSelectedRecipeIndex = document.getElementById("RecipeNameOptionsCB").selectedIndex
var recipeName = document.getElementById("RecipeNameOptionsCB").children[l_iSelectedRecipeIndex].text;
//refresh the page.
getResults(imageId, recipeName);
}
function getResults(imageId, recipeName)
{
window.location.href = "${ctx}/viewer/processedImageResults?recipeName=" + recipeName + "&imageId=" + imageId;
}
</SCRIPT>

Categories

Resources