I am working with jqplot and I am trying to achieve couple of things
I am trying to change the text color that appears along side x and y axis.
I am trying to remove the graph border (Top border and Right border only)
This is what my graph looks like
On xaxis you will notice the numbers 30 - 90 I need that to be in white and on y axis you will notice dates, i need that to be in white as well
This is what my JS looks like
var line2 = [
['1/1/2008', 42],
['2/14/2008', 56],
['3/7/2008', 39],
['4/22/2008', 81]
];
var plot2 = $.jqplot('progress_chart', [line2], {
seriesColors: [ "#F2A809"],
series:[
{
// Change our line width and use a diamond shaped marker.
lineWidth:5,
markerOptions: { style:'circle' }
}
],
grid:{
background: 'transparent', // CSS color spec for background color of grid.
borderColor: '#ffffff', // CSS color spec for border around grid.
borderWidth: 2.0 // pixel width of border around grid.
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
shadowAlpha : '0.1',
tickOptions: {
// labelPosition: 'middle',
angle: 15,
showGridline: false,
color: '#ffffff'
}
},
yaxis: {
label: '',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
}
}
});
I will really appreciate any assistance here.
UPDATE
Thanks to #redditor answer I got it to work, however that was causing everything graph x and y axis text to turn white. This particular graph was inside another div called tab-inner-content so I got it to work using the following CSS.
.tab-inner-content .jqplot-target {
color:#ffffff !important;
}
replace
tickOptions: {
// labelPosition: 'middle',
angle: 15,
showGridline: false,
color: '#ffffff'
}
by
tickOptions: {
// labelPosition: 'middle',
angle: 15,
showGridline: false,
textColor: '#ffffff'
}
jqplot uses several CSS rules to create the various graph styles. It looks like the labels are controlled by the jqplot-target class, so you need something like:
.jqplot-target {
color:#fff;
}
Related
I have polygon geometries and visualize them in 3D using a ExtrudeSymbol3DLayer, as described in the SDK documentation and the sample:
var symbol = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 5, // 5 meters in height
material: { color: "red" }
}]
};
Is there any way to stack these 3D extrusions on top of each other? For example, if I have a geometry for New York City, I want to extrude from the bottom to about 5m in one color, and 5m to 10m in one color, etc etc. Kind of like making a stacked bar chart, but in a more geographic way. Any input would be appreciated!
This is possible by extruding the geometries and placing them at a certain height using the elevationInfo property on the layer. The below example is assuming you have a layer (e.g. FeatureLayer or GeoJSONLayer) with polygon geometries.
For the extrusion, tell the layer to render the polygons with a ExtrudeSymbol3DLayer. In the below code snippet, all polygons will have a height of 5 meters.
layer.renderer = {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
size: 5, // height in meters
material: {
color: "red"
}
}
]
}
}
After that you can make your extruded polygons fly by placing them at a certain elevation relative-to-ground. The below example will renderer all polygons 10 meters above ground.
layer.elevationInfo = {
mode: "relative-to-ground",
offset: 10,
unit: "meters"
}
The polygons will not yet appear stacked as they all have the same color, height and elevation from the ground. We basically want to have different values in the above code snippets for each of the polygons.
The following example code achieves this by adding
an Arcade expression for the elevationInfo
a VisualVariable for the extruded height of the polygon
a UniqueValueRenderer to use a different color for each polygon
They all depend on the attributes of the polygon feature and can therefore be tweaked by changing the values of the attributes.
// Make elevation offset depend on the attribute "elevation"
layer.elevationInfo = {
mode: "relative-to-ground",
featureExpressionInfo: {
expression: "$feature.elevation"
},
unit: "meters"
};
layer.renderer = {
type: "unique-value",
visualVariables: [
// Make the extrusion height depend on the attribute "height"
{
type: "size",
valueExpression: "$feature.height",
valueUnit: "meters"
}
],
// Make the color depend on the attribute "usage"
field: "usage",
uniqueValueInfos: [
{
value: "office",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#D06152"
}
}
]
}
},
... // Add unique value info for each usage
]
};
Here is a running example showing a few extruded polygons in Central Park, NY.
https://codepen.io/arnofiva/pen/4071d4e79a3cb921f42d6a9e83f5b418?editors=1010
I think I mean "translucent"...
I'm trying to put a rectangle with an image material and control the translucency of the image so I can see the background behind it (like we do with ordinary layers).
This is my code:
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
transparent: true,
translucent : true,
alpha: 0.2
}),
}
});
I can't get it to work. I already tried every option inside material but with no results.
try it in Sandcastle. My goal is to see a translucid logo.
Solved.
Need to give a color to the image ( what?? ) and apply an alpha to it.
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
color: Cesium.Color.WHITE.withAlpha(0.1) <<<< ----- THIS MAKE IT TRANSLUCENT
}),
}
});
We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.
It's mainly obvious on charts with fixed tooltips.
Does anyone know how to remove this line without removing the border of the tooltip itself?
I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.
Though I dont want to do this for every chart as it seems a bit nasty.
This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.
http://jsfiddle.net/mattscotty/bqw4bc4x/1/
Highcharts.chart('container', {
title: {
text: 'Fixed tooltip'
},
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
//Uncomment below to remove line, but this also removes tooltip border
//borderWidth:0,
//shadow:false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}, {
data: [194.1, 95.6, 54.4]
}]
});
Thanks in advance.
By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
shape: 'rect'
example: http://jsfiddle.net/bqw4bc4x/2/
The accepted answer only partially worked in Highstock. The connectors for the volume and indicator tooltips were suppressed, but I still had a connector from the DateTime box to the crosshair.
As an alternative to the shape: 'rect' hack, you can try:
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
split: false,
shared: true,
backgroundColor: 'rgba(255,255,255,0.8)'
These split: and shared: settings consolidate all the tooltip boxes into a single box. Provided that this meets your needs it seems to solve the connector issue.
Very odd design decision by Highcharts. The connectors are highly intrusive visually and I can't imagine that many designers will want to use them, but you can only disable them with a hack. What were they thinking?
I want to create a GoogleMap like draggable div (as in this example http://tech.pro/tutorial/790/javascr...in-a-container).
But with ExtJs I did not find a way to achieve this without get rid of the Region...
I have a container which fit the screen and I have a huge div inside it (more than 10 000 px) which is centered (called it "area").
When I create an Ext.dd.DD class with this "area" element as a target, and start to drag... the DragDrop fonctionnality doesn't work as the div is stuck in the top-left corner.
Any idea on how to achieve this?
(Obviously, I don't want scoll, but drag and drop scroll).
Thanks in advance,
PsychoKrameur
PS: I'm using ExtJs 5.1
With ExtJS 5.1 you can use the TouchScroller, but be careful the class is private. That means it can change in further releases.
Example: https://fiddle.sencha.com/#fiddle/lmn
document.addEventListener("dragstart", function(e) {
e.preventDefault(); //This for the image otherwise it will dragged in IE
});
var panel = Ext.create("Ext.Panel", {
style: {
cursor: "move"
},
width: 400,
height: 400,
items: [{
xtype: "image",
width: 1019,
height: 1019,
src: "http://tech.pro/_sotc/sites/default/files/202/images/duck.jpg"
}],
renderTo: Ext.getBody()
});
Ext.defer(function() {
var childSize = panel.items.first().getSize();
var size = panel.getSize();
var scroller = Ext.scroll.TouchScroller.create({
element: panel.getOverflowEl()
});
scroller.scrollTo(size.width / 2 - childSize.width / 2, size.height / 2 - childSize.height / 2); //center the image
}, 1);
Having a strange issue with jqplot. I've created a horizontal bar chart with 2 series and 5 labels; all populated with variables from a table.
var plot1 = $.jqplot('chart1', [
[[SERIESA[0],TITLE[0]], [SERIESA[1],TITLE[1]], [SERIESA[2],TITLE[2]], [SERIESA[3],TITLE[3]], [SERIESA[4],TITLE[4]]],
[[SERIESB[0],TITLE[0]], [SERIESB[1],TITLE[1]], [SERIESB[2],TITLE[2]], [SERIESB[3],TITLE[3]], [SERIESB[4],TITLE[4]]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadow: false,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
This renders a lovely horizontal bar chart. I would like for the two series to be stacked under each label, but when I add the line
stackSeries: true,
above my seriesDefaults my bars all vanish. Everything else (labels, ticks, etc) remains the same. Is there something in addition to the stackSeries option I need to add?
I am not sure what might be the reason with your code, what you showed appears to be all right. Maybe something wrong with the way you set the data, but then again it wouldn't work at all.
Check out my example it might help you out.
I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.
Actually you can have custom labels, by adding tickt, for example:
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90
},
labelOptions: {
fontSize: '11pt',
},
ticks: ['tick 1', 'tick 2'],
}