Related
curious if there is a way to get the proper index on stacked data (such as a Waterfall diagram) from AnyChart. Using the below on a waterfall gets you the same index for anything click on in a specific stack, when really there should be two index numbers (the column index and the element index within that column).
// add a listener
chart.listen("pointClick", function(e){
var index = e.iterator.getIndex();
});
Thanks
You can get the element index through e.target.getIndex().
anychart.onDocumentReady(() => {
let data = anychart.data.set([
["Start", 23, 30, 21],
["Jan", 22, 22, 54],
["Feb", -46, 45, -32],
["Mar", -91, -30, -28],
["Apr", 37, -27, 36],
["May", -24, 62, -48],
["Jun", 55, 40, -29],
["Jul", 31, 33, 41],
["Aug", -25, -46, 36],
["Sep", 42, 23, 22],
["Oct", 67, -44, -40],
["Nov", -24, -31, 37],
["Dec", 51, 28, 25],
["End", { isTotal: true }, { isTotal: true }, { isTotal: true }],
]);
let seriesData_1 = data.mapAs({ x: 0, value: 1 }),
seriesData_2 = data.mapAs({ x: 0, value: 2 }),
seriesData_3 = data.mapAs({ x: 0, value: 3 });
let chart = anychart.waterfall();
let series1 = chart.waterfall(seriesData_1),
series2 = chart.waterfall(seriesData_2),
series3 = chart.waterfall(seriesData_3);
chart.labels().position("center");
chart.labels().fontColor("white");
chart.listen("pointClick", e => {
let columnIndex = e.iterator.getIndex(),
elementIndex = e.target.getIndex(); // <--- HERE
console.log(`Column index: ${columnIndex}`);
console.log(`Element index: ${elementIndex}`);
});
chart.container("container");
chart.draw();
});
#container {
width: 100%;
height: 350px;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-waterfall.min.js"></script>
<div id="container"></div>
The example above is a modified version of what you can find there: Waterfall Chart | Basic Charts | AnyChart Documentation
I have recently created grid in UI and I want to show the complete flow of motion for all the points given by the array. However, the UI was updated with the value in the last loop.
For ex: position = [1, 2, 3]
At the initial point '1', there is a circle
then the circle move to 2 -> then 3
Instead, moving from 1 to 3
Can anybody help me to achieve this?
My whole class is as follows,
import React, { useEffect, useState } from 'react';
import { Button } from 'reactstrap';
import { motion } from "framer-motion";
import './style.css';
import Grid from './grid'
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
idOfBegin: "1",
position: 0,
xAxis: 0,
yAxis: 0,
position: [],
arrOfObj: [100, 99, 98, 97, 96, 95, 94, 93, 92, 91,
81, 82, 83, 84, 85, 86, 87, 88, 89, 90,
80, 79, 78, 77, 76, 75, 74, 73, 72, 71,
61, 62, 63, 64, 65, 66, 67, 68, 69, 70,
60, 59, 58, 57, 56, 55, 54, 53, 52, 51,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50,
40, 39, 38, 37, 36, 35, 34, 33, 32, 31,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
20, 19, 18, 17, 16, 15, 14, 13, 12, 11,
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
]
};
}
start = () => {
var a = document.getElementById("3");
var codinates = a.getBoundingClientRect();
var x = codinates.left + 35;
var y = codinates.top + 5;
console.log(x, y);
this.setState({ xAxis: x });
this.setState({ yAxis: y });
}
loadPosition = async (event) => {
fetch('api/groups')
.then(response => response.json())
.then(data => {
//console.log('======== ' +data);
//groups.map(group => setPosition(group));
this.setState({ position: data });
});
}
getCellValue = async (event) => {
this.loadPosition();
this.state.position.forEach(p => {
console.log('====== ' + p);
if (p != null) {
var a = document.getElementById(p);
var codinates = a.getBoundingClientRect();
var x = codinates.left + 35;
var y = codinates.top + 5;
//console.log(x,y);
this.setState({ xAxis: x });
this.setState({ yAxis: y });
}
});
}
componentDidMount() {
this.setState({ xAxis: 45 });
this.setState({ yAxis: 905 });
}
render() {
return (
<div>
<div className="grid"><Grid arrOfObj={this.state.arrOfObj} />
<motion.div animate={{ x: this.state.xAxis, y: this.state.yAxis }}
transition={{ type: "tween", duration: 1 }}
></motion.div>
</div>
<div className="control">
<Button color="primary" onClick={() => this.start()}>Start</Button>
<Button color="primary" onClick={() => this.getCellValue()}>Roll Dice</Button>
</div>
</div>
);
}
}
export default Game;
How do I aggregate in Angular multiple arrays into one? I don't want to concatenate/merge them, but keep them separated with a comma.
var data1 = [65, -59, 80, 81, -56, 55, -40];
var data2 = [28, 48, -40, 19, 86, 27, 90];
Expected:
data = [
[65, -59, 80, 81, -56, 55, -40],
[28, 48, -40, 19, 86, 27, 90]
];
This is not an Angular questions but a javascript question, and while there are many ways to solve this, I will give you one.
var mergedData = [];
var data1 = [65, -59, 80, 81, -56, 55, -40];
var data2 = [28, 48, -40, 19, 86, 27, 90];
mergedData.push(data1);
mergedData.push(data2);
The variable mergedData will now contain
[
[65, -59, 80, 81, -56, 55, -40],
[28, 48, -40, 19, 86, 27, 90]
]
You can create a new array to hold the data, and then just push your arrays into that new array like this:
var data = []
data.push(data1,data2)
I am new to Angular Charts and don't have a clue how to to connect the endpoint JSON data to the graph. I followed the instructions in AngularCharts to populate the bar chart with rough data.
HTML :
<div class="row">
<div class="span12">
<div class="widget widget-nopad">
<div class="widget-header">
<i class="icon-list-alt"></i>
<h3> Skills</h3>
</div>
<!-- /widget-header -->
<div class="widget-content" style="padding:5px;" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas></div>
</div>
</div>
</div>
Controller :
myApp.controller('BarCtrl', ['$scope', 'reportServices', function ($scope, reportServices) {
reportServices.getSkillsReport().then(function (result) {
$scope.data = result.data;
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
}]);
The output of the endpoint is :
{
".Net": 4,
"Java": 3,
"JavaScript": 5,
"ASP.NET": 2,
"Banking": 2,
"Personal Skills": 6
}
Can someone please show me how to connect this data to the current default bar chart? Also I don't want the second series of bar in the chart.
Suppose, your endpoint object is myobject :
var myobject = { ".Net": 4, "Java": 3, "JavaScript": 5, "ASP.NET": 2,"Banking": 2,"Personal Skills": 6}
$scope.labels = [];
$scope.series = ['Series A'];
$scope.data = [];
$scope.datavalues = [];
for(i in myobject) {
$scope.labels.push(i)
$scope.datavlues.push(myobject[i])
}
$scope.data = [$scope.datavalues]
I'm using the array shuffle function from here: http://iosdevelopertips.com/swift-code/swift-shuffle-array-type.html.
On this line:
for var index = array.count - 1; index > 0; index -= 1
in the code below
func shuffleArray<T>( arrayparam: Array<T>) -> Array<T>
{
var array = arrayparam
for var index = array.count - 1; index > 0; index -= 1
{
// Random int from 0 to index-1
let j = Int(arc4random_uniform(UInt32(index-1)))
// Swap two array elements
// Notice '&' required as swap uses 'inout' parameters
swap(&array[index], &array[j])
}
return array
}
Swift throws this warning:
C-style for statement is deprecated and will be removed in a future
version of Swift
There isn't any recommendation of what should be used here. Any ideas what should replace it?
take a look at http://bjmiller.me/post/137624096422/on-c-style-for-loops-removed-from-swift-3
only decrease by 1:
for i in (0...n).reverse() {
}
or
decrease by more steps:
for i in someNum.stride(through: 0, by: -2) {
}
More info: there are two versions for stride: through and to. Difference is <= and >= for through, while < and > for to, depending on what you need.
func shuffle<T>(array: Array<T>) -> Array<T> {
var result = array
for index in array.indices.reverse() {
// generate random swapIndex and add a where clause
// to make sure it is not equal to index before swaping
guard
case let swapIndex = Int(arc4random_uniform(UInt32(array.count - index))) + index
where index != swapIndex
else { continue }
swap(&result[index], &result[swapIndex])
}
return result
}
var arrInt = Array(1...100)
shuffle(arrInt) // [28, 19, 25, 53, 35, 60, 14, 62, 34, 15, 81, 50, 59, 40, 89, 30, 2, 54, 27, 9, 82, 21, 11, 67, 84, 75, 44, 97, 66, 83, 36, 20, 26, 1, 76, 77, 8, 13, 72, 65, 64, 80, 88, 29, 98, 37, 33, 70, 52, 93, 100, 31, 4, 95, 45, 49, 61, 71, 24, 16, 12, 99, 94, 86, 46, 69, 63, 22, 48, 58, 51, 18, 43, 87, 41, 6, 92, 10, 38, 23, 68, 85, 42, 32, 55, 78, 56, 79, 3, 47, 39, 57, 90, 17, 5, 73, 7, 91, 74, 96]
for var index = array.count - 1; index > 0; index -= 1
Use a reverse range. Form the range and reverse it:
for index in (1..<array.count).reverse
However, as discussed in my answer here, there's a nicer way; I provide a >>> operator so you can say
for index in array.count>>>1
why don't you try:
for var index = array.count - 1; index > 0; index =index-1 ;