I'm having a bit of trouble understanding how to tackle the scatter and bubble chart in dojo. Does anyone have an example or good documentation I can look at to help me out?
unlike any other chart (line,bar,area which takes two inputs per point , x and y)
bubble chart takes three inputs per point ( x, y , and size of bubble)
Bubble Chart Example:
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Bubble",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
],function(Chart,theme){
var d1 = [];
for (var i = 0; i <= 10; i += 1){
d1.push({x: i, y: parseInt(Math.random() * 30), size: parseInt(Math.random() * 10)});
// or you can put "size:1" for simplicity
}
var chart = new Chart("container");
chart.addPlot("default", {
type:"Bubble"
});
chart.addAxis("x");
chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
// Add the series of data
chart.addSeries("Demo", d1);
chart.render();
});
Scattered charts are similar to any other point chart except the x axis values can be in float (or double) type.
Scattered Chart Example :
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/plot2d/Scatter",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
],function(Chart,theme){
var d1 = [];
for (var i = 0; i <= 4; i += 0.1){
d1.push({x: i, y: parseInt(Math.random() * 30)});
}
var chart = new Chart("container");
chart.addPlot("default", {
type:"Scatter"
});
chart.addAxis("x");
chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"});
// Add the series of data
chart.addSeries("Demo", d1);
chart.render();
});
Hope this helps ... ..
Related
I have a question about the pie chart in c3.js.
How can I add the total count of a pie chart in the title??
var title = new Array('data1.sql','data2.sql')
var dtitle = new Array('title1','title2')
var chart = new Array('chart0', 'chart1')
for(var i = 0; i < title.length; i++){
chart[i] = c3.generate({
bindto : '#chart' + i,
size: {
height: 550,
width: 800
},
data : {
url : '/json/sql/data/test/' + title[i],
mimeType : 'json',
type : 'donut'
},
donut: {
title: dtitle[i] + ' - Total:' ,
label: {
format: function(value, ratio, id) {
return value;
}
}
}
});
}
The annoying thing here is that the title option can take a function, but the chart variable is not initialised within it so using the c3 api methods can't be done at this point.
So the best (maybe only) way is to add an onrendered callback that adds up the data as you'd need to anyways and then replace the text in the chart's title text using a spot of d3:
onrendered: function () {
var data = this.api.data();
var total = data.reduce (function (subtotal, t) {
return subtotal + t.values.reduce (function (subsubtotal,b) { return subsubtotal + b.value; }, 0);
}, 0);
d3.select(this.config.bindto + " .c3-chart-arcs-title").text("Total: "+total);
}
Edit: If you want it to keep track of a total as you hide/show series use this
var data = this.api.data.shown.call (this.api);
instead of
var data = this.api.data();
guys I know this question has been asked several times, several different ways, but I just can get it to work. Basically I have 2d clouds, but I want the camera to rotate around an object floating above the clouds. The problem is, when im not looking a the face of the clouds u can tell that they are 2d. Soooo i want the the clouds to "look" at the camera where ever it is. I believe my problem stems from how the cloud geometry is called on to the planes, but here take a look. I put the a lookAt function with in my animate function. I hope you can point me in the right direction at least.
Three.js rev. 70...
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
scene.add(camera);
controls = new THREE.OrbitControls( camera );
controls.target.copy( new THREE.Vector3( 0, 0,475) );
controls.minDistance = 50;
controls.maxDistance = 200;
controls.autoRotate = true;
controls.autoRotateSpeed = .2; // 30 seconds per round when fps is 60
controls.minPolarAngle = Math.PI/4; // radians
controls.maxPolarAngle = Math.PI/2; // radians
controls.enableDamping = true;
controls.dampingFactor = 0.25;
clock = new THREE.Clock();
cloudGeometry = new THREE.Geometry();
var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog(0x4584b4, -100, 3000);
cloudMaterial = new THREE.ShaderMaterial({
uniforms: {
"map": {
type: "t",
value: texture
},
"fogColor": {
type: "c",
value: fog.color
},
"fogNear": {
type: "f",
value: fog.near
},
"fogFar": {
type: "f",
value: fog.far
},
},
vertexShader: document.getElementById('vs').textContent,
fragmentShader: document.getElementById('fs').textContent,
depthWrite: false,
depthTest: false,
transparent: true
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var i = 0; i < 8000; i++) {
plane.position.x = Math.random() * 1000 - 500;
plane.position.y = -Math.random() * Math.random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = Math.random() * Math.PI;
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
plane.updateMatrix();
cloudGeometry.merge(plane.geometry, plane.matrix);
}
cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(cloud);
cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
cloud.position.z = -8000;
scene.add(cloud);
var radius = 100;
var xSegments = 50;
var ySegments = 50;
var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);
var mat = new THREE.ShaderMaterial({
uniforms: {
lightPosition: {
type: 'v3',
value: light.position
},
textureMap: {
type: 't',
value: THREE.ImageUtils.loadTexture("img/maps/moon.jpg")
},
normalMap: {
type: 't',
value: THREE.ImageUtils.loadTexture("img/maps/normal.jpg")
},
uvScale: {
type: 'v2',
value: new THREE.Vector2(1.0, 1.0)
}
},
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
mesh.position.set(0, 50, 0);
mesh.rotation.set(0, 180, 0);
scene.add(mesh);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
light.orbit(mesh.position, clock.getElapsedTime());
cloud.lookAt( camera );
controls.update(camera);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', onWindowResize, false);
just a first guess:
the lookAt function needs Vector3 as parameter. try to use camera.position in the animate function.
cloud.lookAt( camera.position );
first of all, to build 2D objects in a scene that always faces towards the camera, you should use Sprite object, so you don't have to do anything to get this effect. (and have better performance :))
Definition from THREE.org: Sprite - a sprite is a plane in an 3d scene which faces always towards the camera.
var map = THREE.ImageUtils.loadTexture( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );
Please check this example: http://threejs.org/examples/#webgl_points_sprites
I would absolutely agree, I would use Sprite, or even Points, but then, if assign a texture to it, it will render it square-sized. My sprites are animated, and frames cannot be packed in square tiles, cause it would take a lot of space. I might make a mesh and use this lookAt function.
I am using dimplejs to create line charts on some sample data that I have.
The data looks like this (see html section, it is stored in data.tsv).
d3.js = dimplejs.org/lib/d3.v3.4.8.js
and the dimple code is:
<head>
<script src="d3.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = false;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text")
.each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};
var svg = dimple.newSvg("body", 800, 600);
d3.tsv("data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
var y =myChart.addMeasureAxis("y", "Returns");
y.overrideMax = 200;
myChart.addSeries("Name", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
cleanAxis(x, 20);
});
/*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>
</body>
And the final chart looks like this:
And the questions are:
Why are the numbers not matching?
Why is there the big drop in the end of the data?
The representation of the data seems inconsistent, and there is no way this library was released with a bug like this.
Thank you for any pointers
Because you're plotting the Month field on the x axis, dimple is summing all of the returns for each month, so those are in fact month totals you are seeing (the drop at the end is presumably due to a partial month).
I think you may have more success with a time axis on x. You will not need the clean axis code then either. Try this (I haven't tested this code but it should be pretty close):
var svg = dimple.newSvg("body", 800, 600);
d3.tsv("data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
myChart.addTimeAxis("x", "Date", "%m/%d/%Y", "%b-%Y");
myChart.addMeasureAxis("y", "Returns");
myChart.addSeries("Name", dimple.plot.line);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
I'm still pretty new to JS, JQuery and Highcharts.
From the "dynamic-update" example in HighStock:
chart: {
events: {
load: function() {
var series = this.series[0];
var y = 1;
setInterval(function() {
var x = (new Date()).getTime();
$.get('get_most_recent_point_from_database.php',function(data){
alert( data);
var y = data;
// y = 10;
alert( y);
series.addPoint([x, y], true, true);
});
}, 1000);
}
}
},
"get_most_recent_point_from_database.php" produces an integer.
The alerts show the integer, but series.addPoint doesn't add the integer to the chart. The chart just goes blank.
The "y = 10;" (commented out in the code) will update the chart with 10.
I set y to integer by "var y = 1;" thinking that might help.
Any thoughts? I can put it all in JSFiddle if it helps.
THE FIX ======================
setInterval(function() {
var x = (new Date()).getTime(), y;
$.get('get_most_recent_point_from_database.php',function(data){
y = parseFloat(data).toFixed(1);
series.addPoint([x, y], true, true);
});
}, 1000);
How your data looks like? probably it is string, so try to convert it by parseFloat(data) (if it is single point) or use json_encode() in php. (All depends how your php file looks like)
I have bar chart, whose x-axis labels is generated dynamically from db, I am getting these values through ajax call data
'{value:1,text:"x"},{value:2,text:"Vikash"},{value:3,text:"y"},{value:4,text:"z"}'.
How to pass these values to label parameter. I tried passing it as an array and also as json but nothing seems to work.. Any ideas..
Here is my code:
makeBarChart=function() {
animChart = new dojox.charting.Chart2D("animChart");
animChart.setTheme(dojox.charting.themes.MiamiNice)
.addAxis("x",{
labels: [ myLabelSeriesarray ], gap: 20}).
addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
includeZero: true
}).
addPlot("default", {
type: "ClusteredColumns",
gap: 10
}).
addSeries("Series A", closedSeries).
addSeries("Series B", othersSeries).
render();
};
dojo.addOnLoad(makeBarChart);
jsp code:
var labelDis = new Array(pieData.length); // pieData is the JSON value getting from Java
for(var i = 0;i<pieData.length;i++){
labelDis[i] = new Array(2);
labelDis[i]['value'] = i + 1;
labelDis[i]['text'] = pieData[i]['axis'];
}
Java/Servlet code:
JSONObject jSONObject = new JSONObject();
jSONObject.put("axis", "value from database");
jSONArray.put(jSONObject);
out.print(jSONArray.toString());
Suppose you have received data in json format through ajax call and you want to create dynamic labels using that data.
var jsonArray= ["label1","label2","label3"];
var labelsArray = [];
for (var i = 0; i < jsonArray.length; i++,) {
var obj = {};
obj.value = i;
obj.text = jsonArray[i];
labelsArray.push(obj);
}
Set the labels in x Axis to this labelsArray
this.chart1.addAxis("x", {
title: "Collection Date",
titleOrientation: "away",
titleGap:20,
labels:labelsArray
})