Chart Customization Horizontal Lines and Blank Fields

  • 1
  • Question
  • Updated 1 year ago
  • Answered
I have two questions relating to Charts:
1. Is there anyway to remove the horizontal lines off of the chart?  (The PhDs we are building for cannot submit graphs with the horizontal lines in published papers so they would prefer to remove them). (the lines that run across 25, 50 , 75 100 etc.

2. The PhDs also want the data to not show up at all when it is a blank. I.e. If a record was recorded with a blank value because no value was recorded they want the line to stop and then pick up when there is a value again.  This is how Excel charts work.  Any possibility that a line chart is just blank if it is blank instead of graphing to 0?

Thank you!
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Alright, so I did some digging on number 2 above. Highcharts allow a break in data if the data set returns null. From the demo it looks like it had to be a lower case null as upper case wouldn't work. So the dilemma is that the field has to be a number. But has to return null if blank.


I created a formula field called Calculated_Result__c with the following formula to try to force a null value. IF(ISBLANK(Results__c),null,Results__c) but it was still recognized as 0 on the chart. Is there a snippet that can be created that tells the chart to interpret blank Result__c fields and replace them with null so the highchart will return a break in the data instead of dropping the line to 0.
(Edited)
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
More homework and I have an answer to number one but need help on the implementation. 1. TO get rid of horizontal gridlines in highcharts I need to add these two settings to the yAxis:
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0
}
Is there a way to insert this into my code to override the existing code?
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
var chartObj = arguments[0], $ = skuid.$;
    
    chartObj.yAxis[0].gridLineWidth = 0;
    chartObj.yAxis[0].minorGridLineWidth = 0;