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.
Related
As the title suggests, when there is only one bar (can happen with more, but I prefer to focus on that problem), the bar is extremely small.
Here's my plotting code (the relevant part in my opinion):
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "uri";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.rotation = 315;
categoryAxis.tooltip.disabled = true;
categoryAxis.renderer.minHeight = 110;
categoryAxis.renderer.labels.template.adapter.add
("textOutput", function(text) {return text.substring(text.lastIndexOf("/")+1);});
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
valueAxis.logarithmic = true;
valueAxis.tooltip.disabled = true;
This happens when a category with a yAxis value that is close to 10, 100, 1000 and so on.
I would like the bar to be higher. What do I need to do?
How do I add bullets to all childrens in my treemap at once? I just found a way to do it for each level with:
var level1 = chart.seriesTemplates.create("0");
var level1_bullet = level1.bullets.push(new am4charts.LabelBullet());
level1_bullet.locationY = 0.5;
level1_bullet.locationX = 0.5;
level1_bullet.label.text = "{name}";
level1_bullet.label.fill = am4core.color("#fff");
I am okay all the line types under graph but I don't need their vertical represents
morever I have only one axis and yaxis values in my chart but multiple lines.
How can I customize this amchart sample or find any suitable chart for my need?
Practically every component in the chart has a disabled property that you can use to hide or reveal. To get rid of the line and labels, simply set the disabled property to true to remove them, similar to how the grid was disabled:
valueAxis.renderer.line.disabled = true; //disables axis line
valueAxis.renderer.labels.template.disabled = true; //disables labels
valueAxis.renderer.grid.template.disabled = true; //disables grid
Demo:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Increase contrast by taking evey second color
chart.colors.step = 2;
// Add data
chart.data = generateChartData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// Create series
function createAxisAndSeries(field, name, bullet) {
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tensionX = 0.8;
var interfaceColors = new am4core.InterfaceColorSet();
switch(bullet) {
case "triangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 12;
bullet.height = 12;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var triangle = bullet.createChild(am4core.Triangle);
triangle.stroke = interfaceColors.getFor("background");
triangle.strokeWidth = 2;
triangle.direction = "top";
triangle.width = 12;
triangle.height = 12;
break;
case "rectangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 10;
bullet.height = 10;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var rectangle = bullet.createChild(am4core.Rectangle);
rectangle.stroke = interfaceColors.getFor("background");
rectangle.strokeWidth = 2;
rectangle.width = 10;
rectangle.height = 10;
break;
default:
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = interfaceColors.getFor("background");
bullet.circle.strokeWidth = 2;
break;
}
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
}
createAxisAndSeries("visits", "Visits", "circle");
createAxisAndSeries("views", "Views", "triangle");
createAxisAndSeries("hits", "Hits", "rectangle");
// Add legend
chart.legend = new am4charts.Legend();
// Add cursor
chart.cursor = new am4charts.XYCursor();
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);
firstDate.setHours(0, 0, 0, 0);
var visits = 1600;
var hits = 2900;
var views = 8700;
for (var i = 0; i < 15; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
hits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
views += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
chartData.push({
date: newDate,
visits: visits,
hits: hits,
views: views
});
}
return chartData;
}
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
multiple-value-axes remove 3rd axis from chart.
Only two axis will show.
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;
I was trying out the code from this site: http://bl.ocks.org/bycoffe/3230965
I keep having the error that "n is undefined".
Upon further scaling down, i have come to the conclusion that the problem is with these lines:
(function() {
var width = 800;
var height = 700;
var padding = 10;
var k;
var node;
var pixelLoc = d3.geo.mercator();
pixelLoc.scale(2000);
svg = d3.select('#map')
.append('svg:svg')
.attr('width', width)
.attr('height', height);
d3.json('coordinates.json', function(coordinates) {
var coords = [];
var xs = [];
var ys = []
for (alias in coordinates) {
coords.push(coordinates[alias]);
xs.push(coordinates[alias][0]);
ys.push(coordinates[alias][1]);
}
var minX = d3.min(xs);
var maxX = d3.max(xs);
var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);
var minY = d3.min(ys);
var maxY = d3.max(ys);
var yScale = d3.scale.linear().domain([minY, maxY]).range([-20, -10]);
d3.json('medals.json', function(medals) {
var pointScale = d3.scale.sqrt().domain([0, 80]).range([0, 75]);
nodes = []
for (i=0; i<medals.length; i++){
node = medals[i];
node.coordinates = coordinates[node.alias];
node.cx = xScale(pixelLoc(node.coordinates)[0]);
}
})
The issue arises with the last line:
node.cx = xScale(pixelLoc(node.coordinates)[0]);
However, I still have no idea what do they mean by "n is undefined". Anybody able to help?
If you are using d3.min :
Change the library from d3.min.js to d3.js you will probably find out that the error changes to
TypeError: array is undefined
Which means the functions min and max don't work propperly .
var minX = d3.min(xs);
//Change this for actual min value and max for actual max value and it should work.