I have made a lazyrow (horizontal) scroll with 10 items. My problem now is that when I scroll to item number 10, it stops. And I want it to go back to item number 1 again like a carousel. Does anyone know this? Here is my code for the 10 items:
//Horizontal Scroll view
item {
LazyRow {
items(10) { count->
Card(
modifier = Modifier
.width(110.dp)
.height(140.dp)
.padding(10.dp, 5.dp, 5.dp, 0.dp)
.clip(RoundedCornerShape(10.dp))
.background(Color.White),
elevation = 5.dp
) {
Column(
modifier = Modifier.padding(5.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = hi.imageId),
contentDescription = "profile Image",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(60.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.padding(5.dp))
Text(
text = hi.talk,
color = Color.Black,
fontWeight = FontWeight.Bold,
fontSize = 16.sp)
}
}
}
}
}
I'm pretty new to kotlin, so it is taking some fair time to learn. I couldn't find anything related to this in Jetpack Compose, and it is hard for me to convert from Java.
Related
I'm implementing a simple search input field on Compose desktop.
My code looks as below.
BasicTextField(
modifier = Modifier.align(Alignment.CenterVertically).onPreviewKeyEvent {
if(it.key == Key.Enter && it.type == KeyEventType.KeyDown){
println("enter down: $textFieldState")
true
}else {
false
}
},
value = textFieldState,
onValueChange = { input ->
textFieldState = input
},
textStyle = TextStyle(
fontSize = 14.sp,
textAlign = TextAlign.Start,
fontWeight = FontWeight.Normal,
fontFamily = NotoSans,
color = Color.Black
),
maxLines = 1,
decorationBox = { innerTextField ->
Row(modifier = Modifier.fillMaxWidth()) {
if (textFieldState.isEmpty()) {
Text(
text = "Search with user name.",
fontSize = 14.sp,
color = Color(0xFF909ba9),
textAlign = TextAlign.Start,
fontWeight = FontWeight.Normal,
fontFamily = NotoSans,
modifier = Modifier.fillMaxWidth()
.align(Alignment.CenterVertically),
)
}
}
innerTextField()
}
)
This code will create a textfield which has 1 max lines.
It works without any problem on english inputs.
But when I type in Korean inputs, keys such as space, enter, or even numbers will duplicate the last Korean character. For example, in english, if I type in H, I, !,
it will be HII!.
Is there some locale settings that can be done to the textField?
I found no working solution in here or in the Compose multiplatform git issue page. I found a workaround using SwingPanel and JTextField.
SwingPanel(background = Color(0xFFf5f6f6), modifier = Modifier.fillMaxSize(), factory = {
//Some JTextfield I've obtaines from stackoverflow to show place holder text.
//Can be replaced to JTextField(columnCount:Int)
HintTextField("Enter in name",1).apply {
background = java.awt.Color(0xf5, 0xf6, 0xf6)
border = null
}
}, update = {
//SimpleDocumentListener is an implementation of DocumentListener.
//Which means it can be replaced by it.
it.document.addDocumentListener(object : SimpleDocumentListener{
override fun update(e: DocumentEvent) {
try{
val text = it.text
textFieldState = text
} catch(e : Exception) {
e.printStackTrace()
}
}
})
//I need an enter key to trigger some search logics.
//textFieldState seems to print the value as I intended
it.addKeyListener(object : KeyAdapter(){
override fun keyPressed(e: KeyEvent?) {
if(e?.keyCode == KeyEvent.VK_ENTER){
println("ENTER : $textFieldState")
}
}
})
})
Really hope the compose multiplatform team comes up with a better solution.
I am trying to make a datepicker with dates placed beneath the name of the days of the week. But I can't really get the spacing and the placement correct. don't really know what would make it possible to make the placement modifyable during run either because I mean if a month starts on a Wednesday the first date must align with Wednesday instead of Monday or well Sunday.
Here is my code:
val datesList = listOf<String>("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var dayCounter: Int = 1
var week: Int = 1
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
datesList.forEach {
Text(text = it.toString().substring(0,3))
}
}
while (dayCounter <= 31){
Row(modifier = Modifier.fillMaxWidth().padding(5.dp)) {
for (i in week..7){
if(dayCounter <= 31){
Box(contentAlignment = Alignment.Center, modifier = Modifier.background(Color.Red , CircleShape).padding(10.dp)) {
Text(text = dayCounter++.toString())
}
}
}
}
}
I have already tried with padding but that just stretches the boxes. and aspectratio wont work either because of the different amount of dates on each row. So I'm kinda stuck will someone please help?
I think this is what you want...
#Composable
fun DatePicker() {
val datesList = listOf<String>("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
var dayCounter: Int = 1
var week: Int = 1
Column(Modifier.fillMaxWidth()) {
Row(
Modifier
.fillMaxWidth()
.padding(5.dp),
horizontalArrangement = Arrangement.Center
) {
datesList.forEach {
Box(
Modifier
.weight(1f)
.padding(5.dp),
contentAlignment = Alignment.Center
) {
Text(text = it.substring(0, 3))
}
}
}
var initWeekday = 3 // wednesday
while (dayCounter <= 31) {
Row(
Modifier
.fillMaxWidth()
.padding(5.dp),
) {
if (initWeekday > 0) {
repeat(initWeekday) {
Spacer(modifier = Modifier.weight(1f))
}
}
for (i in week..(7 - initWeekday)) {
if (dayCounter <= 31) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.weight(1f)
.background(Color.Red, CircleShape)
.padding(10.dp)
) {
Text(text = dayCounter++.toString())
}
} else {
Spacer(modifier = Modifier.weight(1f))
}
}
initWeekday = 0
}
}
}
}
Here's the result:
(( 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 am using iOS-Charts to show a horizontal bar chart.
The x-Axis labels on the left are cut-off.
Only when I double tap on the chart, the correct sizing appears to happen and the labels are not cut off anymore.
Here's the code I'm using
func setChart(_ dataPoints: [(String,Int)], chart: HorizontalBarChartView) {
chart.noDataText = "No data available."
var dataEntries: [BarChartDataEntry] = []
let maxNumberEntries = dataPoints.count
var xAxisLabel: [String] = []
var counter:Int = maxNumberEntries-1
for _ in 0..<maxNumberEntries {
let dataEntry = BarChartDataEntry(x: Double(counter), yValues: [Double(dataPoints[counter].1)], label: dataPoints[counter].0)
dataEntries.append(dataEntry)
xAxisLabel.append(dataPoints[counter].0)
counter -= 1
}
xAxisLabel = xAxisLabel.reversed()
let chartDataSet = BarChartDataSet(values: dataEntries, label: "")
let chartData = BarChartData(dataSet: chartDataSet)
chart.data = chartData
chart.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
// disable zoom of chart
chart.pinchZoomEnabled = false
chart.scaleXEnabled = false
chart.scaleYEnabled = false
chart.chartDescription?.text = ""
chart.legend.enabled = false
// disable selection of bars
chartDataSet.highlightEnabled = false
chartDataSet.valueFont = NSUIFont.systemFont(ofSize: 10)
let numberFormatter = ValueFormatter()
chartData.setValueFormatter(numberFormatter)
// specify the width each bar should have
let barWidth = 0.8
chartData.barWidth = barWidth
let formato:BarChartFormatter = BarChartFormatter()
formato.strings = xAxisLabel
let xaxis:XAxis = XAxis()
_ = formato.stringForValue(Double(1), axis: xaxis)
xaxis.valueFormatter = formato
chart.xAxis.valueFormatter = xaxis.valueFormatter
let xAxis = chart.xAxis
xAxis.labelPosition = XAxis.LabelPosition.bottom // label at bottom
xAxis.drawGridLinesEnabled = false
xAxis.granularity = 1.0
xAxis.labelCount = maxNumberEntries
xAxis.labelRotationAngle = 0
// Don't show other axis
let leftAxis = chart.leftAxis
leftAxis.enabled = false
let rightAxis = chart.rightAxis
rightAxis.enabled = false
}
Any idea how to fix that?
Screenshots:
cut-off xAxis labels
after double tap the labels are not cut-off anymore
If you values are cut off even after notifyDataSetChanged, try offseting it like this:
mChart.extraTopOffset = 20
I solved this issue by calling
chart.fitScreen()
for every bar chart once all the data is passed.
HorizontalBarChart label cut issue solved you just only put this code in your chart setup:
chart.extraRightOffset = 30
If anyone has been struggling and answer did not help, once you set a chart with a new data, do not forget to call notifyDataSetChanged on chart, otherwise labels will be cut. That was my case.
I have my chart working ok, however I would like to use a custom step for my vertical y-axis. At the moment it seems to be automatic and is spaced out as below:
1,500,000
3,000,000
4,500,000
I would prefer it to be:
100,000
200,000
300,000
and so on...
Is there any way I can set this, I have looked through all the documentation but can't figure it out.
Here is my code:
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
yAxis: { gridlineColor: '#ff0000' },
xAxis: { gridlineColor: '#ff0000' }
}
);
My data is company profit for each week of the year, y-axis is profit, x-axis is the week number.
Hope somebody can help.
Paul
this is how I do it:
var options = {
vAxis: { // same thing for horisontal, just use hAxis
viewWindow: { // what range will be visible
max: 120,
min: 0
},
gridlines: {
count: 12 // how many gridlines. You can set not the step, but total count of gridlines.
}
}
};
all the best ;)
For as far as I know this cannot be done automatically with Google Charts settings.
I've written a javascript function to do this.
To use it you can create a nice sequence that can be used as ticks for the vertical axis:
var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
The line for the xAxis should be changed to apply the ticks:
yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
Here is the javascript method to create the ticks. It will create a tick for each value of 10 and if that creates too many ticks then it will do this for each 100 or 1000 etc.
// Creates an array of values that can be used for the tick property of the Google Charts vAxis
// The values provide a nice scale to have a clean view.
var getChartTicks = function (min, max) {
// settings
var maxTicks = 8;
var tickSize = 10;
// determine the range of the values and the number of ticks
var newMin;
var newMax;
var nrOfTicks;
var appliedTickSize = 1;
while (newMin == null || nrOfTicks > maxTicks) {
appliedTickSize *= tickSize;
newMin = Math.floor(min / appliedTickSize) * appliedTickSize;
newMax = Math.ceil(max / appliedTickSize) * appliedTickSize;
nrOfTicks = (newMax - newMin) / appliedTickSize;
}
// generate the tick values which will be applied to the axis
var ticks = new Array();
var i = 0;
for (var v = newMin; v <= newMax; v += appliedTickSize) {
ticks[i++] = v;
}
return ticks;
}
So to summarize, after adding this method your code could then be changed to:
var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
xAxis: { gridlineColor: '#ff0000' }
}
);
Hi Please refer google chart api.There are several parameters available according to your requirement like
chbh = Bar width and spacing ...
chco = Series colors ...
chd = Chart data string...
chdl,chdlp, chdls=Chart legend text and style...
chds Scale for text format with custom range...
chem = Dynamic icon markers...
for more information
http://code.google.com/apis/chart/image/docs/chart_params.html