How to enable labels for axis and Full extent for slider on Chart Widget in Web App Builder?

410
0
11-02-2022 11:47 AM
Labels (2)
RehanChaudhary
Occasional Contributor

I am using a chart widget  to show time series data in my application created through web app builder . It looks like this currently. 

RehanChaudhary_0-1667413631381.png

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 :

RehanChaudhary_1-1667414430173.png

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? 

0 Kudos
0 Replies