X-Axis Ignores Labels for nil values in Series #221

Open
ThinkADRIAN opened this Issue Nov 21, 2015 · 1 comment

Projects

None yet

2 participants

@ThinkADRIAN

X-Axis Labels are truncated to first and last non-nil value. I've searched the HighCharts documentation and cannot find a way to show all X-Axis labels even when Series Value is nil.

Current Output: Line Chart skipping nil values but also truncating leading and following nil values and corresponding X-Axis labels.

Ideal Output: Line Chart with all Date Labels for X-Axis with Line Broken if value is nil.

<% if @user == nil %>
    <% user = current_user %>
<% else %>
    <% user = @user %>
<% end %>

<% @moods = Mood.where(user_id: user.id) %>

<%
   if @mood_lookback_period == 'week'
     mood_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_week')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_week')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_week')).average(:irritability_rating)
   elsif @mood_lookback_period == 'last_week'
     mood_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_week')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_week')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_week')).average(:irritability_rating)
   elsif @mood_lookback_period == 'month'
     mood_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_month')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_month')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('this_month')).average(:irritability_rating)
   elsif @mood_lookback_period == 'last_month'
     mood_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_month')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_month')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_day(:timestamp, range: date_range_for('last_month')).average(:irritability_rating)
   elsif @mood_lookback_period == 'year'
     mood_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('this_year')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('this_year')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('this_year')).average(:irritability_rating)
   elsif @mood_lookback_period == 'last_year'
     mood_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('last_year')).average(:mood_rating)
     anxiety_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('last_year')).average(:anxiety_rating)
     irritability_chart_data = @moods.group_by_month(:timestamp, range: date_range_for('last_year')).average(:irritability_rating)
   end

   mood_chart_data.each { |k, v|
     if mood_chart_data[k] == 0
       mood_chart_data[k] = nil
     end
   }

   anxiety_chart_data.each { |k, v|
     if anxiety_chart_data[k] == 0
       anxiety_chart_data[k] = nil
     end
   }

   irritability_chart_data.each { |k, v|
     if irritability_chart_data[k] == 0
       irritability_chart_data[k] = nil
     end
   }
%>
<div class="col-md-12">
  <%= line_chart [
                         {name: "Mood", data: mood_chart_data}
                 ], colors: [MOOD_PRIMARY_COLOR],
                 library: {
                         title: "Mood",
                         titlePosition: 'out',
                         titleTextStyle: {
                                 color: MOOD_PRIMARY_COLOR
                         },
                         curveType: "none",
                         backgroundColor: {
                                 fill: MOOD_BACKGROUND_COLOR,
                                 stroke: MOOD_PRIMARY_COLOR,
                                 strokeWidth: MOOD_STROKE_WIDTH
                         },
                         animation: {
                                 duration: MOOD_ANIMATION_DURATION,
                                 startup: true,
                                 easing: MOOD_ANIMATION_EASING
                         },
                         hAxis: {
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         },
                         legend: {
                                 textStyle: {
                                         color: MOOD_BACKGROUND_COLOR
                                 },
                                 position: MOOD_LEGEND_POSITION
                         },
                         vAxis: {
                                 ticks: [{v: 1, f: 'Sev D'}, {v: 2, f: 'Mod D'}, {v: 3, f: 'Mild D'}, {v: 4, f: 'Base'}, {v: 5, f: 'Mild E'}, {v: 6, f: 'Mod E'}, {v: 7, f: 'Sev E'}],
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         }
                 } %>
</div>

<div class="col-md-12">
  <%= line_chart [
                         {name: "Anxiety", data: anxiety_chart_data}
                 ], colors: [MOOD_PRIMARY_COLOR],
                 library: {
                         title: "Anxiety",
                         titlePosition: 'out',
                         titleTextStyle: {
                                 color: MOOD_PRIMARY_COLOR
                         },
                         curveType: "none",
                         backgroundColor: {
                                 fill: MOOD_BACKGROUND_COLOR,
                                 stroke: MOOD_PRIMARY_COLOR,
                                 strokeWidth: MOOD_STROKE_WIDTH
                         },
                         animation: {
                                 duration: MOOD_ANIMATION_DURATION,
                                 startup: true,
                                 easing: MOOD_ANIMATION_EASING
                         },
                         hAxis: {
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         },
                         legend: {
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 position: MOOD_LEGEND_POSITION
                         },
                         vAxis: {
                                 ticks: [{v: 1, f: 'None'}, {v: 2, f: 'Mild'}, {v: 3, f: 'Mod'}, {v: 4, f: 'Sev'}],
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         }
                 } %>
</div>

<div class="col-md-12">
  <%= line_chart [
                         {name: "Irritability", data: irritability_chart_data}
                 ], colors: [MOOD_PRIMARY_COLOR],
                 library: {
                         title: "Irritability",
                         titlePosition: 'out',
                         titleTextStyle: {
                                 color: MOOD_PRIMARY_COLOR
                         },
                         curveType: "none",
                         backgroundColor: {
                                 fill: MOOD_BACKGROUND_COLOR,
                                 stroke: MOOD_PRIMARY_COLOR,
                                 strokeWidth: MOOD_STROKE_WIDTH
                         },
                         animation: {
                                 duration: MOOD_ANIMATION_DURATION,
                                 startup: true,
                                 easing: MOOD_ANIMATION_EASING
                         },
                         hAxis: {
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         },
                         legend: {
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 position: MOOD_LEGEND_POSITION
                         },
                         vAxis: {
                                 ticks: [{v: 1, f: 'None'}, {v: 2, f: 'Mild'}, {v: 3, f: 'Mod'}, {v: 4, f: 'Sev'}],
                                 textStyle: {
                                         color: MOOD_PRIMARY_COLOR
                                 },
                                 gridlines: {
                                         color: MOOD_BACKGROUND_COLOR
                                 }
                         }
                 } %>
</div>
@ankane
Owner
ankane commented Jan 7, 2017

Hey @ThinkADRIAN, I'm having trouble following. Can you paste the generated JavaScript code for the simplest reproducible example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment