I'm trying to change the default colour in Dimple.js, I want each bar to be red, I can change the colour by individually citing each entry in the series, but I can't seem to change the colour across the whole chart, once I set the buyerchartSeries to null.
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
myChart.assignColor(null,"red")
myChart.draw();
Your solution is fine but if you also have some non-null series identifiers which you would like to colour separately it won't work. You can use assignColor but you need to assign to "All":
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
// This is all I've changed
myChart.assignColor("All", "red");
myChart.draw();
I've found the answer... it might be an egregious hack, or it might be the best way to do this, (advice welcome).
Rather than assign a colour to a 'null' series, which obviously won't work, I've changed the defaultColor of the chart. If you only have one colour it has the correct effect of imposing a single colour on all the bars.
var myChart = new dimple.chart(svg3_1, dt);
myChart.setBounds(4, 20, "88%", "80%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "supplier");
y.hidden = true;
supplierChartSeries = myChart.addSeries("supplier", dimple.plot.bar);
myChart.defaultColors = [
new dimple.color("#3498db", "#2980b9", 1), // blue
];
Related
I have an XYChart but unfortunately the values vary a lot and the ratio of the bars is not good.
I thought it shouldn't be a problem to set a minimum height for the bars to make it look better, but after over an hour I still haven't found what I was looking for.
Does this function really not exist or am I just too stupid to find it?
Here's my code:
chart.data = data;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "ch";
categoryAxis.renderer.minGridDistance = 1; // lable size
categoryAxis.renderer.labels.template.rotation = 360;
categoryAxis.tooltip.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.sequencedInterpolation = true;
series.dataFields.valueY = "pu";
series.dataFields.categoryX = "ch";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
series.columns.template.strokeWidth = 0;
series.tooltip.pointerOrientation = "vertical";
series.columns.template.column.cornerRadiusTopLeft = 10;
series.columns.template.column.cornerRadiusTopRight = 10;
series.columns.template.column.fillOpacity = 1;
var hoverState = series.columns.template.column.states.create("hover");
hoverState.properties.fillOpacity = 1;
series.columns.template.adapter.add("fill", function(fill, target) {
return chart.colors.getIndex(target.dataItem.index);
});
chart.cursor = new am4charts.XYCursor();
And the chart:
Thanks for your help!
You can't specify a minimum height for a column as that would change its value. You can try using an axis break to remove a portion of the axis range to make smaller values look a little bigger:
axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 20;
axisBreak.endValue = 40;
axisBreak.breakSize = 0.05;
Adjust the values as needed. There's also a demo of this with a mouseover effect to remove the break on the demos page here.
Somewhat new to Three.js and 3d libraries in general.
I merged two geometries (a quarter cylinder and a plane) using this code:
var planeGeo = new THREE.PlaneGeometry(planeW, planeD / 2, 199, 399);
var planeMesh = new THREE.Mesh(planeGeo);
planeMesh.updateMatrix();
var cylinderGeo = new THREE.CylinderGeometry(100, 100, planeW, 199, 399, true, 0, Math.PI / 2);
cylinderGeo.rotateZ(Math.PI / 2).translate(0, 200, -100);
var cylinderMesh = new THREE.Mesh(cylinderGeo);
cylinderMesh.updateMatrix();
var singleGeometry = new THREE.Geometry();
singleGeometry.merge(planeMesh.geometry, planeMesh.matrix);
singleGeometry.merge(cylinderMesh.geometry, cylinderMesh.matrix);
var testmaterial = new THREE.MeshPhongMaterial({ color: 0x666666 });
mesh = new THREE.Mesh(singleGeometry, testmaterial);
scene.add(mesh);
I then would like to use a single material (png) over the entire thing. This code doesn't work:
textureLoader.load('data/test.png', function (texture) {
material = new THREE.MeshLambertMaterial({
map: texture
});
});
Later in the block with the merging...
mesh = new THREE.Mesh(singleGeometry, material);
scene.add(mesh);
This results in:
I would like the end result to be a single draped png over the entire merged geometry, but I can't find anything that suggests this is a normal thing to do. Is there a better way to achieve that result than merging geometries? Or am I just looking in the wrong places?
A poor-mans solution to achieve this, using the shape supplied in your post, is the following:
https://jsfiddle.net/87wg5z27/44/
Using code from this answer: https://stackoverflow.com/a/20774922/4977165
It sets the UVs based on the bounding box of the geometry, leaving out the z-coordinate (=0). Thats why the texture is a little bit stretched at the top, you can correct that manually or maybe its sufficent for you.
geometry.computeBoundingBox();
var max = geometry.boundingBox.max,
min = geometry.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometry.faces;
geometry.faceVertexUvs[0] = [];
for (var i = 0; i < faces.length ; i++) {
var v1 = geometry.vertices[faces[i].a],
v2 = geometry.vertices[faces[i].b],
v3 = geometry.vertices[faces[i].c];
geometry.faceVertexUvs[0].push([
new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
]);
}
geometry.uvsNeedUpdate = true;
I'm wondering if it is possible to attach a text above a 3D Object?
If so, how would I do it?
So far I'm doing the following below to load a mesh with its material and lastly adding it to a THREE.Object3D(); and adding it to the scene. Works great without any problems.
Next step is I want to show a nice text above its this object that is always fixed and can be seen from every angle.
loader.load('assets/' + enemyUrl, function (geometry, materials) {
material = new THREE.MeshFaceMaterial( materials );
model = new THREE.SkinnedMesh( geometry, material );
var mats = model.material.materials;
for (var i = 0,length = mats.length; i < length; i++) {
var m = mats[i];
m.skinning = true;
}
ensureLoop(geometry.animations[0]);
function ensureLoop( tmp ) {
for ( var i = 0; i < tmp.hierarchy.length; i ++ ) {
var bone = tmp.hierarchy[ i ];
var first = bone.keys[ 0 ];
var last = bone.keys[ bone.keys.length - 1 ];
last.pos = first.pos;
last.rot = first.rot;
last.scl = first.scl;
}
}
model.scale.set(2.5,2.5,2.5);
// TODO: Randomize where to put it in the world
yawObject.position.y = spawnPosition.y;
yawObject.position.x = spawnPosition.x;
yawObject.position.z = spawnPosition.z;
yawObject.add(model);
scene.add(yawObject);
});
Something like this:
This is what my game looks like now:
sure its possible. you can create a canvas with text on it, which you use as a texture on a plane that always looks at the camera, you could also do it with a single particle, but im not quite sure how it would work since particle materials have a size parameter. something like:
var name = 'Rovdjuret';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText(name,10,50);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true; //just to make sure it's all up to date.
var label = new THREE.Mesh(new THREE.PlaneGeometry, new THREE.MeshBasicMaterial({map:texture}));
and inside the render/animation loop you make all the labels look at the camera:
label.lookAt(camera.position);
How do I remove the side scale axis in am-charts.
For eg. in this fiddle I want to remove the top scales and left scales.
what are the properties or methods that I need to manipulate.
A demo chart.
http://jsfiddle.net/JSTQW/
Currently, I am using this code for plotting the chart:
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData1; //data provider for chart
chart.categoryField = "year"; //this is the side category year field
chart.startDuration = 1; //this is the chart plotting time
chart.plotAreaBorderColor = "#ffffff"; //side div rectangular border
chart.plotAreaBorderAlpha = 15;
// this single line makes the chart a bar chart
chart.rotate = true;
chart.columnWidth=0.2;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = "top";
valueAxis.maximum = 100;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.valueField = "income";
graph1.balloonText = "Income:[[value]]";
graph1.lineAlpha = 0;
graph1.fillColors = "#7fb5b7";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.type = "column";
graph2.title = "Expenses";
graph2.valueField = "expenses";
graph2.balloonText = "Expenses:[[value]]";
graph2.lineAlpha = 0;
graph2.fillColors = "#999999";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
// LEGEND
//var legend = new AmCharts.AmLegend();
// chart.addLegend(legend);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv1");
The accepted answer is no longer valid for amcharts4, now you can do this with:
valueAxis.renderer.labels.template.disabled = true;
And you might also want to disable the tooltip:
valueAxis.tooltip.disabled = true;
By setting valueAxis.labelsEnabled value you can get this.
Just try :
valueAxis.labelsEnabled = false;
Say we have the bar chart of the example http://dimplejs.org/examples_viewer.html?id=bars_vertical and I want to change the x axis label from "Months" to "Meses".
How can I do that?
After drawing you can access the title object and set it's text as follows:
chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", ["Fruit", "Year"]);
chart.addMeasureAxis("y", "Value");
chart.addSeries(["Volume", "Year"], dimple.plot.bar);
chart.draw();
x.titleShape.text("My New Title");
Here it is working: http://jsfiddle.net/y3BVN/
Instead of changing the titleShape after drawing, you can also change the title directly before drawing.
To do so, simply assign the title property:
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", ["Fruit", "Year"]);
x.title = "My New Title";