Help editing axes in Hub chart

664
7
Jump to solution
02-15-2019 04:29 PM
Trippetoe
Occasional Contributor III

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

Tags (3)
1 Solution

Accepted Solutions
BenStoltz
New Contributor II

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.

View solution in original post

7 Replies
GrahamHudgins
Esri Regular Contributor

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

JohnGravois
Frequent Contributor

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"
}
]
}
Trippetoe
Occasional Contributor III

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"
]
}
}
0 Kudos
BenStoltz
New Contributor II

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.

View solution in original post

TomWayson
Esri Contributor

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

KrystalPhaneuf2
Occasional Contributor

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.

0 Kudos
DanielSchatt
New Contributor III

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)"}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos