I am using amcharts in the React Hooks environment.
I'm using force-directed-tree.
https://www.amcharts.com/demos/force-directed-tree/
The data applied to the chart is filtered based on high values and then reapplying.
Every time the data is reapply, the chart is rendered and the animation continues to be applied.
How to remove animation when loading charts
Or we would appreciate it if you could tell us how to apply the scrollbar provided by amcharts to this chart.
useEffect(() => {
const chart = am4core.create('networkChart', am4plugins_forceDirected.ForceDirectedTree);
const networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
chart.data = data;
chart.dataSource.updateCurrentData = true;
chart.animationPlayed = true;
chart.dataSource.reloadFrequency = 1000;
networkSeries.dataFields.id = 'name';
networkSeries.dataFields.value = 'value';
networkSeries.dataFields.name = 'name';
networkSeries.dataFields.children = 'children';
networkSeries.nodes.template.tooltipText = '{name}:{value}';
networkSeries.nodes.template.fillOpacity = 1;
networkSeries.manyBodyStrength = -20;
networkSeries.links.template.strength = 0.8;
networkSeries.links.template.distance = 1;
networkSeries.minRadius = am4core.percent(3);
networkSeries.maxRadius = am4core.percent(10);
networkSeries.nodes.template.label.text = '{name}';
networkSeries.fontSize = 12;
networkSeries.maxLevels = 4;
networkSeries.events.disableType('inited', function() {
networkSeries.animate(
{
property: 'velocityDecay',
to: 1,
},
3000,
);
});
// Add Legend
chart.legend = new am4charts.Legend();
chart.legend.labels.template.fill = am4core.color('#fff');
}, [data]);
I didn't want the these to be used, so I used the unuseTheme and passed the animation theme to it. This removed the animations with respect to the chart.
Example:
am4core.unuseTheme(am4themesAnimated);
To Add scrollbar
let chart = am4core.create("chartdiv", am4charts.XYChart);
...
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(networkSeries);
chart.scrollbarX = scrollbarX;
https://www.amcharts.com/docs/v4/tutorials/customizing-chart-scrollbar/
Related
In the UI I am having a div that contains preview text of a blogpost.
I am trying to maintain the box-shadow while drawing this div element as an image using HTML canvas. How I can achieve that?
Code I am using to draw as image:
let scaledElement = document.getElementById("screenRef");
let canvas = await html2canvas(scaledElement);
let croppedCanvas = document.createElement("canvas");
let croppedCanvasContext = croppedCanvas.getContext("2d");
let cropPositionTop = 0;
let cropPositionLeft = 0;
let cropWidth = canvas.width;
let cropHeight = canvas.height;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
let dataUrl = croppedCanvas.toDataURL();
And the result I am getting as of now:
Here is how I have achieved it.
let croppedCanvas = document.createElement("canvas");
let croppedCanvasContext = croppedCanvas.getContext("2d"); // init data
let cropPositionTop = CANVAS.OFFSET_POSITION;
let cropPositionLeft = CANVAS.OFFSET_POSITION;
let cropWidth = canvas.width;
let cropHeight = canvas.height;
croppedCanvas.width = cropWidth + CANVAS.PADDING; //for getting space around main image
croppedCanvas.height = cropHeight + CANVAS.PADDING; //for getting space around main image
var grd = croppedCanvasContext.createLinearGradient(
CANVAS.START_X,
CANVAS.START_Y,
croppedCanvas.width,
croppedCanvas.height
);
grd.addColorStop(colorStop.stop, colorStop.color);
croppedCanvasContext.fillStyle = grd;
croppedCanvasContext.fillRect(
CANVAS.START_X,
CANVAS.START_Y,
croppedCanvas.width,
croppedCanvas.height
);
croppedCanvasContext.shadowOffsetX = CANVAS.START_X;
croppedCanvasContext.shadowOffsetY = CANVAS.START_Y;
croppedCanvasContext.shadowBlur = CANVAS.SHADOW_BLUR;
croppedCanvasContext.shadowColor = CANVAS.SHADOW_COLOR;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
Im using AnyGantt, but Im having problems setting it up correctly.
Here is the full code:
var endpoint = '/api/chart/data/'
var label = []
var start = []
var end = []
var werk = []
$.ajax({
method: 'GET',
url: endpoint,
success: function(data){
labels = data.label
start = data.start
end = data.end
uplant = data.werk
var obj = {}
var finalArray = []
for (var i = 1; i <= start.length; i++) {
var first = { id: i, name: uplant[i] }
obj = { ...obj, ...first }
var periods = { id: labels[i], start: start[i - 1], end: end[i - 1] }
if (obj.periods) {
obj.periods.push(periods)
} else {
obj.periods = [periods]
}
finalArray.push(obj)
}
anychart.onDocumentReady(function () {
var data = finalArray;
var treeData = anychart.data.tree(data, "asTable");
chart = anychart.ganttResource();
chart.data(treeData);
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
var dataGrid = chart.dataGrid();
dataGrid.column(0)
.title('#')
.width(30)
.cellTextSettings({hAlign: 'center'});
dataGrid.column(1)
.title('Werk')
.width(60)
.cellTextSettings({hAlign: 'left'})
.format(function () {
return this.name;
});
chart.getTimeline().horizontalScrollBar().enabled(true);
/* chart.getTimeline().periods().edit(true); */
chart.getTimeline().edit(true);
chart.getTimeline().tooltip(false);
chart.getTimeline().elements().labels(false);
chart.container("containerx");
chart.draw();
chart.fitAll();
});
},
error:function(error_data){
console.log("error")
console.log(error_data)
}});
I can't click and move the periods (tasks) and I cant scroll.
Thank you very much for any suggestions
Please find below a screenshot of the chart:
Please find below a screenshot of the chart:
Scale range
You are applying the scale min/max correctly:
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
But then you override the default scale and it drops the min/max settings:
var dateTimeScale = anychart.scales.dateTime();
var dateTimeTicks = dateTimeScale.ticks();
chart.xScale(dateTimeScale);
There's no need to do this! The default Gantt Chart is already a dateTime type. Solution - simply remove those three lines above from your code.
LiveEdit
Your line chart.getTimeline().periods().edit(true); is correct, but due to a little bug in the current version 8.7.0 (Aug 2019) this setter doesn't work for types of elements. To avoid it replace this line with the following line chart.getTimeline().edit(true);.
Scrollers
The Gantt chart doesn't support x/yScrollers, only simple scroll bars.
The following methods the Gantt chart doesn't support:
chart.xScroller(true);
chart.yScroller(true);
For zooming, you can use one of the API functions. This subject is described in detail in the Gantt zooming article.
Single GLTF element i can drag and drop. but group of element i can't drag. I am using following code
var loader = new THREE.GLTFLoader();
loader.load( 'W3030/W3030.gltf', ( gltf ) => {
gltf.scene.traverse( function( child ) {
if(child.type === "Group")
{
newObject = true;
GLTFobjects.push(child);
}
if ( child.isMesh ) {
child.receiveShadow = true;
child.castShadow = true;
child.material.transparent = true;
child.material.opacity = 1;
}
});
scene.add(GLTFobjects);
gltf.scene.scale.set(1, 1, 1);
});
I'm afraid instances of Group are not supported by DragControls since there is no Group.raycast() method.
You can implement a workaround by replacing groups with invisible meshes. However, instead of setting Object3D.visible to false, you do this for Material.visible. Otherwise the raycasting logic will not perform the intersection test. It's then necessary to use a geometry that is large enough to enclose the respective children.
three.js R110
Hi Thanks for your support. Now i drag.
Use following code to drag multi mesh GLTF. It is Work for me.
var dragobjects =[];
//add following code in init function
var gltfobject = addGLTFObjectIntoScene();
scene.add(gltfobject);
dragControls = new THREE.DragControls(dragobjects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', onDragStart, false);
dragControls.addEventListener('drag', onDrag , false);
dragControls.addEventListener('dragend', onDragEnd, false);
//end init function code
//add following function after or before init function
function drawBox(objectwidth,objectheight,objectdepth){
var geometry, material, box;
geometry = new THREE.BoxGeometry(objectwidth,objectheight,objectdepth);
material = new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true, opacity: 0,depthTest:false});
box = new THREE.Mesh(geometry, material);
dragobjects.push(box);
box.position.set(0, 0, 0);
return box;
};
function addGLTFObjectIntoScene(){
group = new THREE.Group();
var loader = new THREE.GLTFLoader();
loader.load( 'W1230/W1230.gltf', ( gltf ) => {
mesh = gltf.scene;
mesh.scale.set( 30, 30, 30);
var gltfbox = new THREE.Box3().setFromObject( mesh );
var objectwidth = Math.floor(gltfbox.getSize().x);
var objectheight = Math.floor(gltfbox.getSize().y);
var objectdepth = Math.floor(gltfbox.getSize().z);
objectwidth = objectwidth + parseInt(2);
objectheight = objectheight + parseInt(2);
objectdepth = objectdepth + parseInt(1);
mesh.position.set(0, -objectheight/2, 0);
box = drawBox(objectwidth,objectheight,objectdepth);
group.add(box);
group.name = "quadrant";
console.log(mesh);
box.add( mesh);
});
return group;
};
I am working o an AngularJs Application where I am using AmCharts.
const writeemp = data => {
const {
total,
employees,
} = data;
empChart.dataProvider = e;
empChart.write('emp');
empChart.validateData();
};
AmCharts.handleLoad();
var configChart = function () {
empChart = new AmCharts.AmSerialChart();
empChart.categoryField = "state";
empChart.labelRotation = 90;
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
empChart.addValueAxis(yAxis);
empBarGraph = new AmCharts.AmGraph();
empBarGraph.valueField = "count";
empBarGraph.type = "column";
empBarGraph.fillAlphas = 1;
empBarGraph.lineColor = "#f0ab00";
empBarGraph.valueAxis = yAxis;
empChart.addGraph(empBarGraph);
empChart.write('empChart');
$http.get(hostNameService.getHostName()+"/dashboard/employees/statecount")
.then(response => writeemp(response.data));
}
Code in html:
<div class='panel-body'>
<div id="empChart"></div>
</div>
This would return me the values of State on x-axis and count on y-axis. I wanted to add checkboxes which would filter my data in the chart. Each check box should represent the 'state' of the employee. If I uncheck a box then the data displayed should change in the chart. Can anyone let me know how I could achieve this.
I am using amCharts to display some data and calling this in my init function. The following is my code:
export default class ACtrl {
constructor($scope, $http, $state) {
var sampleCharts = function () {
let sampleChart;
let sampleBarGraph;
let sampleLine;
const writeAlarmsample = data => {
const {
total,
users
} = data;
// Set cumulative percentage
let runningTotal = 0;
users.forEach(user => {
runningTotal += user.assetAvailability;
user.cumulativePercentage = runningTotal / total * 100;
});
sampleChart.dataProvider = users;
sampleChart.write('userAvailability');
sampleChart.validateData();
};
function handleClick(event){
$state.go("app.userdetails", { userID: event.item.category });
}
// Alarm sample
AmCharts.ready(() => {
sampleChart = new AmCharts.AmSerialChart();
sampleChart.categoryField = "assetId";
//add click listener
sampleChart.addListener("clickGraphItem", handleClick);
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "left";
sampleChart.addValueAxis(yAxis);
var yAxis2 = new AmCharts.ValueAxis();
yAxis2.position = "right";
sampleChart.addValueAxis(yAxis2);
sampleBarGraph = new AmCharts.AmGraph();
sampleBarGraph.valueField = "userAvailability";
sampleBarGraph.type = "column";
sampleBarGraph.fillAlphas = 1;
sampleBarGraph.lineColor = "#f0ab00";
sampleBarGraph.valueAxis = yAxis;
sampleChart.addGraph(sampleBarGraph);
sampleLine = new AmCharts.AmGraph();
sampleLine.valueField = "cumulativePercentage";
sampleLine.type = "line";
sampleLine.lineColor = "#cb0044";
sampleLine.valueAxis = yAxis2;
sampleChart.addGraph(sampleLine);
sampleChart.write('userAvailability');
$http.get(constants.LOCAL_HOST+"/dashboard/users")
.then(response => writeAlarmsample(response.data));
});
};
$scope.init = function() {
availabilityCharts();
};
})
}
The charts load fine when I hit the refresh button, but they are not loaded when the page gets loaded for the first time. I also have a refresh button which calls the function to load the charts even that does not load the charts. If I click on one of the chart items it takes me to details page and when I come back to this page the charts do not load. I have to click on refresh again to load the charts. Can anyone let me know what is the reason for this issue and how I can fix it.