Related
In Swift Charts the signature for chartForegroundStyleScale to set the ShapeStyle for each data series is:
func chartForegroundStyleScale<DataValue, S>(_ mapping: KeyValuePairs<DataValue, S>) -> some View where DataValue : Plottable, S : ShapeStyle
The KeyValuePairs initialiser (init(dictionaryLiteral: (Key, Value)...)) only takes a variadic parameter so any attempt to initialise a foreground style from an array (in my case <String, Color>) results in the error:
Cannot pass array of type '[(String, Color)]' as variadic arguments of type '(String, Color)'
In my application the names of the chart series are set dynamically from the data so although I can generate a [String : Color] dictionary or an array of (String, Color) tuples I can't see that it's possible to pass either of these into chartForegroundStyleScale? Unless I'm missing something this seems like a odd limitation in Swift charts that the series names need to be hard coded for this modifier?
OK I've found an approach that works as long as an arbitrary limitation to the number of entries is acceptable (example below with max size of 4:
func keyValuePairs<S, T>(_ from: [(S, T)]) -> KeyValuePairs<S, T> {
switch from.count {
case 1: return [ from[0].0 : from[0].1 ]
case 2: return [ from[0].0 : from[0].1, from[1].0 : from[1].1 ]
case 3: return [ from[0].0 : from[0].1, from[1].0 : from[1].1, from[2].0 : from[2].1 ]
default: return [ from[0].0 : from[0].1, from[1].0 : from[1].1, from[2].0 : from[2].1, from[3].0 : from[3].1 ]
}
In my case I know that there won't be more than 20 mappings so this func can just be extended to accommodate that number.
Not ideal, but it works...
You could also pass an array of colors to .chartForegroundStyleScale(range:). As long as you add the colors to the array in the same order you add your graph marks it should work fine.
Not incredibly elegant either, but this approach works with an arbitrary number or entries.
struct GraphItem: Identifiable {
var id = UUID()
var label: String
var value: Double
var color: Color
}
struct ContentView: View {
let data = [
GraphItem(label: "Apples", value: 2, color: .red),
GraphItem(label: "Pears", value: 3, color: .yellow),
GraphItem(label: "Melons", value: 5, color: .green)
]
var body: some View {
Chart {
ForEach(data, id: \.label) { item in
BarMark(
x: .value("Count", item.value),
y: .value("Fruit", item.label)
)
.foregroundStyle(by: .value("Fruit", item.label))
}
}
.chartForegroundStyleScale(range: graphColors(for: data))
}
func graphColors(for input: [GraphItem]) -> [Color] {
var returnColors = [Color]()
for item in input {
returnColors.append(item.color)
}
return returnColors
}
}
I have this struct created.
struct MedItem: Identifiable {
let id = UUID() //Generates a unique string for each item listed below
let medThumbnail: String
let medTitle: String
let medDose: String
let medDoseval: String
let purpose: String
let takeAt: String
let refillDate: String
let refillRem: String
}
With this data added:
struct MedData {
static let mListData = [
MedItem(medThumbnail: "Levo", medTitle: "Levothyroxine", medDose: "15", takeAt: "8 am", medDoseval: "mcg", purpose: "Hypothyroidism", refillDate: "December 3, 2021", refillRem: "Refill Remaning: 1"),
] //Imagine more sample data here
I'm trying to sort values based on time range linked to the timeAt value.
ForEach (meds, id: \.id) { MedItem in
HStack(spacing: 10.0){
}
If time is between 2am - 12pm then morning, 12pm - 3pm then noon, 3pm - 6pm evening, and 7pm - 2am then night. Some meds will not have a time and they need to be catoegorized in a different bucket.
Thank you for your help :)
I want to store multiple dictionary into an array so that the final results looks like so
(
{
id: 12,
task : completed
},
{
id: 15,
task : error
},
{
id: 17,
task : pending
},
)
I tried with code below but it does not give me what I want Please can someone help me out. Thanks
var FinalTaskData = [[String:AnyObject]]()
for i in 0..<taskObj.count{
let dict = ["id":taskObj[i].id!,"task":taskObj[i].task!] as [String : AnyObject]
FinalTaskData.append(dict)
}
And this gives me the output of
(
{
id = 190;
},
{
task = "Task To Be Edited";
},
{
id = 191;
},
{
task = "Also To Be Edited";
}
)
Which is not what I want. Thanks
(( EDIT 4: Successful in making cards flip. Using .contains on the node and running a SKAction sequence. How would I create three states for the card? Tuple sounds like a fun idea. Unflipped, Flipped, Flipped-Highlighted. It loads with all cards down (done), I want to unflip the card (done), then tap it again to highlight it. In doing so the second time, it highlights itself and the top guess word. The two strings are then concatenated in a label at the bottom, and a Next button activated (not built yet). Upon successful match of the key[value] == A[B] then Score += 1. Getting closer! ))
(( EDIT 3: Update of didMove with split keys and values. Can get the title to be the first key now and I can put the first value on the top left card okay as a test. Progress. Now I just need to either blank out the card on touch down or find a way to flip it. How would the touch down code be done? touch Began? ))
(( EDIT 2: Now thinking of it from the perspective of dictionary key value pairs rather than values alone. Gets rid of the problem of finding the key when the value is assigned to the card. Now to play with labelling the card with SKLabelNode. Need to flip card, add value, compare key. ))
(( EDIT: I made the elements all code in GameScene.swift . That file is now included in this post. Also updated question text and removed some other text. ))
I'm new to SpriteKit and Swift 3. With a few million speakers there's not a lot of Esperanto software so I want to make a game for myself to learn 1000 Esperanto words. (not shown!)
I want to have each card flip to reveal a word value from the dictionary key/values.
Then see if that word matches the wordGuess label key for the value selected.
Also JSON might be better for breaking up 1000 words into modular sections but I'll cross that bridge at another time.
// Code updated to EDIT 4
//
//
import SpriteKit
class GameScene: SKScene {
let guessLabel = SKLabelNode(fontNamed: "HelveticaNeue-UltraLight")
let anotherLabel = SKLabelNode(fontNamed: "HelveticaNeue-UltraLight")
var cardTopLeftLabel = SKLabelNode(fontNamed: "Arial-BoldMT")
let cardTopLeft = SKSpriteNode(imageNamed: "Redcard")
var cardTopRightLabel = SKLabelNode(fontNamed: "Arial-BoldMT")
let cardTopRight = SKSpriteNode(imageNamed: "Redcard")
var cardBottomLeftLabel = SKLabelNode(fontNamed: "Arial-BoldMT")
let cardBottomLeft = SKSpriteNode(imageNamed: "Redcard")
var cardBottomRightLabel = SKLabelNode(fontNamed: "Arial-BoldMT")
let cardBottomRight = SKSpriteNode(imageNamed: "Redcard")
var cardsDictionary: [String:String] = [
"tree": "arbo",
"forest": "arbaro",
"spider": "araneo",
"water": "akvo",
"watermelon": "akvomelono",
"school": "lerno",
"year": "jaro",
"grasshopper": "akrido",
"lawn": "gazono",
"friend": "amiko",
"people": "homoj",
"city": "urbo",
"mayor": "urbestro",
"movie": "filmo",
"Monday": "lundo",
"dog": "hundo"
]
// not used yet
func randomSequenceGenerator(min: Int, max: Int) -> () -> Int {
var numbers: [Int] = []
return {
if numbers.count == 0 {
numbers = Array(min ... max)
}
let index = Int(arc4random_uniform(UInt32(numbers.count)))
return numbers.remove(at: index)
}
}
func addLabel(spriteNode:SKSpriteNode, labelNode: SKLabelNode, cardValue: String, cardName: String) {
labelNode.zPosition = 1
labelNode.text = cardValue
labelNode.name = cardName //"cardTopRightLabel"
labelNode.fontSize = 40
labelNode.fontColor = .black
labelNode.position = CGPoint.init(x: cardTopLeft.size.width/4, y: 0.5)
labelNode.isHidden = true
spriteNode.addChild(labelNode)
}
override func didMove(to view: SKView) {
if let words = self.userData?.value(forKey: "words")
{
print("word information contains \(words)")
}
// get all the card keys
var cardKeys:[String] = []
for (k,_) in cardsDictionary {
cardKeys.append(k)
}
print("all keys are \(cardKeys)")
// slice for four card keys
var fourCardKeys = cardKeys[0...3]
print("four keys are \(fourCardKeys)")
// get keys for display
var firstCardKey = fourCardKeys[0]
var secondCardKey = fourCardKeys[1]
var thirdCardKey = fourCardKeys[2]
var fourthCardKey = fourCardKeys[3]
// print("Card Keys are \(firstCardKey), \(secondCardKey), \(thirdCardKey), \(fourthCardKey)")
// get the card values
var cardsValue:[String] = []
for (_,v) in cardsDictionary {
cardsValue.append(v)
}
print(cardsValue)
// slice for card values
let fourCardValues = cardsValue[0...3]
print(fourCardValues)
// get values for display
let firstCardValue = fourCardValues[0]
let secondCardValue = fourCardValues[1]
let thirdCardValue = fourCardValues[2]
let fourthCardValue = fourCardValues[3]
print("Card Values are \(firstCardValue), \(secondCardValue), \(thirdCardValue), \(fourthCardValue)")
// put first card key into label
guessLabel.zPosition = 1
guessLabel.text = firstCardKey //cardKeys[0]
guessLabel.name = "guessLabel"
guessLabel.fontSize = 144;
guessLabel.fontColor = .black
//anotherLabel.position = CGPoint(x:frame.midX, y:frame.midY - 100.0)
guessLabel.position = CGPoint(x:-2, y:233)
addChild(guessLabel)
anotherLabel.zPosition = 0
anotherLabel.text = "Guess key here, values in cards"
anotherLabel.name = "anotherLabel"
anotherLabel.fontSize = 45;
anotherLabel.fontColor = .blue
//anotherLabel.position = CGPoint(x:frame.midX, y:frame.midY - 100.0)
anotherLabel.position = CGPoint(x:-2, y:203)
addChild(anotherLabel)
////////////////
// top left card
cardTopLeft.zPosition = 0
cardTopLeft.size = CGSize(width: 300.0, height: 300.0)
cardTopLeft.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardTopLeft.position = CGPoint(x:-229, y:-57)
addChild(cardTopLeft)
addLabel(spriteNode: cardTopLeft,
labelNode: cardTopLeftLabel,
cardValue: firstCardValue,
cardName: "cardTopLeftLabel")
/////////////////
// top right card
cardTopRight.zPosition = 1
cardTopRight.size = CGSize(width: 300.0, height: 300.0)
cardTopRight.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardTopRight.position = CGPoint(x:132, y:-57)
addChild(cardTopRight)
addLabel(spriteNode: cardTopRight,
labelNode: cardTopRightLabel,
cardValue: secondCardValue,
cardName: "cardTopRightLabel")
///////////////////
// bottom left card
cardBottomLeft.zPosition = 1
cardBottomLeft.size = CGSize(width: 300.0, height: 300.0)
cardBottomLeft.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardBottomLeft.position = CGPoint(x:-225, y:-365)
addChild(cardBottomLeft)
addLabel(spriteNode: cardBottomLeft,
labelNode: cardBottomLeftLabel,
cardValue: thirdCardValue,
cardName: "cardBottomLeftLabel")
////////////////////
// bottom right card
cardBottomRight.zPosition = 1
cardBottomRight.size = CGSize(width: 300.0, height: 300.0)
cardBottomRight.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardBottomRight.position = CGPoint(x:132, y:-365)
addChild(cardBottomRight)
addLabel(spriteNode: cardBottomRight,
labelNode: cardBottomRightLabel,
cardValue: fourthCardValue,
cardName: "cardBottomRightLabel")
}
func touchDown(atPoint pos : CGPoint)
{
}
func touchMoved(toPoint pos : CGPoint) {
}
func touchUp(atPoint pos : CGPoint) {
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else {
return
}
let touchLocation = touch.location(in: self)
let touchedNode = self.atPoint(touchLocation)
func flipCard (node: SKNode, label: SKLabelNode)
{
label.isHidden = true
node.run(SKAction.sequence(
[SKAction.scaleX(to: 0, duration: 0.2),
SKAction.scale(to: 1, duration: 0.0),
SKAction.setTexture(SKTexture(imageNamed: "Redcard-blank"))
]
))
label.isHidden = false
}
func flipCardPause (node: SKNode, interval: Double)
{
node.run(SKAction.wait(forDuration: interval))
print("paused for \(interval) seconds")
}
func flipCardBack (node: SKNode, label: SKLabelNode)
{
label.isHidden = true
node.run(SKAction.sequence(
[SKAction.scaleX(to: 1, duration: 0.2),
SKAction.setTexture(SKTexture(imageNamed: "Redcard"))
// SKAction.scale(to: 1, duration: 0.2)
]
))
}
if cardTopLeft.contains(touchLocation)
{
flipCard(node: cardTopLeft, label: cardTopLeftLabel)
//flipCardPause(node: cardTopLeft, interval: 3)
//flipCardBack(node: cardTopLeft, label: cardTopLeftLabel)
}
if cardTopRight.contains(touchLocation)
{
flipCard(node: cardTopRight, label: cardTopRightLabel)
}
if cardBottomLeft.contains(touchLocation)
{
flipCard(node: cardBottomLeft, label: cardBottomLeftLabel)
}
if cardBottomRight.contains(touchLocation)
{
flipCard(node: cardBottomRight, label: cardBottomRightLabel)
}
for t in touches { self.touchDown(atPoint: t.location(in: self)) }
}
How to assign dictionary values to the cards?. EDIT 2: By not using values! I'm going to do from the perspective of dictionary keys, that way each card has a key value pair, then just display the value.
// get all the card keys
var cardKeys:[String] = []
for (k,_) in cardsDictionary {
cardKeys.append(k)
}
// slice for only four cards
var fourCardKeys = cardKeys[0...3]
// get 1st value for display
cardsDictionary[fourCardKeys[0]]
So SKLabelNode on touchDown? I'll try it. Also need to flip card so word is not on the image. Lastly compare the pressed card's key to the wordGuess key text. Getting closer
EDIT 3: Update of didMove with split keys and values. Can get the title to be the first key now and I can put the first value on the top left card okay as a test. Progress. Now I just need to either blank out the card on touchDown or find a way to flip it.
cardTopLeft.zPosition = 0
cardTopLeft.size = CGSize(width: 300.0, height: 300.0)
cardTopLeft.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardTopLeft.position = CGPoint(x:-229, y:-57)
addChild(cardTopLeft)
cardTopLeftLabel.zPosition = 1
cardTopLeftLabel.text = fourCardValues[0]
cardTopLeftLabel.name = "cardTopLeftLabel"
cardTopLeftLabel.fontSize = 40
cardTopLeftLabel.fontColor = .black
cardTopLeftLabel.position = CGPoint.init(x: cardTopLeft.size.width/4, y: 0.5)
cardTopLeft.addChild(cardTopLeftLabel)
EDIT 4: Successful in making cards flip. Using .contains on the node and running a SKAction sequence. How would I create three states for the card? Tuple sounds like a fun idea. Unflipped, Flipped, Flipped-Highlighted. It loads with all cards down (done), I want to unflip the card (done), then tap it again to highlight it (help?). In doing so the second time, it highlights itself and the top guess word. The two strings are then concatenated in a label at the bottom, and a Next button activated (not built yet). Upon successful match of the key[value] == A[B] then Score += 1. Getting closer! It's really similar to just a matching game but I'm adding an extra layer of card flipping.
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else {
return
}
let touchLocation = touch.location(in: self)
let touchedNode = self.atPoint(touchLocation)
func flipCard (node: SKNode, label: SKLabelNode)
{
label.isHidden = true
node.run(SKAction.sequence(
[SKAction.scaleX(to: 0, duration: 0.2),
SKAction.scale(to: 1, duration: 0.0),
SKAction.setTexture(SKTexture(imageNamed: "Redcard-blank"))
]
))
label.isHidden = false
}
Personally, I don't like to use userData, my opinion is that isn't a readable code.
I'd some like to create a custom SKNode like:
class Card: SKSpriteNode {
var value....
var dictionary
etc
}
Another solution, you can create a tuples:
var cardsDictionary: [String:String] = [
"vegetable":"legomo",
"plant":"vegetalo",
"actually":"efektive",
"currently":"aktuale"
]
let cardTopLeft = (node:SKNode, value:Int, type:[String:String])
cardTopLeft.node = SKSpriteNode(imageNamed: "Redcard")
cardTopLeft.value = 1
cardTopLeft.type = cardsDictionary[0]
All SKNodes have a dictionary you can write to called userData. It is an optional NSMutableDictionary, so you are going to have to create it:
cardTopLeft.zPosition = 1
cardTopLeft.size = CGSize(width: 300.0, height: 300.0)
cardTopLeft.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardTopLeft.position = CGPoint(x:-229, y:-57)
cardTopLeft.userData = ["word":"tree","value","arbo"]
addChild(cardTopLeft)
To use:
let word = cardTopLeft.userData["word"]
let value = cardTopLeft.userData["value"]
Getting a better understanding of your question, I would use SKLabelNode as an alternative.
What you can do is create SKLabelNodes to the cards with the word you want to attach, and mark it as isHidden = true. When you are ready to reveal the word, you just mark isHidden = false
let value = SKLabelNode("arbo")
value.isHidden = false
cardTopLeft.zPosition = 1
cardTopLeft.size = CGSize(width: 300.0, height: 300.0)
cardTopLeft.anchorPoint = CGPoint(x: 0.5, y: 0.5)
cardTopLeft.position = CGPoint(x:-229, y:-57)
cardTopLeft.addChild(value)
addChild(cardTopLeft)
//to reveal it
if let label = cardTopLeft.children[0] as? SKLabelNode
{
label.isHidden = false
}
//to use it
if let label = cardTopLeft.children[0] as? SKLabelNode
{
let value = label.text
//compare value to dictionary of answers
}
You may want to give your labels a name so that you do not have to use children[0], but I will leave how you want to find a node up to you.
I was wondering how I can make a simple bar chart that perhaps has day as the x-axis, with values 'today' and 'yesterday', and the y-axis as perhaps 'time' with corresponding values '1' and '2'. I guess I'm confused as to how to set text as the values for the x-axis, how to show the y axis, and what exactly r.g.axis does...
(I found an example using axis = r.g.axis(0,300,400,0,500,8,2) and I only know it's the xpos, ypos,width, ??, ?? num ticks, ??). Any insight would be great! Or a page with more fully featured bar chart examples (labels, etc). Thanks.
For the sake of all those googling this:
r.g.axis(x_start, y_start, x_width, from, to, steps, orientation, labels, type, dashsize)
x_start and y_start: distance of the axis text from the bottom left corner
x_width: position of the end of the text along the x axis
from and to: used to specify and range to use instead of using the labels argument
steps: is the number of ticks - 1
orientation: seems to specify x-axis vs. y-axis
type: is the type of tick mark used.
This was all deduced from the source code. I think I'll be switching to a charting library with documentation now...
The current code (Raphaeljs 2.0) has changed and has to be slightly adapted to use Raphael.g.axis instead of r.g.axis:
Raphael.g.axis(85,230,310,null,null,4,2,["Today", "Yesterday",
"Tomorrow", "Future"], "|", 0, r)
You're on the right track. You use g.axis and the positional arguments for setting the text is found in the 'text' arg (positional) and for toggling the y using the 'orientation' args. I added an example here,
Barchart with text x-axis
Reading this Q&A and a dozen like it, I still could not get gRaphaël to show proper labels for a bar chart. The recipes all seemed to refer to older versions of the library, or to github pages that are no longer there. gRaphaël produces some great looking output--but its docs leave much to be desired.
I was, however, able to use a combination of Firebug and Inspect This Element to follow the code and see what it produced. Diving into the barchart object, the required geometry is right there. To save others the frustration, here's how I solved the problem:
<script>
function labelBarChart(r, bc, labels, attrs) {
// Label a bar chart bc that is part of a Raphael object r
// Labels is an array of strings. Attrs is a dictionary
// that provides attributes such as fill (text color)
// and font (text font, font-size, font-weight, etc) for the
// label text.
for (var i = 0; i<bc.bars.length; i++) {
var bar = bc.bars[i];
var gutter_y = bar.w * 0.4;
var label_x = bar.x
var label_y = bar.y + bar.h + gutter_y;
var label_text = labels[i];
var label_attr = { fill: "#2f69bf", font: "16px sans-serif" };
r.text(label_x, label_y, label_text).attr(label_attr);
}
}
// what follows is just setting up a bar chart and calling for labels
// to be applied
window.onload = function () {
var r = Raphael("holder"),
data3 = [25, 20, 13, 32, 15, 5, 6, 10],
txtattr = { font: "24px 'Allerta Stencil', sans-serif", fill: "rgb(105, 136, 39)"};
r.text(250, 10, "A Gratuitous Chart").attr(txtattr);
var bc = r.barchart(10, 10, 500, 400, data3, {
stacked: false,
type: "soft"});
bc.attr({fill: "#2f69bf"});
var x = 1;
labelBarChart(r, bc,
['abc','b','card','d','elph','fun','gurr','ha'],
{ fill: "#2f69bf", font: "16px sans-serif" }
);
};
</script>
<div id="holder"></div>
There are a bunch of little cleanups you could do to labelBarChart(), but this basically gets the job done.
Here's a function I wrote for adding the labels. It's not particularly elegant but it will add the labels:
Raphael.fn.labelBarChart = function(x_start, y_start, width, labels, textAttr) {
var paper = this;
// offset width and x_start for bar chart gutters
x_start += 10;
width -= 20;
var labelWidth = width / labels.length;
// offset x_start to center under each column
x_start += labelWidth / 2;
for ( var i = 0, len = labels.length; i < len; i++ ) {
paper.text( x_start + ( i * labelWidth ), y_start, labels[i] ).attr( textAttr );
}
};
Usage is as follows:
var paper = Raphael(0, 0, 600, 400);
var chart = paper.barchart(0, 0, 600, 380, [[63, 86, 26, 15, 36, 62, 18, 78]]);
var labels = ['Col 1', 'Col 2', 'Col 3', 'Col 4', 'Col 5', 'Col 6', 'Col 7', 'Col 8'];
paper.labelBarChart(0, 390, 600, labels, {'font-size': 14});
I would like to propose a solution of an issue of the labelBarChart function proposed by Jonathan Eunice.
considering stacked bar-graphes (or other bar-graphes with more than one array of values), I added a test on bc.bars[0] in case the bc.bars.length means the number of arrays of values stacked.
This lead to the code :
<script>
function labelBarChart(r, bc, labels, attrs) {
// Label a bar chart bc that is part of a Raphael object r
// Labels is an array of strings. Attrs is a dictionary
// that provides attributes such as fill (text color)
// and font (text font, font-size, font-weight, etc) for the
// label text.
//Added test : replace bc.bars by generic variable barsRef
var barsRef = (typeof bc.bars[0].length === 'undefined') ? bc.bars : bc.bars[0];
var bar, gutter_y, label_x, label_y, label_text;
//Added consideration of set attrs (if set)
var label_attr = (typeof attrs === 'undefined') ? {} : attrs;
label_attr['fill'] = (typeof label_attr['fill'] === 'undefined') ? "#2f69bf" : label_attr['fill'];
label_attr['font'] = (typeof label_attr['font'] === 'undefined') ? "16px sans-serif" : label_attr['font'];
for (var i = 0; i<barsRef.length; i++) {
bar = barsRef[i];
gutter_y = bar.w * 0.4;
label_x = bar.x
label_y = bar.y + bar.h + gutter_y;
label_text = labels[i];
r.text(label_x, label_y, label_text).attr(label_attr);
}
}
// what follows is just setting up a bar chart and calling for labels
// to be applied
// I added an array of data to illustrate : data4
window.onload = function () {
var r = Raphael("holder"),
data3 = [25, 20, 13, 32, 15, 5, 6, 10],
data4 = [0, 2, 1, 40, 1, 65, 46, 11],
txtattr = { font: "24px 'Allerta Stencil', sans-serif", fill: "rgb(105, 136, 39)"};
r.text(250, 10, "A Gratuitous Chart").attr(txtattr);
var bc = r.barchart(10, 10, 500, 400, [data3, data4] {
stacked: true,
type: "soft"});
bc.attr({fill: "#2f69bf"});
labelBarChart(r, bc,
['abc','b','card','d','elph','fun','gurr','ha'],
{ fill: "#2f69bf", font: "16px sans-serif" }
);
};
</script>
<div id="holder"></div>
I just tested it with 2 arrays of values stacked.