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
Related
I am using ApexCharts in React to create a line chart with two series, representing 'Current Year' and 'Last Year' for direct comparison. The Y axis displays a percentage and the X axis runs 'Jan' to 'Dec', with monthly data points.
I am new to React and struggling to find how to apply the 'forecastDataPoints' property to just the 'Current Year' series. I can easily apply it to both series by using it within 'options' but this applies it to both series:
options: {
chart: {
height: 350,
type: 'line',
},
colors: ['#172774','#F1B44C'],
forecastDataPoints: {
count: 3
},
I assumed the way to achieve this is to put the forecastDataPoints property within the series, but this doesn't work:
this.state = {
series: [{
name: 'Curremt Year',
data: [11, 24, 46, 62, 54, 52, 61, 67, 71, 78, 81, 83],
forecastDataPoints: {
count: 3
},
},
{
name: 'Last Year',
data: [5, 14, 12, 22, 25, 31, 39, 42, 45, 51, 52, 51],
},
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;
I'm very new to programming and I'm having trouble with the more complex aspects. I am trying to use a data set called playerCameCards and randomly add 5 of these to playerCards. I have managed to do that but I want to display name: of the last added element but I can't figure out how to do it. I'd be grateful for some help Below is my code.
import Foundation
import SwiftUI
class Cards: ObservableObject {
#Published var playerCards = [gameCards]()
#Published var playerGameCards = [
gameCards(id: 1, name: "name1", attack: 92, defence: 49, gameControl: 60, creativity: 72, legend: 4),
gameCards(id: 2, name: "name2", attack: 87, defence: 40, gameControl: 65, creativity: 80, legend: 2),
gameCards(id: 3, name: "name3", attack: 43, defence: 93, gameControl: 40, creativity: 45, legend: 3),
gameCards(id: 4, name: "name4", attack: 88, defence: 51, gameControl: 80, creativity: 92, legend: 5),
gameCards(id: 5, name: "name5", attack: 85, defence: 51, gameControl: 72, creativity: 81, legend: 3),
gameCards(id: 6, name: "name6", attack: 91, defence: 38, gameControl: 72, creativity: 89, legend: 5),
gameCards(id: 7, name: "name7", attack: 34, defence: 95, gameControl: 40, creativity: 50, legend: 5),
gameCards(id: 8, name: "name8", attack: 86, defence: 63, gameControl: 89, creativity: 84, legend: 4),
gameCards(id: 9, name: "name9", attack: 90, defence: 30, gameControl: 50, creativity: 83, legend: 5),
gameCards(id: 10, name: "name10", attack: 32, defence: 92, gameControl: 42, creativity: 32, legend: 4)
]
}
struct gameCards: Identifiable {
let id: Int
let name: String
let attack: Int
let defence: Int
let gameControl: Int
let creativity: Int
let legend: Int
}
import SwiftUI
struct ContentView: View {
#EnvironmentObject var cardData: Cards
#State var firstTime: Bool = false
#State var currentCard: String = "Back"
var body: some View {
ZStack{
VStack{
Spacer()
Text("Lets open your 1st cards").background(Color.white).font(.title)
Spacer()
Below is where I want show the name e.g. "name1" from the last element added to my playerCards array. I may want to make this an image in the future and use the ID: to display the corresponding image but I'm unable to access the types in my array
Text("I want to show the "name" of the element in the last array I've just used").frame(width: 200, height: 200).background(Color.blue)
Spacer()
Button(action:{
if self.cardData.playerCards.count <= 4{
self.cardData.playerCards.append(self.cardData.playerGameCards.randomElement()!)
print("\([self.cardData.playerCards.last])")
}
if self.cardData.playerCards.count > 4 {
self.firstTime = true
}
}){
if self.cardData.playerCards.count <= 4 {
Image("Click").renderingMode(.original).resizable().frame(width: 100, height: 100)
}
else{
NavigationLink(destination: ContentView()){Image("Continue").renderingMode(.original).resizable().frame(width: 100, height: 100)
}
}
}
}
}
}
}
This is how to embed a value in a String in Swift:
if self.cardData.playerCards.last != nil {
Text("I want to show the \(self.cardData.playerCards.last!.name) of the element in the last array I've just used")
}
I have a chart built with react-chartjs-2. The chart displays when I enter the values for data directly in the datasets like this.
datasets: [
{
label: "Active Countries",
backgroundColor: gradientFill,
borderColor: "#2CA8FF",
pointBorderColor: "#FFF",
pointBackgroundColor: "#2CA8FF",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
borderWidth: 1,
data: [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155]
}
]
However, I want to replace the value of the data in the datasets with a monthly transaction derived from transactions recorded in my database. The code for my total transaction for each month Jan to Dec ( One for each month) is like this.
const januaryTransactions = transactions.filter(i => {
const date = new Date(i.date);
return date.getMonth() === January && date.getYear() === relevantYear;
}).reduce((prev, curr) => prev + parseFloat(curr.amount), 0)
My question is how do I replace for example the value at in index 0 [80, 99, 86, 96, 123, 85, 100, 75, 88, 90, 123, 155] which is 80 with januaryTransactions .
Any Pointers are mostly appreciated!!
The angularjs-slider should display values without commans, and only on the min max values display comma values.
Example: [6.5, 7, 8, .... , 31, 31.5]
If I set
$scope.slider = {
value: 31.5,
options: {
floor: 6.5,
ceil: 31.5,
step: 1,
precision: 1
}
};
the values are [6.5, 7.5, 8.5 ... 31.5]
How can I set this?
Found it: i have to set the stepsArray option, with the values I want to select.
Example:
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
var vm = this;
vm.priceSlider = {
value: 31.5,
options: {
floor: 6.5,
ceil: 31.5,
step: 1,
precision: 1,
stepsArray: [6.5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 31.5]
}
}
}
Fiddler: http://jsfiddle.net/w3ve98eL/1/