February is missing from Qt charts (QML) datetime axis - c++

I have created a QML chart
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
}
DateTimeAxis {
id: xTime
}
SplineSeries {
id: chartseries
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
}
}
I am also appending at the beginning of each month to the chart. Tooltip on tick points are correct. On X axis Qt itself is doing the same as it like . How to adjust it manually
Xaxis->setTickCount(commonmap.size());
QMap<qint64,double>::const_iterator i = commonmap.constBegin();
while (i != commonmap.constEnd())
{
splineseries->append(i.key(),i.value());
++i;
}

I see that you are setting the tickCount of DateTimeAxis to the number of samples in the series, so what Qt does is divide subtract the maximum and minimum of the times and divide them, that calculation comes out about 31 days, to see it we can modify the form of DateTimeAxis to "MMM yyyy dd hh:mm:ss":
So the dates that are shown are not of the months but of times equally spaced, and having February only 28 days will not show that date.
If you want to show February you would have to place a larger value on tickCount but it will also generate more dates. Unfortunately, it is currently not possible to place the ticks in an irregular manner, such as the number of days of the months.

I have found an answer to this problem (may not be the right way...But can be solved)
Step to achieve the solution -
Find Last date of the last month (say June 30)
setMax date of QDateTimeAxis.
It works Because Qt divides the days between Start date and end date equally and distribute across X axis based ob the tick count .
With the values above in the question will get a chart as shown in the Image
[
Xaxis->setMin(QDateTime::fromMSecsSinceEpoch(commonmap.firstKey()));
Xaxis->setMax(getLastDate());
getLastDate()
{
QDate firstdate =
QDateTime::fromMSecsSinceEpoch(commonmap.lastKey()).date();
int month = firstdate.month();
int day = firstdate.day();
int addday = 0;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
addday = 31- day;
break;
case 4:
case 6:
case 9:
case 11:
addday = 30- day;
break;
case 2:
if(firstdate.isLeapYear(firstdate.year()))
{
addday = 29- day;
}
else
{
addday = 28- day;
}
break;
}
return (QDateTime::fromMSecsSinceEpoch(commonmap.lastKey()).addDays(addday));
}

As explained by #eyllanesc in his answer, it is not possible to use DateTimeAxis to obtain what you want to display.
Here is some code that could help to generate something close with the use of CategoryAxis.
Note: The data is created and formatted in QML in my example, but you could do that in the C++ part where the data could actually be.
import QtQuick 2.9
import QtCharts 2.2
Item {
id: root
width: 1280
height: 720
ListModel {
id: data
function toMsecsSinceEpoch(date) {
var msecs = date.getTime();
return msecs;
}
Component.onCompleted: {
var minDate = data.get(0).x;
var maxDate = data.get(0).x;
var minValue = data.get(0).y;
var maxValue = data.get(0).y;
// Find the minimum and maximum values.
// Fill the SplineSeries data.
for (var i = 0 ; i < data.count ; i++) {
if (data.get(i).x < minDate)
minDate = data.get(i).x;
if (data.get(i).x > maxDate)
maxDate = data.get(i).x;
if (data.get(i).y < minValue)
minValue = data.get(i).y;
if (data.get(i).y > maxValue)
maxValue = data.get(i).y;
chartseries.append(data.get(i).x, data.get(i).y);
}
// Fill the axis limits (x-axis and y-axis).
axisY.min = Math.floor(minValue)
axisY.max = Math.ceil(maxValue)
xTime.min = minDate;
xTime.max = maxDate;
// Fill the CategoryAxis (x-axis).
var dateReference = new Date(xTime.min);
while (dateReference < xTime.max) {
xTime.append(Qt.formatDate(dateReference, "MMM yyyy"), toMsecsSinceEpoch(new Date(dateReference.getFullYear(), dateReference.getMonth(), 1)));
dateReference.setMonth(dateReference.getMonth() + 1);
}
xTime.append(Qt.formatDate(dateReference, "MMM yyyy"), toMsecsSinceEpoch(new Date(dateReference.getFullYear(), dateReference.getMonth(), 1)));
}
ListElement { x: 1514770200000; y: 40.311 }
ListElement { x: 1517434200000; y: 40.4664 }
ListElement { x: 1519853400000; y: 39.6276 }
ListElement { x: 1522531803000; y: 39.6238 }
ListElement { x: 1525123806000; y: 40.3 }
ListElement { x: 1527802210000; y: 40.5638 }
}
ChartView {
id: chart
anchors.fill: parent
antialiasing: true
ValueAxis {
id: axisY
tickCount: 3
min: 39
max: 41
}
CategoryAxis {
id: xTime
labelsPosition: CategoryAxis.AxisLabelsPositionOnValue
}
SplineSeries {
id: chartseries
pointsVisible: true
pointLabelsVisible: false
useOpenGL: true
axisX: xTime
axisY: axisY
}
}
}

Related

How would you go about placing boxes correctly

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:

How to set tickCount of labels in BarSeries xAxis when appended in Qt QML

I have a BarChart which gets filled by a Button-onClick with Values from a C++ function.
Everything is fine, but there are too much values for the width of my panel. The data contains time-series data in this format:
Date
Value from 0-1
2021-01-01
0.55
2021-01-02
0.35
2021-01-03
0.77
2021-01-04
0.97
When there is to much data, the labels on the x-axis do not get displayed accordingly. I want to show only 3-4 labels.
In a LineSeries, which I used before, I could easily control the amount of labels by defining tickCount in DateTimeAxis.
How to do it in a Barchart? The data is inserted by BarSeries.append()
ChartView {
id: totalChecksChart
BarSeries {
id: barChart
axisX: BarCategoryAxis {
categories: [1, 2, 3, 4, 5, 6, 7];
}
BarSet {
values: [0, 0, 0, 0, 0, 0, 0]
}
}
}
Button{
id: refreshButton
onClicked: {
_frontPageModel.loadAvailability(_db);
_frontPageModel.loadDateList(_db);
graphData = _frontPageModel.getAvailability();
var dateData = _frontPageModel.getDateList();
var xAxis = [];
var yAxis = [];
for (let f=0; f<dateData.length; f++) {
xAxis.push(dateData[f]);
}
for (let k=0; k<graphData.length; k++) {
yAxis.push(graphData[k]);
}
barChart.clear();
barChart.axisX.categories = xAxis;
barChart.axisY.max = 1;
barChart.axisY.min = 0;
barChart.append("Verfügbarkeit", yAxis);
}
}

How to add dictionary values to images using SpriteKit?

(( 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.

How to format hours in grouping summary result in igGrid 2013.2?

I have grid with grouping and I group by one column and then make hours summary on another column like that :
name: "GroupBy",
type: "local",
columnSettings: [
{
columnKey: "codeName",
isGroupBy: true,
},
{
columnKey: "hour",
isGroupBy: false,
summaries: [
{
summaryFunction: "custom",
text: "Hours :",
customSummary: function (valuesList) {
var sumOfHours = 0.0;
var sumOfMinutes = 0.0;
for (i = 0; i < valuesList.length; i++) {
var split = valuesList[i].split(':');
sumOfHours += parseInt(split[0]);
sumOfMinutes += parseInt(split[1]);
}
sumOfHours += parseInt(sumOfMinutes / 60);
var minutesLeft = sumOfMinutes % 60;
return sumOfHours + ":" + minutesLeft;
}
}
]
}
],
summarySettings: {
//summaryFormat: "HH:MM" // What should I write here to get proper formatiing?
}
Now the problem is that whenever I get :
36 hours it displays 360.00 instead of 36:00
165 hours it displays 1,650.00 instead of 165:00
8 hours and 15 minutes it displays 815.00 insted of 8:15
34 hours and 15 minutes it displays as 3,415.00 instead of 34:15
I could not find anywhere in the docs how to display that properly. Can anybody help?
igGridGroupBy summary functions are expected to always return number type, which is not your case. That's why you see this behavior.
What you can do is to override the $.ig.formatter function (before initializing igGrid) which is used in Ignite UI and GroupBy feature for formatting values and inject your logic.
Here is an example:
var origFormatter = $.ig.formatter;
$.ig.formatter = function (val, type, format) {
if (format === "myFormat") {
return val;
}
return origFormatter.apply(arguments);
}
// Initialize igGrid here
And then set the summarySettings.summaryFormat = "myFormat" so that your logic kicks in.

Google Chart Api - Custom Axis Step

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