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.
Related
I am trying to draw Reversed Value Axis of Amchart.
It prints error "Data fields for series "Currency" are not properly defined".
I think there is some problem with text-base y axis.
Here is my code:
function XYChart() {
let myData = [
{
year: "2008",
label: "COLOCATION",
},
// other objects
];
useEffect(() => {
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = myData;
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "year";
xAxis.renderer.opposite = false;
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yAxis.dataFields.category = "label";
yAxis.renderer.inversed = false;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.labels.template.disabled = true;
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "label";
series1.dataFields.categoryX = "year";
series1.name = "Currency";
series1.strokeWidth = 3;
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{name} in {categoryX}: {valueY}";
series1.legendSettings.valueText = "{valueY}";
series1.visible = false;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomY";
chart.legend = new am4charts.Legend();
});
return (
<div id="XYChartDiv"></div>
);
}
export default XYChart;
For dual category axes, you need to set your series dataFields to categoryX and categoryY - your code is using valueY, which only applies to value axes.
My issue is returning the values saved in a database to the form in each cell in the range. The saveToDB script below is able to save the values from the form to the database, but I don't know how to retrieve those values. Hope you could help me. Thanks so much!
Form: sample form
Database: database sample
function saveToDB(){
range = ["C2","C4","C6"]
var newRange = range.map(f => formSheet.getRange(f).getValue())
dbSheet.appendRow(newRange)
}
function loadToForm(){
range = ["C2","C4","C6"]
var dbArray = dbSheet.getRange(2,1,dbSheet.getLastRow(),dbSheet.getLastColumn()).getValues()
var newArray = dbArray.filter(function(row){
if(row[0] === "Fred" && row[0] !== -1){
return row !== ""
}
})
//Don't know how to return each value to each cell in the range
//Update - this is the code that did it
range.map((f,i) => formSheet.getRange(f).setValue(newArray[0][i]))
}
function saveToDB() {
const ss = SpreadsheetApp.getActive();
const fsh = ss.getSheetByName('Form Sheet Name');
const dsh = ss.getSheetByName('Database Sheet Name')
let arr = ["C2", "C4", "C6"].map(e => fsh.getRange(e).getValue());
dsh.appendRow(arr);
}
function loadToForm() {
const range = ["C2", "C4", "C6"];
const ss = SpreadsheetApp.getActive();
const dsh = ss.getSheetByName('Database Sheet Name');
const fsh = ss.getSheetByName('Form Sheet Name');
let r = SpreadsheetApp.getUi().prompt('Row Number','Enter Row Number', SpreadsheetApp.getUi().ButtonSet.OK_CANCEL);
if(r.getSelectedButton() == SpreadsheetApp.getUi().Button.OK) {
let vs = dsh.getRange(row, 1, 1, dsh.getLastColumn()).getValues()[0];
range.forEach((e,i) => { fsh.getRange(e).setValue(vs[i])
});
}
}
All you have to do is use the setValue() function and iterate through each cell like so:
function loadToForm(){
range = ["C2","C4","C6"]
var dbArray = dbSheet.getRange(2,1,dbSheet.getLastRow(),dbSheet.getLastColumn()).getValues()
var newArray = dbArray.filter(function(row){
if(row[0] === "Fred" && row[0] !== -1){
return row !== ""
}
})
//Remove useless extra dimension from array
newArray = newArray[0];
//Solution 1 using RangeList
var ranges = formSheet.getRangeList(range).getRanges();
for(var i in newArray){
ranges[i].setValue(newArray[i]);
}
//Solution 2 not using RangeList
for(var i in newArray){
formSheet.getRange(range[i]).setValue(newArray[i]);
}
}
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/
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 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.