topic Re: Help editing axes in Hub chart in ArcGIS Hub Questions

Help editing axes in Hub chart

Trippetoe — Sat, 16 Feb 2019 00:29:31 GMT

John Gravois‌ and Tom Wayson‌ - i would greatly appreciate some guidance when working on Cedar charts. I am trying to update the axes on a JSON chart in our Hub app. The chart is type Bar and draws as desired, except that there is no Y-axis label and the X-axis labels are draw at a -45 angle. I want to add the Y-axis label and have the x-axis labels displayed at 90 degrees.

I have followed the examples describe at this esri link in the JSON specification section and the examples at ember-cli-cedar, but i cant seem to change either the content of the Y-axis label or the rotation of the x-axis labels.

Based on the esri docs, i have added the content below to the 'bar' chart example at ember-cli-cedar:

"overrides": {
   "legend": {
      "enabled": true
   },
   "backgroundColor": "#E6E6FA",
   "backgroundAlpha": 1,
   "categoryAxis": {
      "labelRotation": -90
   }
}

the background color changes and the legend appears, but the axis label does not rotate. I have tried the following code in both the ember-cli-cedar playground (nested in the 'overrides' and as a standalone element) and the amCharts CodePen. It works in the CodePen but not in the cedar playground.

"xAxes": [{
"type": "CategoryAxis",
"dataFields": {
"category": "country"
},
"renderer": {
"labels": {
"rotation": -90,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}],

I've tried similar things with setting the Y-axis label but have had the same general luck - doesn't work in Cedar; works in amCharts Code Pen. Any thoughts on how to change the contents of the Y-Axis label and the rotation of the x-axis labels?

Thank you

Re: Help editing axes in Hub chart

Anonymous User — Sun, 17 Feb 2019 16:08:18 GMT

gave it a shot as well - couldn't get the axis to tilt. Will look into it!

Re: Help editing axes in Hub chart

JohnGravois — Sat, 11 Dec 2021 14:11:04 GMT

i don't know anything about rotating labels, but i was definitely able to display and customize the X and Y axis labels in the ember-cli-cedar playground.

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "Type",
        "label": "custom"
      },
      "value": {
        "field": "Number_of_SUM",
        "label": "also custom"
      },
      "source": "Number_of_SUM"
    }
  ]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Help editing axes in Hub chart

Trippetoe — Sat, 11 Dec 2021 14:11:07 GMT

John Gravois‌ thanks for the sample. Any idea on how to set the label on the chart defined by the JSON below? I want the y label to to be 'Number of trips'.....I can use the ember-cli-cedar page (and HUB) to draw the chart, but there is no Y axis label. And i can't figure out how to force one to show up. Or is there a better way to configure the chart?

Thank you.

{
	"type": "bar",
	"datasets": [{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "auto",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Auto'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "carpool",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Carpool ride share'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "bike",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Bike'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "walk",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Walk'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		},
		{
			"url": "https://services2.arcgis.com/McQ0OlIABe29rJJy/ArcGIS/rest/services/mode_share_from_ACS_2017/FeatureServer/0",
			"name": "transit",
			"query": {
				"where": "NOT(County = '4-county') AND Mode = 'Transit'",
				"orderByFields": "Trips_SUM DESC",
				"groupByFieldsForStatistics": "County",
				"outStatistics": [{
					"statisticType": "sum",
					"onStatisticField": "Trips",
					"outStatisticFieldName": "Trips_SUM"
				}]
			},
			"join": "County"
		}
	],
	"series": [{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Car"
			},
			"source": "auto",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Carpool"
			},
			"source": "carpool",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Bicycle"
			},
			"source": "bike",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Walk"
			},
			"source": "walk",
			"group": true
		},
		{
			"category": {
				"field": "County",
				"label": "County"
			},
			"value": {
				"field": "Trips_SUM",
				"label": "Transit"
			},
			"source": "transit",
			"group": true
		}
	],
	"style": {
		"colors": [
			"#283250",
			"#2c5e79",
			"#448c96",
			"#7abaa9",
			"#a1cebe"
		]
	}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Help editing axes in Hub chart

BenStoltz — Sat, 11 Dec 2021 14:11:10 GMT

Hey Tom Rippetoe‌, sorry for the slow response. There is this oversight with multi-series charts regarding having x/y axis titles. It can work if you use overrides however, for example adding:

“overrides”: {
“valueAxes”: [{
“title”: “Your title here”
}]
}‍‍‍‍‍‍‍‍‍‍

Annoyingly, no idea why the labelRotation is not working. Will definitely look into it.

Re: Help editing axes in Hub chart

TomWayson — Thu, 14 Mar 2019 16:00:08 GMT

FWIW, I've opened an issue to be able to do this w/o `overrides`: definition should provide a way to specify or override default axis labels · Issue #464 · Esri/cedar · GitHub

Re: Help editing axes in Hub chart

DanielSchatt — Sat, 11 Dec 2021 14:11:12 GMT

I'm having the same issue (trying to label axes with a multiple series chart). I tried Ben's method above using overrides. The x-axis was labeled from the categoryAxis setting but not the y-axis from the valueAxis setting. Is there a problem with my syntax? Thanks!

var datasets = [
{
   "data": table,
   "name": "water elevation series"
}
];
				   
var series = [
{
   "category": {"field": "timeTable"},
   "value": {"field": "waterElevationTable", "label": "Water elevation (feet"},
   "source": "water elevation series"
},
{
   "category": {"field": "timeTable"},
   "value": {"field": "landElevationTable", "label": "Land elevation (feet)"},
   "source": "water elevation series"
}
];
				   
var overrides = {
   "categoryAxis": {"title": "Time (hours)"},
   "valueAxis": {"title": "Elevation (feet)"}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Help editing axes in Hub chart

KrystalPhaneuf2 — Wed, 22 May 2019 18:36:23 GMT

Wondering if this has been addressed yet. I'm trying to either rotate or not show the x axis/category labels at all. Having the issue where it's not showing all labels due to there being too many to fit.