I have a problem trying to resize the legend of a graph in PRIMEFACES CHART I tried using the this.cfg.legend configuration with the fontSize property but I can not change the size of the letters.
I'm using a outputscript and in managedbean I'm calling it with setExtender. The version of PRIMEFACES that I am using is 5.3.
Image of help:
enter image description here
OutputScript code:
< h:outputScript >
function chartExtender1()
{
this.cfg.grid
= {
background: '#BBDEFB',
gridLineColor: '#FFFFFF',
borderColor: '#999999',
borderWidth: 5.0,
shadow: false,
};
this.cfg.legend
= {
show : false,
show : true,
border : 'none',
location : 's',
fontSize: '10px',
fontFamily: ["Lucida Grande","Lucida Sans Unicode","Arial","Verdana","sans-serif"],
placement : 'outsideGrid',
renderer : $.jqplot.EnhancedLegendRenderer,
rendererOptions :
{
numberRows : 4,
numberColumns : 4,
seriesToggle : true,
disableIEFading : true
}
};
}
< /h:outputScript >
ManagedBean code:
LineadateModel.setLegendPosition("ne");
LineadateModel.setExtender("chartExtender");
LineadateModel.setSeriesColors("1565C0, FF6F00, FFEA00, 558B2F, 651FFF");
LineadateModel.getAxis(AxisType.Y).setLabel("Usados");
LineadateModel.getAxis(AxisType.Y).setTickCount(3);
LineadateModel.getAxis(AxisType.Y).setMax(MaximoValorY );
DateAxis axis = new DateAxis("Hora");
axis.setTickAngle(-50);
axis.setMax(horamax);
axis.setTickFormat("%H:%#M");
axis.setTickCount(20);
LineadateModel.getAxes().put(AxisType.X, axis);
Create the chart:
< p:chart class="fondo" type="line" model="#{PrincipalPosicion1.lineaDateModel}" responsive="true"/>
I checked but it did not work:
How to change colors in Primefaces chart?
How to change Bar Charts Legend position in PrimeFaces?
Thanks for the help
Related
I have a label that associated with a billboard/marker in cesium that I want to 'update' over time. I tried using a setTimeout to increment a variable 'count' that I assign as the label to a marker... but it doesn't increment. Is there something special I need to be doing or am missing?
You should be able to update a label just by changing its text property.
entity.label.text = 'new text';
Here's a full example:
var viewer = new Cesium.Viewer('cesiumContainer');
var image = new Image();
var entity;
image.onload = function() {
entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
billboard : {
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
scaleByDistance : new Cesium.NearFarScalar(1.5e2, 5.0, 1.5e7, 0.5),
image : image
},
label : {
text : 'Label on top of scaling billboard',
font : '20px sans-serif',
showBackground : true,
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
pixelOffset : new Cesium.Cartesian2(0.0, -image.height),
pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
}
});
viewer.zoomTo(viewer.entities);
};
image.src = '../images/facility.gif';
var counter = 0;
viewer.scene.postUpdate.addEventListener(function(){
if(!Cesium.defined(entity)) {
return;
}
counter += 0.04;
if(Math.cos(counter) > 0){
entity.label.text = "On";
} else {
entity.label.text = "Off";
}
});
And a live version on Sandcastle.
I would like to have a trailing orange path behind movement of my billboard entity. I am pro grammatically controlling its movement (it is coming from a live remote sensor). The the actual SVG/Canvas for the symbol comes from: https://github.com/spatialillusions/milsymbol
But the point is that I am clearly making an error in how to setup the PATH attribute of the entity. I don't see a trailing or leading path. What am I doing wrong?
makeGlyph(sprite) {
let milSym = milSymbols[sprite.type]
if (milSym === undefined) milSym = milSymbols["UFO"]
sprite.mps = 0
sprite.symbol = milSym
let sym2 = new ms.Symbol(milSym, { size: 26, type: sprite.marking, speed: sprite.mps + ' mps', direction: sprite.heading, infoColor: "red" })
let glyph = new Cesium.Entity({
name: sprite.marking,
id: sprite.id,
position: Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude),
billboard: {
image: sym2.asCanvas(), //Get the canvas for the billboard
// heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
pixelOffset: new Cesium.Cartesian2(-sym2.markerAnchor.x, -sym2.markerAnchor.y), // Symbol offset
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default
verticalOrigin: Cesium.VerticalOrigin.TOP
},
path: {
leadTime: 100,
trailTime: 100,
width: 1,
material: new Cesium.ColorMaterialProperty({
color : Cesium.Color.ORANGE,
})
},
label: {
text: sprite.marking,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 1,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -20)
}
})
sprite.glyph = glyph
this.infoBox(sprite)
this.viewer.entities.add(glyph)
}
updateGlyph(sprite) {
this.viewer.entities.suspendEvents()
let loc = Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude)
sprite.mps = sprite.speed[0] + sprite.speed[1] + sprite.speed[2]
sprite.glyph.position = loc;
this.infoBox(sprite)
this.viewer.entities.resumeEvents()
}
PrimeFaces: 6.0.0
I would like to display line chart. In that chart,
X-Axis should display Sce_1, Sce_2.... etc.,
Y-Axis should display Time in HH:MM:SS format
Currently, I could display values in both x-Axis, but the chart is not displayed.
Chart :
enter image description here
Following is my code:
In Xhtml file:
<p:chart id="gp2" type="line" model="#{student.areaModel}" extender="ext2" style="height:400px;width:800px" />
Java Script:
Note: I have imported jqplot-1.4.20.jar in my project
<script type="text/javascript" src="/org/wicketstuff/jqplot/behavior/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
function ext2() {
//this = chart widget instance
//this.cfg = options
this.cfg.axes = {
xaxis : {
rendererOptions : {
tickRenderer : $.jqplot.CanvasAxisTickRenderer
},
tickOptions : {
fontSize : '10pt',
fontFamily : 'Tahoma',
angle : 30
}
},
yaxis : {
min : null,
max : null,
autoscale : true,
numberTicks : null,
pad : 1.0,
tickInterval : '1 days',
renderer : $.jqplot.DateAxisRenderer,
rendererOptions : {
tickInset : 0
},
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
tickOptions : {
fontSize : '10pt',
fontFamily : 'Tahoma',
angle : -40
}
}
};
this.cfg.highlighter = {
show : true,
tooltipOffset : 2
}
};
//]]>
</script>
In Backingbean file,
public void graph_04()
{
if(areaModel != null)
{
areaModel.clear();
}
areaModel = new LineChartModel();
DateAxis Yaxis = new DateAxis("Time");
Yaxis.setMin("00:00:00");
Yaxis.setMax("00:59:59");
Yaxis.setTickFormat("%H:%#M:%S");
areaModel.getAxes().put(AxisType.Y, Yaxis);
Axis xAxis = new CategoryAxis("Sce Name");
areaModel.getAxes().put(AxisType.X, xAxis);
xAxis.setTickAngle(-30);
areaModel.setStacked(true);
areaModel.setShowPointLabels(true);
LineChartSeries ch = new LineChartSeries();
ch.setLabel("List");
ch.set("Sce_1", new Time(00,10,10).getTime());
ch.set("Sce_2", new Time(00,20,10).getTime());
ch.set("Sce_3", new Time(00,30,12).getTime());
ch.set("Sce_4", new Time(00,40,18).getTime());
ch.set("Sce_5", new Time(00,50,56).getTime());
ch.set("Sce_6", new Time(00,22,30).getTime());
ch.set("Sce_7", new Time(00,18,40).getTime());
areaModel.addSeries(ch);
}
Why chart value is not displaying in chart?
I am new to CesiumJs and I want to add 12 floors to a building. I have created the building using polygon.
Here is the code I have used to create the polygon
var viewer = new Cesium.Viewer('cesiumContainer');
var wyoming = viewer.entities.add({
name : 'My location',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([cordinates of location]),
material : Cesium.Color.WHITE.withAlpha(0.5),
outline : true,
fill : true,
outlineColor : Cesium.Color.BLACK,
}
});
wyoming.polygon.extrudedHeight = 50;
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-79.38443,43.64843, 144.00),
orientation : {
heading : Cesium.Math.toRadians(121.00),
pitch : Cesium.Math.toRadians(60.00 - 90.0),
roll : 0.0
},
duration : 4.0, // in seconds
complete : function() {
},
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : {
text : 'My another location',
font : '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(0, -9)
}
});
Thanks in advance
In this case you will need something more complex than extruded polygon.
If you need a simple building with floors of alternating color you can construct it from Wall entity with stripe material and putting a polygon on top of it as a "roof" (use same coordinates, put height property to the height of the wall, and not set extrudedHeight).
This will create wall with alternating black and white floors:
function createBuildingWalls(coordinates, floors)
{
var floorHeight = 4;
var height = floors * floorHeight;
var low = Array.apply(null, Array(coordinates.length/2)).map(function() { return 0 });
var high = Array.apply(null, Array(coordinates.length/2)).map(function() { return height });
var buildingWalls = new Cesium.Entity({
name : 'Wall',
wall : {
positions : Cesium.Cartesian3.fromDegreesArray(coordinates),
maximumHeights : high,
minimumHeights : low,
material : new Cesium.StripeMaterialProperty({
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : 20
})
}});
return buildingWalls;
}
And this roof (might run into an issue with very large polygons, but should be fine for buildings):
function createBuildingRoof(coordinates, floors)
{
var floorHeight = 4;
var buildingHeight = floors * floorHeight;
var buildingRoof = new Cesium.Entity({
name : 'My location',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray(coordinates),
material : Cesium.Color.RED.withAlpha(0.9),
outline : true,
height : buildingHeight,
fill : true,
outlineColor : Cesium.Color.BLACK,
}
});
return buildingRoof;
}
You can also use a texture (image) as a material and apply it to the wall, but it is more complex. You would need to set ImageMaterial property and according propably set repeat property depending on the type of your texture (ie repeat a single floor verticaly, or single 12 floor stripe horizontaly or some other combination)
http://cesiumjs.org/Cesium/Build/Documentation/ImageMaterialProperty.html
Other solution would be to use 3D models of the buildings:
http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/
How can I add color in Charts.newTableChart for google scrip?
function doGet() {
var app = UiApp.createApplication();
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Name")
.addColumn(Charts.ColumnType.STRING, "Gender")
.addRow(["Michael", "Male", 12, 5])
.addRow(["Michael", "Male", 12, 5])
.build();
var tableChart = Charts.newTableChart().setDataTable(data).build();
app.add(tableChart);
return app;
}
You can Add color on your ChartTable
for example :
builder.setOption('title', 'Earnings projections');
builder.setOption('animation.duration', 1000);
builder.setOption('legend', {position: 'top', textStyle: {color: 'blue', fontSize: 16}});
You have a doc :
https://developers.google.com/apps-script/reference/spreadsheet/embedded-table-chart-builder#setOption(String,Object)
If you use a Grid you can use a label
for example :
gridInfo.setWidget(1, 0, app.createLabel("info ").setStyleAttribute('font-weight','bold'));
gridLink.setWidget(0, 3, app.createLabel(" * link ").setStyleAttributes({background: "#BBD4E9", color: "red"}));
Doc : https://developers.google.com/apps-script/ui_supportedStyles
It's an example for you
I hope this help can help you.