Develop Reference

Issue with AMCharts Series not appearing when The data has less than 3 values

I am using AMCharts4 in a WordPress Project, everything works fine, but I am having a weird issue when I filter the data, let me show what's happening with images:
With All the data (Works 100% fine)
-Filtering the data (More than 2 results works fine 100%)
Filtering the data (2 or Less results not showing the Scores, here is the bug)
See how it's not showing the respective scores as the 2 first images.
The question here is how do I make those scores appear? I have tried commented lines of code in my funcions but nothing seems to work.
You could reproduce the issue in this link selecting the Australia or Brazil location for example
And see my function here
labelBullet = series.bullets.push(new am4charts.LabelBullet())
labelBullet.label.horizontalCenter = "left";
labelBullet.label.dx = 10;
labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.')}";
labelBullet.locationX = 1;

The issue is in your usage of labelBullet.locationX = 1;. If you take a look at am4 Bullets documentation:
There's one caveat, though. For bullets, locationY property means the
relative vertical position in the whole height of the column. That
means that if our scale would not start at zero, it would be not in
the direct center of the currently visible portion of the column.
As you are using inverted chart, same applies to locationX in your case. Meaning, label position is relative to the scale.
To fix the issue you can either set min for value axis to 0, as in this jsfiddle using:
valueAxis.min = 0;
or as mentioned in the document, push labels directly into column series template, as in this jsfiddle.
label = series.columns.template.createChild(am4core.Label);
label.text = "{values.valueX.workingValue.formatNumber('#.')}";
label.align = "left";
label.valign = "middle";
label.zIndex = 2;

D3.js not showing labels on first SVG after second SVG created

Example: https://codepen.io/anon/pen/YedQog
If I comment out the line donut2.create(petData()); to only create one chart, it works fine. However, when that line is left in and I use the logic to create two distinct pie charts, the labels disappear for the first chart. I'm at a bit of a loss as to why.
Any help appreciated.
$(function() {
var donut1 = new DonutCharts('#money');
donut1.create(moneyData());
var donut2 = new DonutCharts('#pets');
// donut2.create(petData());
});

Instead of
var donuts = d3.selectAll('.donut');
do
var donuts = charts.selectAll('.donut');
Reason:
d3.selectAll('.donut');
will select the previous created chart and so the problem, that is the reason why the last graph text comes.
working code here

Adding c3.js padding without cutting off graph

This is in response to the following question, How to remove padding in c3.js?, where the answer that was provided solves this issue, but also raises another issue -- the buttons on the graph are cut off at the end --
How would I get there to be no padding and the buttons not to be cut off, for example, it should look like:

The dots are getting clipped off because of the clip-path set on the chart layer. You just have to remove it. You can use D3 for this, like so
d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);
where chart is your C3 chart object
Fiddle - http://jsfiddle.net/zds67nh1/
However you most probably want the dots to appear above the axis layer. For that you need to detach and attach the chart layer (in SVG, the z-index is determined by the order - the last of the siblings come on top. So you have to basically move it to the end of the siblings list), like so
var chartLayer = d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart);
var chartLayerParentNode = chartLayer.node().parentNode;
var chartLayerNode = chartLayer.remove();
chartLayerParentNode.appendChild(chartLayerNode.node());
chartLayer.attr("clip-path", null);
Fidle - http://jsfiddle.net/7e1eL22f/

Am Charts Javascript version, does not show complete number of lables on category axis

everyone,
I am using the AmCharts to generate graphic, but when the size of the div is not big as it wants, it will somewhat collapse labels in category axis.
for example, in category axis suppose to show 1 2 3 4 5 6, instead it will show 1 3 5 in the axis. I wonder how could I either turn it off or enable the complete list of label to be display even when the div is too small or any solution that can be provided for this issue?
======UPDATE============
For reading and research convinence, I put the link where show the chart in live here
In here you can see that the country name is not displayed fully in each column because the constrain of space.
So again, question is that how to disable this, or somehow enable it to display all the column name in a way that fit them in or shrink the text.
Thank You!

categoryAxis.gridCount = chartData.length;
categoryAxis.autoGridCount = false;
Above code is the solution for my issue, and it should be put under code that looks like:
// AXES
// Category
var categoryAxis = chart.categoryAxis;
I just found these solution.
Hope whoever had the same issue helps you out :)
Enjoy!
Here's the updated fiddle

Tracking mouse position of a jqplot vertical line chart

I want to create a jqPlot line chart which has the ability to change orientation between vertical and horizontal orientation. I was able to achieve this using CSS rules, by rotating the div element containing the chart.
My work up to now: http://jsfiddle.net/GayashanNA/A4V4y/14/
But the problem is I also want to track the mouse-pointer and mouse clicks on points on chart after the orientation is flipped because i want to annotate those points. I am unable to do this when the chart is in vertical orientation. Can anyone suggest a method to do this? Or am i approaching the problem in a wrong way?
(Note: I am able to do this in horizontal orientation, you can observe it if you try to click on a point on the above chart.)
Thanks and help is much appreciated.

I've never used jqPlot, but I guess your problem is trying to use css rotate(), since the cursor plugin is using the mouse position to determine where to draw the lines, and element's size doesn't change when transformed by rotate(), it still have the same width and height values.
If you take a look at the code, you will see:
if (c.showVerticalLine) {
c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}
So it seems like the library is always drawing the lines based on mouse position over the original element, which of course, won't match the position after being transformed by rotate(), and XY coordinates are going to be transformed to YX after rotate().
I would try to change the size of your original element, though I don't know if the library lets you specify in which sides are the labels going to be drawn.

I finally found a solution for the problem. But i had to change jqPlot library to achieve this. To help anyone else who run in to the same problem, i'll put my solution here.
First i had to insert the following code in to the jqPlot class of the jquery.jqplot.js file, which is the core library.
function jqPlot() {
//add the following code segment
var verticallyOriented = false;
this.setVertical = function(state){
verticallyOriented = state;
}
//don't change other code that isn't mentioned here
//now you have to change the logic in the getEventPosition function
//to make sure the new orientation is detected
function getEventPosition(ev) {
//change the line starting with var gridPos = ...
//to the following code segment
//depending on the orientation the event position calculating algorithm is changed
if(verticallyOriented){
var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
} else {
var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
}
//no change to other code is needed
}
}
You can view a working example here: http://jsfiddle.net/GayashanNA/yZwxu/
Gist for the changed library file: https://gist.github.com/3755694
Please correct me if i have done something wrong.
Thanks.