I've been trying to get the x axis to display a text axis label. The example is here https://jsfiddle.net/z4aZ4/859/
I'd like "Question 1" displayed on the x axis. At the moment "Nan" is displayed.
var data =
[
{
"key": "Yes",
"color": "#d67777",
"values": [
{
"x" : "Question 1" ,
"y" : 70
} ,
{
"x" : "Question 2" ,
"y" : 65
}
]
},
{
"key": "No",
"color": "#4f99b4",
"values": [
{
"x" : "Question 1" ,
"y" : 30
} ,
{
"x" : "Question 2" ,
"y" : 35
}
]
}
]
You'll have to change the tick format to load your labels.
On the addGraph function:
Replace
.tickFormat(d3.format(',f'));
With
.tickFormat(function(d) { return d; });
Also so that a label will show up for each column you'll have to set reduceXTicks False:
var chart = nv.models.multiBarChart()
.reduceXTicks(false);
Related
Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
A FileMaker snapshot file has a layout id. However, using the go to layout number does not work as I had expected.
Set Variable [$json; Value:Get(ScriptParameter)]
Set Variable [$layout_id; Value:JSONGetElement ( $json ; "UIState.Layout.#id" )]
Go to Layout [$layout_id] // layout number by calculation
// ends up on a completely different layout than the one the snapshot file opens.
I've discovered that the layout id and layout number are two different numbers ... which is why the go-to layout number script step failed.
The JSON string used as a parameter for the above script is.
{
"UIState": {
"UniversalPathList": "fmnet:/10.1.1.63/Balanced.fmp12\nfmnet:/10.1.1.220/Balanced.fmp12\nfmnet:/169.254.254.47/Balanced.fmp12\nfilemac:/Macintosh HD/source/fmp16/Balanced.fmp12",
"Rows": {
"#rowCount": "1",
"#baseTableId": "131",
"#text": "21383239"
},
"Layout": {
"#id": "2"
},
"View": [
],
"SelectedRow": {
"#id": "21383239"
},
"StatusToolbar": {
"#visible": "True"
},
"Mode": {
"#value": "browseMode"
},
"SortList": {
"#Maintain": "True",
"#value": "False"
}
}
}
Which can be run from the command line. Example
open 'fmp://filemaker.server/Balanced.fmp12?script=snapshot_link¶m={ "UIState": { "UniversalPathList": "fmnet:/10.1.1.63/Balanced.fmp12\nfmnet:/10.1.1.220/Balanced.fmp12\nfmnet:/169.254.254.47/Balanced.fmp12\nfilemac:/Macintosh HD/source/fmp16/Balanced.fmp12", "Rows": { "#rowCount": "1", "#baseTableId": "131", "#text": "21383239" }, "Layout": { "#id": "2" }, "View": [], "SelectedRow": { "#id": "21383239" }, "StatusToolbar": { "#visible": "True" }, "Mode": { "#value": "browseMode" }, "SortList": { "#Maintain": "True", "#value": "False" } } }'
What would be a good way to find the right layout to display in FileMaker given a valid layout id?
I believe you can calculate the layout number by finding the index number of a given layout ID in the list returned by the LayoutIDs function, say =
Let (
listOfIDs = LayoutIDs ( "" )
;
ValueCount ( Left ( listOfIDs ; Position ( ¶ & listOfIDs & ¶ ; ¶ & $layout_ID & ¶ ; 1 ; 1 ) ) )
)
I want to plot a graph between place and time. Y-axis will show 5 countries (USA, UK, Canada, France, Germany) and X-axis will show the time. The data is in pairs of (date, place). I am trying to display it by replacing the numeric values of Y-Y-axis with strings but no luck. Any simple working example will be helpful.
The value axis' labelFunction would be perfect for this task. With it, you can define a custom function that would be called for each label, which in turn could replace the number with a string. I.e.:
"valueAxes": [{
// other value axis settings
// ...
"labelFunction": function(value) {
var labels = {
"1": "USA",
"2": "UK",
"3": "Canada",
"4": "France",
"5": "Germany"
};
return labels[value] || "";
}
}]
Another option that you have is to disable value axis labels altogether ("labelsEnabled": false) and using guides to place country labels at specific values. I.e.:
"valueAxes": [{
"labelsEnabled": false,
"guides": [{
"value": 1,
"label": "USA"
}, {
"value": 2,
"label": "UK"
}, {
"value": 3,
"label": "Canada"
}, {
"value": 4,
"label": "France"
}, {
"value": 5,
"label": "Germany"
}]
}]
Whichever works for your purposes better, or seems easier.
The xaxis on our Distinct Bar Chart is user names. The problem I have is that there can be multiple users with the same name.
I want the x-axis to be distinct by the user's id but would like the label to be the user's name (Yeah, I understand that the name is ambiguous, but that is OK for our purposes)
Given the following data how would I get the x-axis to be distinct by id but display the label value
[{
"key" : "tester",
"values" : [{
"value" : 5.0,
"label" : "John Smith",
"color" : "#9BA474",
"id" : 1388
}, {
"value" : 10.25,
"label" : "Jane D'oh",
"color" : "#356AA0",
"id" : 11
}, {
"value" : 3.5,
"label" : "John Smith",
"color" : "red",
"id" : 12
}]
}]
I may have the answer to my own question. If there are other ways of doing this I'd like to hear them.
var chart = nv.models.discreteBarChart()
.x(function(d, i) { return i })
.y(function(d) { return d.value });
chart.xAxis
.tickFormat(function(d) {return data[0].values[d].label; });