javascript - How to pass string variables to labels option in Morris.js -
i using morris.js rendering charts in rails project. there problem have no idea how pass values json string labels option in morris.js.
below contents helper method:
def worst_yield_chart_data(reports) start_time = reports.last.published_at end_time = reports.first.published_at datetime = report.where("config = ? , published_at between ? , ?", 'all', start_time, end_time).select("distinct(published_at)") datetime.map |date| { published_at: date.published_at.to_datetime.to_formatted_s(:long), # top1 worst yield rate & station name worst_accu_yield: report.group_accu_yield_by_date(date.published_at).first.try(:worst_accu_yield), worst_daily_yield: report.group_daily_yield_by_date(date.published_at).first.try(:worst_daily_yield), worst_accu_yield_station: report.group_accu_yield_by_date(date.published_at).first.try(:station_name) || 'no input', worst_daily_yield_station: report.group_daily_yield_by_date(date.published_at).first.try(:station_name) || 'no input', # top2 worst yield rate & station name worse_accu_yield: report.group_accu_yield_by_date(date.published_at).offset(2).first.try(:worst_accu_yield), worse_daily_yield: report.group_daily_yield_by_date(date.published_at).offset(2).first.try(:worst_daily_yield), worse_accu_yield_station: report.group_accu_yield_by_date(date.published_at).offset(2).first.try(:station_name) || 'no input', worse_daily_yield_station: report.group_daily_yield_by_date(date.published_at).offset(2).first.try(:station_name) || 'no input', # top3 worst yield rate & station name bad_accu_yield: report.group_accu_yield_by_date(date.published_at).offset(3).first.try(:worst_accu_yield), bad_daily_yield: report.group_daily_yield_by_date(date.published_at).offset(3).first.try(:worst_daily_yield), bad_accu_yield_station: report.group_accu_yield_by_date(date.published_at).offset(3).first.try(:station_name) || 'no input', bad_daily_yield_station: report.group_daily_yield_by_date(date.published_at).offset(3).first.try(:station_name) || 'no input' } end end
the view contents below:
= content_tag :div, "", id: "worst-accu-yield-data", data: {reports: worst_yield_chart_data(@reports_for_cart)}
and javascript codes in haml file below:
:javascript jquery(function() { morris.bar({ element: 'worst-accu-yield-data', resize: true, hidehover: 'auto', continuousline: true, data: $('#worst-accu-yield-data').data('reports'), goals: [90, 95.5, 100], goallinecolors: ['#e74c3c', '#e67e22', '#2ecc71'], xkey: 'published_at', ykeys: ['worst_accu_yield', 'worse_accu_yield', 'bad_accu_yield'], labels: ['worst_accu_yield_station', 'worse_accu_yield_station', 'bad_accu_yield_station'], trendline: true, postunits: '%', ymin: 'auto', ymax: 'auto', parsetime: false, barcolors: ['#cb4b4b', '#f8aa33', '#1fbba6'], baropacity: 0.7, behavelikeline: true });
the purpose top3 worst station name its' yield rate in bar cart. able string values in "xkey" , "ykeys" correctly. also, pass each station's name label option in morris.js (ex: station a, station b, station c). in case, shows hardcoded string me: worst_accu_yield_station, worse_accu_yield_station, bad_accu_yield_station.
is possible pass each station name label option? appreciated!
the problem can solved customizing hover option.
"hovercallback": function(index, options, content){ var row = options.data[index] datetime = '<p><b>' + row.published_at + '</b></p>' station1 = '<div style="color: #cb4b4b;">worst: ' + row.worst_accu_station + ' (' + row.worst_accu_yield + '%)</div>' station2 = '<div style="color: #f8aa33;">worse: ' + row.worse_accu_station + ' (' + row.worse_accu_yield + '%)</div>' station3 = '<div style="color: #1fbba6;">bad: ' + row.bad_accu_station + ' (' + row.bad_accu_yield + '%)</div>' return [datetime, station1, station2, station3] },
Comments
Post a Comment