When we create a primefaces chart then it shows number scale in decimal points. I want to show without decimal places like simple munbers.Is there a way?Thanks
Update:
While the workaround posted below still works I found a more proper solution to do this. Number scale can be formatted trough extender function:
<p:barChart value="#{testClazz.categoryModel}" legendPosition="ne"
widgetVar="barChartObj1" extender="ext1"/>
place the following function between the <head></head> tags on your page:
<script type="text/javascript">
function ext1() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%d'
};
}
</script>
After experimenting a bit with jqPlot I found out that if you reset the axes after the plotting has finished the decimals after the decimal point are cleared. If your barChart is definied like this:
<p:barChart id="basicPlot" value="#{testClazz.categoryModel}"
legendPosition="ne" widgetVar="barChartObj"
title="Basic Bar Chart" min="0" max="270"/>
call the following function after the page load is finished:
<script type="text/javascript">
$(document).ready( function() {
setTimeout(formatAxisNumbers, 500);
});
function formatAxisNumbers() {
window.barChartObj.plot.resetAxesScale();
window.barChartObj.plot.replot();
}
</script>
Note that instead of resetting both axes with resetAxesScale you can reset x or y separately by doing:
window.barChartObj.plot.axes.xaxis.resetScale();
or
window.barChartObj.plot.axes.yaxis.resetScale();
You can also expriment with decreasing the timeout to smaller numbers to achieve smoother replot.
For other options see the jqPlot documentation.
Tested in Google Chrome 22.0.1229.94 (Official Build 161065).
Related
I'm making a page builder type thing. For normal view the iframe needs to resize accordingly, but for mobile / tablet views it needs to be a set size.
using iframe-resizer https://github.com/davidjbradshaw/iframe-resizer by #david-bradshaw
parent window:
<script type="text/javascript" src="javascript/iframeResizer.min.js"></script>
....
$("iframe")[0].iFrameResize({
checkOrigin: false,
enablePublicMethods : true,
heightCalculationMethod: "bodyScroll",
});
....
The viewpoint size changer does this :
// set the iframes width and height "before" iframeresizer does stuff to make it look seemless
_this.editor.css({
"width":mapper[size].width,
"height":mapper[size].height
})
Only way I saw the .size() working is from the iframe itself
// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
_this.editor[0].iFrameResizer.sendMessage({
"width":mapper[size].width,
"height":mapper[size].height,
"forceSize":true
});
iframe window
<script>
var iFrameResizer = {
messageCallback: function(message){
console.log("messageCallback")
console.log(message)
if (message.forceSize==true){
console.log(window.parentIFrame)
window.parentIFrame.autoResize(false);
window.parentIFrame.size(message.height); // Set height to 100px
} else {
// apply auto resizing again
}
}
}
</script>
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script>
I was hoping for an easier way like on parent disableIframeResizer() or something, or being able to set .size() from parent since that's where the choose your viewpoint parts live.I can't seem to figure it out :(
My issue is: I need to somehow tell the iframe not to do its resizing when forceSize = true and then when the message comes in then to resize accordingly .
Thanks for a pretty decent library tho!
I don't think I understand your question 100%. But I tried to answer your question as best as I understood.
You can set an iframe's size really simply in html. You can also do it with the help of CSS.
You could do this: <iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>.
You could also set the exact diameter like this: <iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>
You could also use php to automatically change the diameter of it.
I'm using the drilldown pie chart to drill down into children of a node, etc. The problem is that at some point, the children do not contain any data. Is there a way to display a message or something similar inside the chart instead of a white area (because of no series data) that informs the user that there is no more data to display?
Very good question! Inside of your JSON configuration you can define the nodata attribute.
var myConfig = {
type: "bar",
noData:{
text:"Empty Series",
backgroundColor: "#20b2db"
},
series:[
{
values:[]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
You can even use background image like a loading screen. In the following example I'm displaying spongebob while I'm waiting for chart data to come in. So I initially render a chart with no series values and nodata defined. The image is displayed while the Ajax call happens asynchronously.
demo
I have a grid that contains thousands of records. That grid contains a check box column, and every time I tick the box, it posts back, causing it to reload and go through the delegate each and every time. This means that every time you tick a check box on this grid, you have to wait a couple seconds. This is a problem for users who want to select several records because, they have to wait a couple seconds between every click. I tried setting CommitChanges="False," and that didn't really help. Is this the native behavior of the PXCheckBox control? Is there any way to turn that off?
Below grid declaration of PXGrid I wrote the following:
</px:PXGrid>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function checkDOMChange() {
disableGridCheck();
setTimeout(checkDOMChange, 100);
}
$(function () {
checkDOMChange();
});
function disableGridCheck() {
$("[icon='GridUncheck']").on("click", function (elem) {
$(this).attr("check", "1");
$(this).attr("icon", "GridCheck");
$($(this).children()[0]).attr("class", "control-icon-img control-GridCheck");
return false;
});
$("[icon='GridCheck']").on("click", function (elem) {
$(this).attr("check", "0");
$(this).attr("icon", "GridUncheck");
$($(this).children()[0]).attr("class", "control-icon-img control-GridUncheck");
return false;
});
}
</script>
I had the same behaviour. In order to avoid it I had to write javascript which blocked postback.
Curious problem whilst embedding a Google Earth network link into Blogger.
The code I'm using is as shown below, but I'm getting two instances of GE on the same page, one above the other.
They must be getting generated seperately, as if I stick a border into the divs style on the page it only affects one instance.
<div id="map3d" style="border: 4px solid silver; height: 768px; width: 1024px;"></div>
However, if I remove this code from the page entirely. both instances vanish.
Other than that I've got it functioning as I'm wanting. (Eventually)
This is the code I've got in the head section
<!-- Earth -->
<script src="//www.google.com/jsapi?key=mykey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var href = 'http://urltomykmz';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView() !== null)
ge.getView().setAbstractView(kmlObject.getAbstractView());
});
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<!-- Earth -->
Grateful to anyone who can point to what's causing the second instance. Thanks.
You have to remove either the call to init() in your onload handler or the call to google.setOnLoadCallback(init), otherwise a map will be added every time you call the init function.
I would like to insert a dimple plot into a deck.js presentation. The code below online puts the plot in the body at the background. But I would like to have the plot displayed in the section class. I think I have to change something in var svg = dimple.newSvg("body", 800, 600). Because of my very limited javascript skills I have no idea what to change exactly. Any help would be very much appreciated.
<section class="slide" id="test-section">
<h2>test section</h2>
<script type="text/javascript">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
</script>
</section>
If only the included the specific section class code in my question. If needed the complete code can be found here. The index page in the is located in the introduction folder.
A couple things need fixing:
First, you can't put a script tag inside of another script tag. You should move the code that loads d3 and dimple to the head of the document:
...
<script src="../modernizr.custom.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
</head>
Second, as you suspected and John points out, something with dimple.newSvg is wrong. You probably want var svg = dimple.newSvg("#test-section", 800, 600); so the graph is only added to the test-selection slide, not all of the slides.
I would actually go one step farther and change the html a little bit so you can control precisely where the graph appears:
<h2>Graph Title</h2>
<div id = "graphHere"></div>
<h3>Some more text about the graph below the graph</h3>
To make the graph appear between the text, just change the selection passed to dimple to the id of the div we've created:
var svg = dimple.newSvg("#graphHere", 800, 600);
Finally, chart.js is doing some weird resizing the graph since it is too big to fit on the slide. Without digging through the source of chart.js, we can fix the problem by creating a smaller graph:
var svg = dimple.newSvg("#graphHere", 400, 200);
I like the look of deck.js so I just pulled it down and had a play. I then came back and found Adam had basically explained everything I just found out. You need to put a div within the slide and add the svg to that, otherwise the deck scaling code duplicates the chart.
First add a div to the relevant slide:
<section class="slide">
<div id="myChartDiv"></div>
</section>
Then add the references to the set at the bottom (or the header if you like):
<!-- Required JS files. -->
<script src="jquery-1.7.2.min.js"></script>
<script src="core/deck.core.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
then the dimple code below that:
<script type="text/javascript">
var svg = dimple.newSvg("#myChartDiv", 800, 600);
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
</script>
I hope that hopes
John
I've never used deck.js but have you tried:
var svg = dimple.newSvg(".slide", 800, 600);
or
var svg = dimple.newSvg("#test-section", 800, 600);
Let me know if that works. If not I'll take a look at your code.
I know that this thread is from a long time ago, but let me add one thing in addition to Adam's answer.
At least on dimple v2.1.2 + deck.js v1.1.0 + Firefox 34.0, the graph is corrupted in Adam's example.
It seems that the size of the div tag must be explicitly set:
<div id="graphHere" style="width:400px;height:300px;"></div>
...
<script>
var svg = dimple.newSvg("#graphHere", 400, 300);
// plotting function goes here
</script>