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.

my bar cart

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

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -