How to enable labels for axis and Full extent for slider on Chart Widget in Web App Builder?
689
0
11-02-2022 11:47 AM
by
I am using a chart widget to show time series data in my application created through web app builder . It looks like this currently.
When i open the widget the slider only shows up to 4 values and there are no labels on the x axis and y axis. I want that whenever the widget is opened the slider should have the full extent and labels should also be there. I was able to do it with Infographic widget which looks like this :
I tried changing a lot of settings for chart widget within the conf.json file of my app but nothing worked. Here's how both widgets look like in the conf.json file of my app :
"Chart Widget"
{
"name": "Chart",
"version": "2.21",
"uri": "widgets/Chart/Widget",
"config": {
"charts": [{
"url": "https://portale/server/rest/services/Hosted/service1/FeatureServer/0",
"filter": {
},
"description": "my data",
"symbol": {
},
"webMapLayerId": null,
"mode": "feature",
"name": "Time Sereies",
"highLightColor": "#ff0000",
"types": [{
"type": "line",
"display": {
"colors": ["#eb7b3a", "#febf29", "#72ad4c", "#9c4618", "#987214", "44682e"],
"showHorizontalAxis": true,
"showVerticalAxis": true,
"showLegend": true
}
}],
"labelField": "hours",
"valueFields": ["f80kt", "f21bi", "f74bt", "f54bl", "f51bf", "f73fw", "f72fi", "f24fl", "f78gw", "f68hb", "f77hf", "f64ks", "f70mb", "f52ng", "f79su", "f13st", "f17sm", "f27ta", "f20ve", "f61wb", "f82hf"],
"sortOrder": {
"isLabelAxis": true,
"isAsc": true
}
}]
},
"index": 3,
"id": "widgets_Chart_Widget_37",
"label": "Time Series Charts"
}
Infographic Widget
{
"name": "Infographic",
"version": "2.21",
"uri": "widgets/Infographic/Widget",
"config": {
"layout": {
"definition": [{
"type": "column",
"isClosable": true,
"reorderEnabled": true,
"title": "",
"width": 100,
"content": [{
"type": "stack",
"isClosable": true,
"reorderEnabled": true,
"title": "",
"activeItemIndex": 0,
"height": 15.034420289855072,
"content": [{
"type": "component",
"isClosable": true,
"componentName": "jimu grid",
"componentState": {
"id": "1477573229130813-1"
},
"reorderEnabled": true,
"title": "jimu grid",
"id": "1477573229130813-1"
}]
}, {
"type": "stack",
"isClosable": true,
"reorderEnabled": true,
"title": "",
"activeItemIndex": 0,
"height": 62.93746645195921,
"content": [{
"type": "component",
"isClosable": true,
"componentName": "jimu grid",
"componentState": {
"id": "1477573229130813-2"
},
"reorderEnabled": true,
"title": "jimu grid",
"id": "1477573229130813-2"
}]
}, {
"type": "stack",
"isClosable": true,
"reorderEnabled": true,
"title": "",
"activeItemIndex": 0,
"height": 22.028113258185726,
"width": 59.15915915915916,
"content": [{
"type": "component",
"isClosable": true,
"componentName": "jimu grid",
"componentState": {
"id": "1477573229130813-3"
},
"reorderEnabled": true,
"title": "jimu grid",
"id": "1477573229130813-3"
}]
}]
}]
},
"dijits": [{
"id": "1477573229130813-1",
"type": "text",
"visible": true,
"config": {
"background": {
"backgroundColor": "#FFF",
"alignment": {
"horizontal": "center",
"vertical": "middle"
},
"link": ""
},
"font": {
"font": {
"fontFamily": "Arial",
"bold": false,
"italic": false,
"underline": false
},
"fontSize": 16,
"textColor": "#282828"
},
"text": "TITLE OF THE INFOGRAPHIC"
}
}, {
"id": "1477573229130813-2",
"type": "chart",
"visible": true,
"config": {
"data": {
"mode": "feature",
"type": "line",
"clusterField": "objectid",
"valueFields": ["f80kt", "f21bi", "f74bt"],
"sortOrder": {
"isAsc": true,
"field": "objectid"
}
},
"display": {
"backgroundColor": "#ffffff",
"seriesStyle": {
"type": "series",
"styles": [{
"style": {
"color": ["#fbe66a"]
},
"name": "f80kt",
"label": "80KT"
}, {
"style": {
"color": ["#f29157"]
},
"name": "f21bi",
"label": "21BI"
}, {
"style": {
"color": ["#c8501d"]
},
"name": "f74bt",
"label": "74BT"
}]
},
"legend": {
"textStyle": {
"color": "#000000",
"fontSize": 12
},
"show": true
},
"displayRange": "ALL",
"xAxis": {
"textStyle": {
"color": "#000000",
"fontSize": 12
},
"show": true,
"name": "n",
"nameTextStyle": {
"color": "#000000"
},
"format": {
"digitSeparator": false
}
},
"yAxis": {
"textStyle": {
"color": "#000000",
"fontSize": 12
},
"show": true,
"name": "h",
"nameTextStyle": {
"color": "#000000"
},
"format": {
"type": "float",
"digitSeparator": true
}
},
"tooltip": {
"confine": true,
"trigger": "item"
},
"marks": {}
}
}
}, {
"id": "1477573229130813-3",
"type": "text",
"visible": true,
"config": {
"background": {
"backgroundColor": "#FFF",
"alignment": {
"horizontal": "center",
"vertical": "top"
},
"link": ""
},
"font": {
"font": {
"fontFamily": "Arial",
"bold": false,
"italic": false,
"underline": false
},
"fontSize": 12,
"textColor": "#282828"
},
"text": "Description: additional information about this infographic."
}
}],
"name": "line",
"wid": "1477573229130813",
"dataSource": {
"dataSourceType": "DATA_SOURCE_FEATURE_LAYER_FROM_MAP",
"name": "SO2",
"layerId": "SO2_7276",
"useSelection": true,
"filterByExtent": "on"
}
},
"index": 8,
"id": "widgets_Infographic_Widget_59"
}
What setting of Chart Widget should i change to enable labels of axis and full extent of slider?
