I am trying to put a percent calculation in each column. How can I do this?
I have this for now:
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
var qtd = 0;
var sum = 0;
for(i=0;i<datas.length;i++){
sum[i] += Object.keys(datas[i]);
qtd = (qtd < Object.keys(datas[i]).length - 1) ? Object.keys(datas[i]).length - 1 : qtd;
}
console.log(Object.keys(datas));
for(j=1;j<qtd+1;j++){
datas[j].share = Math.round(datas[j].expenses / sum * 100);
var graph = new AmCharts.AmGraph();
graph.valueField = "expenses"+(j);
graph.balloonText = "[[category]]: <b>[[value]]</b> ([[share]]%)";
graph.labelText = "[[share]]%";
graph.labelPosition = "inside";
graph.type = "column";
graph.fillAlphas = 0.8;
chart.addGraph(graph);
}
https://jsfiddle.net/dayaners3/933t512e/
Related
In a Amcharts4 line chart, the chart fill color comes from 2 different places. Lineseries.propertyFields.fill and range.contents.fill.
I get a the color Hex value used by Lineseries.propertyFields.fill from a Ajax Call.
part of the back-end code:
if (temps == "2020-08-11T07:15:00.000Z") {Color = "#5476ff"};
JSlist.add(["value":prod,"date":temps,"lineColor":Color]);
writeJSON("myJSONAnswer": JSlist);
I then use series.propertyFields.fill = "lineColor"; to color specific areas of the graph.
This works well.
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
though I also want to color other ranges of the graph using range.contents.fill = am4core.color("#808080");
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-08-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 0.6;
//https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Using_with_series
If I comment these 3 lines, I can see the colored range. Otherwise it's overridden by it.
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
I want range.contents.fill = am4core.color("#808080"); to override series.propertyFields.stroke = "lineColor";
How can I do that?
I tried implementing your Amcharts code and it seems to be able to display the range just fine, although I have to change range.contents.fillOpacity value to 1 in order for it to be noticeable.
Try running the snippet and see if this is what you intended.
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
var date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value, lineColor: "#5476ff"});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fill = am4core.color("#808080");
range.contents.fillOpacity = 1;
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
EDIT: You can override the propertyFields property of series by creating a "ready" event listener and replacing the range.content colors AFTER the chart has been rendered.
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
var date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value, lineColor: "#5476ff", rangeColor: "#000000"});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.fillOpacity = 0.5;
series.propertyFields.stroke = "lineColor";
series.propertyFields.fill = "lineColor";
var range = dateAxis.createSeriesRange(series);
range.date = new Date("2020-08-11T09:00:00.000Z");
range.endDate = new Date("2020-10-11T09:30:00.000Z");
range.contents.stroke = am4core.color("#808080");
range.contents.fillOpacity = 1;
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
//Event listener to replace the content color after chart has been rendered, thus overriding propertyFields
chart.events.on("ready", () =>{
range.contents.children.values.forEach(item => {
item.stroke = am4core.color("#808080");
item.fill = am4core.color("#808080");
});
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
I have this little task to create a function graph using amCharts.
Thing is that I need the cursor enabled, but also the zoom disabled, so I can adjust the graph to a background image.
The documentation says that zoom is disabled with chart.zoomEnabled = false;, but it doesn't seem to work, and I don't know what could I be missing.
Thanks!
<style>
.graphContainer {
width: 500px;
height: 500px;
}
</style>
<script src="node_modules/ng"></script>
<script> let targetGroup =2; </script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div class = "graphContainer" id="divElasticidad"></div>
<script type="text/javascript">
let sensor = { "value": 85 };
let mostrarComoPorcentajes = true;
</script>
<script type="text/javascript">
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Check if use percent or full value
let ejeX = "X";
let ejeY = "Y";
if (mostrarComoPorcentajes){
ejeX = "x";
ejeY = "y";
}
// Create chart instance
var chart = am4core.create("divElasticidad", am4charts.XYChart);
chart.paddingRight = 20;
chart.zoomEnabled = false;
// Add data
let A = 1;
let data = [];
for (let i = 0; i < 1001; i++) {
data.push({
"x": i / 10,
"X": 1715.2 * i / 10 / 100,
"y": A * i/10,
"Y": A * 1715.2 * i / 10 / 100
});
}
let sensor = { "value": 85 }
let dataSensor = [{
"x": sensor.value,
"X": 1715.2 * sensor.value / 100,
"y": A * sensor.value,
"Y": A * 1715.2 * sensor.value / 100
}];
chart.data = data;
/* Background Image */
var image = chart.createChild(am4core.Image);
image.align = "center";
image.href = "imagenFondoFuncionElasticidad.png";
image.isMeasured = false;
image.width = am4core.percent(100);
image.height = am4core.percent(100);
image.x = am4core.percent(50);
image.y = am4core.percent(50);
image.zIndex = -1000;
image.horizontalCenter = "middle";
image.verticalCenter = "middle"
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = ejeX;
categoryAxis.renderer.minGridDistance = 50;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.min = -100;
categoryAxis.max = 1500;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.baseValue = 0;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = ejeY;
series.dataFields.categoryX = ejeX;
series.strokeWidth = 2;
series.tensionX = 0.77;
series.data = data;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = ejeY;
series2.dataFields.categoryX = ejeX;
series2.strokeWidth = 2;
series2.tensionX = 0.77;
series2.data = dataSensor;
let bullet2 = series2.bullets.push(new am4charts.Bullet());
let circle2 = bullet2.createChild(am4core.Circle);
circle2.width = 8;
circle2.height = 8;
circle2.horizontalCenter = "middle";
circle2.verticalCenter = "middle";
circle2.stroke = am4core.color("#999999");
circle2.strokeWidth = 2;
circle2.fill = am4core.color("#555555");
// bullet is added because we add tooltip to a bullet for it to change color
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.tooltipText = "{valueY}";
bullet.adapter.add("fill", function(fill, target) {
if (target.dataItem.valueY < 0) {
return am4core.color("#FF0000");
}
return fill;
})
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = -1000;
range.contents.stroke = am4core.color("#FF0000");
range.contents.fill = range.contents.stroke;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behaviour = "none";
});
</script>
There is no such property called zoomEnabled. You might be thinking of mouseZoomEnabled, which is a v3 property.
If you want to disable cursor zooming in v4, set the cursor behavior to "none" as documented here. Note that the property name is using the American English spelling of behavior, which does not have the u.
chart.cursor.behavior = "none";
This sources is get data from Ajax. I hope that the percentage value with price value will appear in the same space. I made a percentage axis, but the difference with the price axis is too big. This is because the price value is very bigger than the percentage value. How to fix it ?
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#,###";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
var valueAxis1 = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis1.renderer.opposite = true;
valueAxis1.guides = data.margin_percent;
valueAxis1.min = 0;
valueAxis1.max = 100;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
series.columns.template.height = am4core.percent(100);
series.sequencedInterpolation = true;
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueX}";
valueLabel.label.horizontalCenter = "left";
valueLabel.label.dx = 10;
valueLabel.label.hideOversized = false;
valueLabel.label.truncate = false;
var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.text = "{name}";
categoryLabel.label.horizontalCenter = "right";
categoryLabel.label.dx = -10;
categoryLabel.label.fill = am4core.color("#fff");
categoryLabel.label.hideOversized = false;
categoryLabel.label.truncate = false;
}
createSeries("year_sales", "sales");
createSeries("year_cost", "cost");
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueX = "margin_percent";
lineSeries.dataFields.categoryY = "year";
lineSeries.name = "margin";
lineSeries.stroke = am4core.color("#fdd400");
lineSeries.strokeWidth = 3;
lineSeries.tooltipText = "margin in {categoryY}: {valueX.value}";
I have a js file which uses amchart,
I'm having a problem of total percentage in Donut chart not having the value as 100%.
I followed their doc AmPieChart#adjustPrecision
But still even after setting
charti.adjustPrecision= true; the total percentage is not tallied to 100%
Below is my piece of code.
chart = new AmCharts.AmPieChart();
chart.colors = ["#7498BF", "#76B900"];
if(combineRow){
chart.groupPercent = 5;
}
chart.startDuration = 0;
chart.dataProvider = dataJson;
chart.titleField = "category";
chart.descriptionField = "description";
chart.valueField = "amount";
chart.radius = "30%";
chart.outlineThickness = 2;
chart.sequencedAnimation = false;
chart.startEffect = "bounce";
chart.startRadius="30";
chart.colorField = "color";
chart.startDuration = 0;
chart.innerRadius = "30%";
chart.labelsEnabled = false;
chart.labelRadius = "-1";
chart.hideLabelsPercent="3";
chart.balloonText="[[description]]: [[percents]]% ($[[value]])";
chart.adjustPrecision= true;
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.markerType = "square";
legend.markerLabelGap = 5;
legend.markerSize = 12;
legend.marginTop = 0;
legend.marginBottom = 0;
legend.spacing = 20;
legend.position = "right";
legend.fontSize = 10;
legend.valueText = "[[percents]]%";
legend.valueWidth = 83;
chart.addLegend(legend);
chart.addListener("clickSlice", callBackFunction);
chart.write(containerId);
Can you help me out?
I am new on EaselJS and I want to create an eraser as brush. This is what I am using for drawing but I want to do the same thing with transparent.
//brush tool
var brush = new createjs.Bitmap(app.loader.getResult('brush'));
brush.name = 'brush';
brush.x = 50;
brush.y = -34;
brush.addEventListener('click', this.brushHandler);
this.toolsContainer.addChild(brush);
this.brushSizes = new createjs.Container();
this.brushSizes.x = brush.x + 40;
this.brushSizes.y = brush.y - 20;
this.brushSizes.visible = false;
this.toolsContainer.addChild(this.brushSizes);
for(var p = 0; p < this.sizes.length; p++){
var size = new createjs.Shape();
size.name = 'size'+p;
size.graphics.beginFill('#FFFFFF');
size.graphics.drawCircle(0,0,this.sizes[p]);
size.addEventListener('click', this.brushHandler);
size.x = (p==1) ? p * 40 : p * 45;
this.brushSizes.addChild(size);
}