How to change balloon (tooltip) location in AmXYChart? - javascript

I am using AmXYChart and I want to customize the location of the balloon which appears when I place my cursor over a bullet (point). The idea is on the picture below.
So I just want it to appear in other place but not right over the bullet. Does AmXYChart allow me to do that?
Update 1:
<html>
<head>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
</style>
<script src="amstock.js"></script>
<head>
<body>
<div id="chartdiv"></div>
<script type="text/javascript">
var chartData = [ {
x : 10,
y : 14
}, {
x : 5,
y : 4
}, {
x : 11,
y : 11
}, {
x : 10,
y : 10
}, {
x : 15,
y : 19
}, {
x : 13,
y : 13
}, {
x : 1,
y : 5
} ];
var chart = new AmCharts.AmXYChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.dataProvider = chartData;
chart.marginLeft = 35;
chart.startDuration = 1.5;
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "left";
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "bottom";
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bullet = "round";
graph.balloonText = "x:[[x]] y:[[y]]";
chart.addGraph(graph);
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.hideResizeGrips = false;
chart.addChartScrollbar(chartScrollbar);
var balloon = chart.balloon;
balloon.adjustBorderColor = true;
balloon.color = "#000000";
balloon.fillColor = "#FFFFFF";
balloon.cornerRadius = 3;
balloon.borderThickness = 3;
balloon.horizontalPadding = 17;
balloon.offsetX = 50;
balloon.offsetY = 8;
chart.write("chartdiv");
</script>
</body>
</html>
Update 2:
Funny thing I've noticed. When I include only the next AmChart js files
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script>
offsetX and offsetY work fine, but I use stock charts on my page as well as xycharts. And when I try to include amstock.js after these two files, like below
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script>
<script src="amstock.js"></script> // amstock.js located in the same folder where my HTML file is located, so it is ok.
offsetX and offsetY don't work - balloon appears with default offsets (right over the bullet). So it seems that those files don't get along with each other.

yes am chart provides option for balloon location
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
}
offsetX , and offsetY are horizontal and vertical distance from mouse pointer

I could not get these offsets to work and filed a ticket with amcharts. Great support. They came back telling me that there is one additional (fixedPosition) parameter that needs to be set.
They promised to update their docs.
Here is what worked for me:
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"fixedPosition": false,
"offsetX": 50,
"offsetY": 8
}

Related

Dimple Js repeats ticks when there are only a few values

When I only have one or two data points, dimple js will repeat the same ticks. How do I make it not do that?
Example
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "Word":"1/2/1990", "Awesomeness":2000 },
{ "Word":"1/1/1990", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addTimeAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.line);
chart.draw();
</script>
</body>
Typically you'll set axis.ticks but when using a time axis you'll want to set timePeriod and timeInterval. This will set one tick mark per day in the data set.
var xAxis = chart.addTimeAxis("x", "Word");
xAxis.timePeriod = d3.time.days;
xAxis.timeInterval = 1;
xAxis.tickFormat = "%A";
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.line);
chart.draw();

Stacked Bar Flot Chart - labels inside each series of Stacked Bar [duplicate]

I'm using jquery.flot.barnumbers.js plugin for the Javascript plotting (charts) library for jQuery to show the numbers on the bars.
My code:
$.plot("#placeholderByDay", [
{
data: DataOne, label: "Total Calls", bars: {
numbers:{
show:true,
xAlign: 80,//align top
yAlign: 1
//yAlign: function(y) { return y+ 1; } //upside of bars
}
} ]);
What I get now is:
What I need is:
So when there is no data for a bar, the zeros should be just above the axis, and where there are values should be as is, both rotated let 90 degrees. How can I achieve this?
Oops, I did it again.
If you'd like to drop the plugin and do this the fun way; code it up yourself. It'll give you the freedom to customize any way you like.
// after you draw the plot
var ctx = somePlot.getCanvas().getContext("2d");
var data = somePlot.getData()[0].data;
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "16px 'Segoe UI'";
ctx.fillStyle = "black";
for (var i = 0; i < data.length; i++){
var text = data[i][4] + '';
var metrics = ctx.measureText(text);
var xPos = xaxis.p2c(data[i][0]) + offset.left;
var yPos = yaxis.p2c(data[i][5]) + offset.top + metrics.width + 5;
// perform the rotation
ctx.save();
ctx.translate(xPos, yPos);
ctx.rotate(-Math.PI/2);
ctx.fillText(text, 1, 1);
ctx.restore();
}
Example here.
part of the plot
I use "categories" in yaxis,the y position of the text should be like that:
for(var i=0;i<data1.length;i++){
.....
var yPos = yaxis.p2c(i) + fontSize;
.....
}
if you want the flot shows like that:
the y position of the text should be like that:
for(var i=0;i<data1.length;i++){
.....
var yPos = yaxis.p2c(i+align) + fontSize;
.....
}
align = barWidth/2, if bars' align = 'left';
align = -barWidth/2, if bars' align = 'right;

How do I create circular hotspots with two.js?

I am trying to make a solar system model. I made it all so far using two.js. I want to make it so when the mouse is over a planet's orbit path, it'll highlight that planet's orbit, and be a link to information about that planet. I'm having trouble finding a way to do this, though.
If you don't have it, here's Two.js.
My file structure looks like this:
css
main.css
js
main.js
two.js
index.html
PS. This will not render with the "Run code snippet" feature. If you wish to see it, you must save this code and put it in the same file structure I have.
//This work was created by the minds of Sam Steele and Devin Fowler of Cryptocosm Developers.
//Cryptocosm ©2014
//cryptocosm.x10.bz
//Initiate the render context
var elem = document.getElementById('canvas');
var two = new Two({
fullscreen: true
}).appendTo(elem);
//Define our planets and their colors
var sun = two.makeCircle(0, 0, 70);
var mercury = two.makeCircle(95, 0, 7);
var venus = two.makeCircle(125, 0, 8.5);
var earth = two.makeCircle(160, 0, 11.4);
var mars = two.makeCircle(200, 0, 9.5);
var jupiter = two.makeCircle(260, 0, 28);
// For Saturn we're going to do something special in order to get the rings
var saturnBody = two.makeCircle(320, 0, 24);
var saturnRings = two.makeCurve(296, 0, 290, 10, 322, 10, 350, -8, 342, -10, true);
saturnRings.rotation = 4.5;
var saturn = two.makeGroup(saturnBody, saturnRings);
var uranus = two.makeCircle(460, 0, 18);
var neptune = two.makeCircle(540, 0, 16);
var asteroid = two.makeCircle(0, 320, 3);
//Try to make some stars
var width = window.innerWidth;
var height = window.innerHeight;
var star;
for (i = 0; i < 200; i++) {
var randX = Math.round(Math.random() * width);
var randY = Math.round(Math.random() * height);
star = two.makeCircle(randX, randY, 2);
}
//Set the color of the planets
sun.fill = '#F7CA18';
mercury.fill = '#9E9E9E';
venus.fill = '#795548';
earth.fill = '#2196F3';
mars.fill = '#FF7043';
jupiter.fill = '#E67E22';
saturnBody.fill = '#A1887F';
saturnRings.stroke = "#F5F5F5";
saturnRings.linewidth = 7;
saturnRings.noFill();
saturn.translation.set(20, 0);
uranus.fill = '#4DB6AC';
neptune.fill = '#3F51B5';
star.fill = '#FAFAFA';
asteroid.fill = '#FAFAFA';
//Group the planets
var Mercury = two.makeGroup(mercury);
var Venus = two.makeGroup(venus);
var Earth = two.makeGroup(earth);
var Mars = two.makeGroup(mars);
var Jupiter = two.makeGroup(jupiter);
var Saturn = two.makeGroup(saturn);
var Uranus = two.makeGroup(uranus);
var Neptune = two.makeGroup(neptune);
var planets = two.makeGroup(sun, Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune);
//Center everything in the center of the element
planets.translation.set(two.width / 2, two.height / 2);
Mercury.rotation = 4;
Venus.rotation = 2.5;
Earth.rotation = 5.5;
Mars.rotation = 1;
Jupiter.rotation = 4.2;
Saturn.rotation = 2.5;
Uranus.rotation = 5.75;
Neptune.rotation = .5;
var counter = document.getElementById('counter');
var count = 0;
var yearsPassed = 0;
// Bind a function to scale and rotate the group to the animation loop.
two.bind('update', function (frameCount) {
//Set the "ZOOM" of the system
planets.scale = .8;
//Rotate all the planets
Mercury.rotation += .01607;
Venus.rotation += .01174;
Earth.rotation += .01;
/* //Earth year counter (not currently accurate at all)
count++;
if (count % 550 == 0) {
yearsPassed++;
counter.innerHTML = "An estimated " + yearsPassed + " Earth years passed";
}; */
Mars.rotation += .00802;
Jupiter.rotation += .00434;
Saturn.rotation += .00323;
Uranus.rotation += .00228;
Neptune.rotation += .00182;
//Rotate Saturn's rings so that it doesn't look dumb
saturnRings.rotation -= .00323;
}).play(); // Finally, start the animation loop
#font-face {
font-family: Roboto-Thin;
font-style: normal;
src: url(Roboto/Roboto-Thin.ttf);
}
html {
background-color: #212121;
}
body {
color: white;
font-family: Roboto-Thin;
}
#counter {
background-color: rgba(0, 0, 0, .4);
width: auto;
height: auto;
font-size: 34px;
float: left;
position: fixed;
padding: 10px;
}
#canvas {}
<html>
<head>
<title>The Solar System</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<script src="js/two.js"></script>
</head>
<body>
<div id="counter"></div>
<div id="canvas">
</div>
<script src="js/main.js"></script>
</body>
</html>
This is one way to achieve that effect:
This will only work for the svg renderer, but you can add event listeners on mouseover and mouseout as well as touchmove events like so:
// ... After you've created all the planets ...
// This command will create all the dom elements
// which you can bind events to.
two.update();
var highlight = function() { sun.fill = 'red'; };
var ignore = function() { sun.fill = 'yellow'; };
sun._renderer.elem.addEventListener('mousemove', highlight, false);
sun._renderer.elem.addEventListener('mouseout', ignore, false);
There is also an example of how to achieve this here.

How to name axis with Chart.js [duplicate]

This question already has answers here:
How to set ChartJS Y axis title?
(7 answers)
Closed 7 years ago.
Hello everybody,
I'm doing some bar charts with chartjs...everything goes well but i can't find how to name my axes the clean way, i mean without using css trick like position absolute etc..
for example, this is one of my chart :
function buildResultChart(suffix, vous, moyenne) {
var pixelRatio = window.devicePixelRatio || 1;
var $chart = $('#result-chart-' + suffix);
var width = $chart.parents('.inner').width() / pixelRatio;
var containerWidth = $('.container').width();
if (containerWidth < 320) {
containerWidth = 320;
}
if (containerWidth > 600) {
containerWidth = 600;
}
var width = containerWidth - 40;
$chart.attr('width', width);
var goodColor = 'rgba(200,245,0,1)';
var badColor = 'rgba(255,254,134,1)';
var color = goodColor;
if (moyenne < vous) {
color = badColor;
}
var ctx = document.getElementById("result-chart-" + suffix).getContext("2d");
var data = {
labels: ['Votre salon'],
datasets: [
{
fillColor: "rgba(220,220,220,1)",
fillColorAlt: color,
strokeColor: "rgba(220,220,220,1)",
data: [vous]
},
]
};
var max = Math.round(Math.max(vous, moyenne));
//highest 100 next
var len = max.toString().length;
var first = max.toString().substring(0, 1);
if (first === '9') {
len++;
first = '1';
}
else {
first = parseInt(first) + 1;
}
while (--len) {
first += '0';
}
var max = first;
var steps = 10;
var stepWidth = Math.round(max / steps);
var c = new Chart(ctx).Bar(data, {
align: 'h',
scaleShowLabels:true,
scaleFontColor: '#fff',
scaleLineColor: '#fff',
scaleShowGridLines: false,
barShowStroke: false,
animationSteps: 80,
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: steps,
scaleStepWidth: stepWidth
});
}
Maybe someone could help me?
Thanks a lot!
Hello,
For the ones who have the same problem, a new version of chartJS is in dev mode, you can see it there newChartJS.
This version seems to let you name your axis but doesn't work 100% the same way than the older so, be careful :)

What's wrong with the following amchart?

I'm trying to plot the graph using amchart in a coldfusion file but wondering why nothing is displayed in the browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cfchart</title>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<!--- August 01 --->
<script type="text/javascript">
var chart;
var chartData = [{
date: 2013-07-31,
FIRSTCONN: 3,
SECONDCONN: 4
},
{
date: 2013-08-15,
FIRSTCONN: 5,
SECONDCONN: 10
},
date: 2013-08-17,
FIRSTCONN: 6,
SECONDCONN: 8
}
];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.marginRight = 0;
chart.autoMarginOffset = 5;
chart.categoryField = "date";
chart.startDuration = 0.5;
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Number of Connections";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.integersOnly = true;
valueAxis.gridCount = 10;
valueAxis.reversed = true; // this line makes the value axis reversed
chart.addValueAxis(valueAxis);
// GRAPHS
// FIRST Connection graph
var graph = new AmCharts.AmGraph();
graph.title = "FIRST";
graph.valueField = "FIRSTCONN";
graph.hidden = true; // this line makes the graph initially hidden
graph.balloonText = "Number of FIRST connections [[category]]: [[value]]";
graph.lineAlpha = 1;
graph.bullet = "round";
chart.addGraph(graph);
// GRAPHS
// SECOND Connection graph
var graph = new AmCharts.AmGraph();
graph.title = "SECOND";
graph.valueField = "SECONDCONN";
graph.hidden = true; // this line makes the graph initially hidden
graph.balloonText = "Number of SECOND connections [[category]]: [[value]]";
graph.lineAlpha = 1;
graph.bullet = "round";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.markerType = "circle";
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
</body>
</html>
You are missing a { in your code.
The 3rd block of data should look like
{
date: 2013-08-17,
FIRSTCONN: 6,
SECONDCONN: 8
}

Categories

Resources