I was trying to build an Oracle Apex 5.1 app with new mobile theme which has a collapsable dynamic content region.
Behind this region there's a pl/sql code that prints out a chart codelet into the HTML body which consists of a "host" div and a JS script block that generates the chart (AnyChart 7.14.4) into it.
Everything works fine on the first page visit but when I press a region button (in an another, static region) which submits the page via dynamic action, the chart's completely gone (although the div stays spanned to its original size).
Do you have any idea what's behind this symptom?
!UPDATE!
This JS function is generated by a page process (Pre-rendering/before regions):
function createChart() {
anychart.theme("darkEarth");
var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];
var seriesList = anychart.data.mapAsTable(dataSet);
var chart = anychart.line();
chart.crosshair().enabled(true).yLabel().enabled(false);
chart.crosshair().yStroke(null);
chart.tooltip().positionMode("point");
chart.yAxis().title("%");
var credits = chart.credits();
credits.enabled(false);
chart.animation(true);
chart.title().enabled(false);
chart.xAxis().labels().padding([5]);
var series_1 = chart.line(seriesList[0]);
series_1.name("HUF");
var series_2 = chart.line(seriesList[1]);
series_2.name("CZK");
var series_3 = chart.line(seriesList[2]);
series_3.name("PLN");
var series_4 = chart.line(seriesList[3]);
series_4.name("RON");
for (i = 0; i < chart.getSeriesCount(); i++)
{
chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);
}
chart.legend().enabled(true).fontSize(13);
chart.container("chartContainer");
chart.draw();
}
This is followed by a static region in position body2 with the following content:
<div id="chartContainer"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
createChart();
});
</script>
We are afraid that this issue goes beyond AnyChart area responsibility. Also, we've never met a similar problem. We would recommend you to forward this query to Oracle tech support.
I did a test page here: https://apex.oracle.com/pls/apex/f?p=145797:18
Login on: https://apex.oracle.com/pls/apex/f?p=4550
workspace: stackquestions
login: test
pwd: test
app: 145797
page: 18
In this page I have a process on "Pre-Rendering" > "Before Regions"
begin
htp.p(
'<script>
function createChart() {
anychart.theme("darkEarth");
var dataSet = [
["2006.10.17",212.82,22.58,3.10,2.79],
["2006.10.18",212.04,22.57,3.10,2.81],
["2006.10.19",208.46,22.40,3.06,2.78],
["2006.10.20",208.60,22.43,3.06,2.78],
["2006.10.23",210.47,22.56,3.08,2.81],
["2006.10.24",209.18,22.57,3.09,2.80],
["2006.10.25",208.00,22.50,3.08,2.78],
["2006.10.26",205.22,22.35,3.04,2.76],
["2006.10.27",204.89,22.26,3.04,2.76],
["2006.10.30",205.93,22.20,3.05,2.76],
["2006.10.31",204.41,22.00,3.03,2.75],
];
var seriesList = anychart.data.mapAsTable(dataSet);
var chart = anychart.line();
chart.crosshair().enabled(true).yLabel().enabled(false);
chart.crosshair().yStroke(null);
chart.tooltip().positionMode("point");
chart.yAxis().title("%");
var credits = chart.credits();
credits.enabled(false);
chart.animation(true);
chart.title().enabled(false);
chart.xAxis().labels().padding([5]);
var series_1 = chart.line(seriesList[0]);
series_1.name("HUF");
var series_2 = chart.line(seriesList[1]);
series_2.name("CZK");
var series_3 = chart.line(seriesList[2]);
series_3.name("PLN");
var series_4 = chart.line(seriesList[3]);
series_4.name("RON");
/*for (i = 0; i < chart.getSeriesCount(); i++)
{
chart.getSeriesAt(i).hoverMarkers().enabled(true).type("circle").size(4);
chart.getSeriesAt(i).tooltip().position("right").anchor("left").offsetX(5).offsetY(5);
}*/
chart.legend().enabled(true).fontSize(13);
chart.container("chartContainer");
chart.draw();
}</script>'
);
end
I put the files .js on "HTML Header"
And the HTML on the source of a region
Could you replicate your problem in this page?
Related
I am trying to create a button in google sheets that run a script every time it is triggered. The script should first create a new copy of the template and then using that google sheet replace all placeholder text in that presentation with data from sheets. I am not sure why the code is not working as of now.
// The following creates the UI button in sheets (This works)
function onOpen() {
let ui = SpreadsheetApp.getUi();
ui.createMenu('Create Report')
.addItem('Create Report', 'executeAll')
.addToUi();
}
function executeAll (){
var reportTemplate = DriveApp.getFileById('Presentation ID goes Here');
var copiedTemplate = reportTemplate.makeCopy('New Report', DriveApp.getFolderById("Folder ID Goes here"));
var skeleton = SlidesApp.openById(copiedTemplate.getId());
var slides = skeleton.getSlides();
return slide1();
function slide1 (){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('App Script Input Sheet');
var data = sheet.getRange('E1:F26').getValues;
var slide1 = slides[0];
var newslide1 = slide1.duplicate();
var shapes = (newslide1.getShapes());
shapes.forEach(function(shape){
shape.getText().replaceAllText('{{Date}}',data[2]);
shape.getText().replaceAllText('{{Title}}',data[3]);
shape.getText().replaceAllText('{{Value 1}}',data[4]);
shape.getText().replaceAllText('{{Value 2}}',data[5]);
//there are more to be replaced. will add once code works.
});
}
}
I am using the d3js collapsible tree grid to display the nodes and when I run the code in plunker I am getting a weird 400 bad request error.
I have replaced the code which fetches the json and hard coded the json directly like below:
var treeData ={"user_id":0,"name":"Root Node","children":[{"user_id":0,"name":"Flossie Hickman","children":[....]}]};
// Calculate total nodes, max label length
var totalNodes = 0;
var maxLabelLength = 0;
// variables for drag/drop
var selectedNode = null;
var draggingNode = null;
// panning variables
var panSpeed = 200;
var panBoundary = 20; // Within 20px from edges will pan when dragging.
// Misc. variables
var i = 0;
var duration = 750;
var root;
Link to Plunker
Can you please let me know where I am going wrong.
Your code doesn't show any error in the console, here is an image to proof:
Still, nothing will show up. The reason is simple: you are calling your script...
<script src="dndTree.js"></script>
...before the <body>, where you have this div:
<div id="tree-container"></div>
Which is the div used to create the svg:
var baseSvg = d3.select("#tree-container").append("svg")
So, this is the correct order:
<body>
<div id="tree-container"></div>
<script src="dndTree.js"></script>
</body>
As a good practice, reference your script at the bottom of the body.
Here is the working plunker (and I emphasise "working"): http://plnkr.co/edit/2aLPBuEXN9f6Tlwekdg5?p=preview
When I double click the node text editing is going some where, instead of the node. The below is the code and I don't know what is happening. I'm using AJAX to get the mxGraph XML from server side.
Edited source code as per comments
// Creates the div for the graph
mxEvent.disableContextMenu(container);
document.body.appendChild(container);
var xmlDocument = mxUtils.parseXml(xml);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
graph = new mxGraph(container);
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// Changes the default style for edges "in-place"
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
decoder.decode(node, graph.getModel());
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var parent = graph.getDefaultParent();
layout.execute(parent);
Adding following piece of code during initialization helped me
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
I'm attempting to create a word cloud that will be generated AFTER a user's input.
The majority of word cloud-related projects seem to link back to D3js (this repo in particular https://github.com/jasondavies/d3-cloud)
While I can get the word cloud to function using the following
<div id="chart"></div>
<script>
var text_string = "blah";
drawWordCloud(text_string);
function drawWordCloud(text_string){
var stopWords = ["blah blah blah"];
var word_count = {};
var words = ...
}
var svg_location = "#chart";
var width = $(document).width();
var height = $(document).height();
var fill = d3.scale.category20();
var word_entries = d3.entries(word_count);
var xScale = ...;
d3.layout.cloud().size([width, height])
....;
function draw(words) {
...
d3.layout.cloud().stop();
}
</script>
I'm still facing two issues with this:
It only seems to work if it's directly in my index.html doc, not in a separate .js sheet.
It only works if I include the <div id="chart"> in my HTML doc, which I don't want to do initially (additional HTML is added once a user enters an input and the JS runs though addHTML += '<div id="chart">...</div>', which is what I'd like to do with the wordcloud - for it to be generated (based on the user's input) and only show up after the user has input and clicked a button, like the rest of the document is.
I am trying to generate a view based on the current user's group name. Group Name I am gathering from the custom list.
My question is how to apply the gathered group name to 'Group Name' column as a view parameter.
The only solution I figured:
I have created a view with a parameter.
I have added an HTML Form Web Part into the same page and connected it to the list view (sending the value to the parameter via web part connection). Then with a window.onload function I gather the current user's group name and pass this value via Form Postback function. But since the Postback function triggers full page reload, it falls into the endless loop of form submission > page reload.
Another way I have tried is attaching a click event listener to the BY MY GROUPS tab and it works perfectly, but the only disadvantage is that the page reloads each time user clicks on this tab, which I would like to avoid.
So the solution that I need is a way to post the form without a page reload.
Another option suggested here is to use CSR (client side rendering), but that has its own problems:
This code does not work as it is supposed to. In the console it shows me correct items, but the view appears untouchable.
Even if it worked, the other column values are still viewable in the column filter, as in this screenshot:
So, it seems that CSR just hides items from the view (and they are still available). In other words its behavior is different from, for example, a CAML query.
Or am I getting it wrong and there's something wrong with my code?
Below you can find my CSR code:
<script type='text/javascript'>
(function() {
function listPreRender(renderCtx) {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
var currUserID = _spPageContextInfo.userId;
var cx = new SP.ClientContext('/sites/support');
var list = cx.get_web().get_lists().getByTitle('Group Members');
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
cx.load(items, 'Include(_x006e_x50,DepID)');
cx.executeQueryAsync(
function() {
var i = items.get_count();
while (i--) {
var item = items.getItemAtIndex(i);
var userID = item.get_item('_x006e_x50').get_lookupId();
var group = item.get_item('DepID').get_lookupValue();
if (currUserID === userID) {
var rows = renderCtx.ListData.Row;
var customView = [];
var i = rows.length;
while (i--) {
var show = rows[i]['Group_x0020_Name'] === group;
if (show) {
customView.push(rows[i]);
}
}
renderCtx.ListData.Row = customView;
renderCtx.ListData.LastRow = customView.length;
console.log(JSON.stringify(renderCtx.ListData.Row));
break;
}
}
},
function() {
alert('Something went wrong. Please contact developer')
}
);
});
}
function registerListRenderer() {
var context = {};
context.Templates = {};
context.OnPreRender = listPreRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();
</script>