javascript - rails and highcharts column chart -


hi im stuck im using highcharts in rails app , trying column chart show how many male users have compared female users in database cant seem figure out how data read users database table. here user model

def self.gender_analysis(gender)   user.where(:gender => male).count   user.where(:gender => female).count end

here user.js file crate chart

$(function(){    new highcharts.chart({      chart:{        renderto: "pie_chart",        type:"column"        },        title: { text: "gender" },        xaxis: { type: "percent correct"},        yaxis: {            title: { text: "gender" }     },           series: [{             data: <%= users.each |user| %>             }]       });    });

and user view.html.erb looks like

<div id="pie_chart" style="width:568px; height:300px;"></div> <h1>listing users</h1>  <table>   <thead>     <tr>       <th>number</th>       <th>gender</th>       <th>hobby</th>       <th>created</th>       <th></th>       <th></th>       <th></th>     </tr>   </thead>  <tbody>     <% @users.each |user| %>       <tr>         <td><%= user.number %></td>         <td><%= user.gender %></td>         <td><%= user.hobby %></td>         <td><%= user.created_at %></td>

i new rails developing , appreciate given

it's simple: in view, mean in html.erb put:

<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

and add script:

$(function () {         $('#container').highcharts({             chart: {                 type: 'column'             },             title: {                 text: 'total user'             },             subtitle: {                 text: 'source: unknown'             },             xaxis: {                 categories: ['male', 'female'],                 title: {                     text: null                 }             },             yaxis: {                 min: 0,                 title: {                     text: 'total number',                     align: 'high'                 },                 labels: {                     overflow: 'justify'                 }             },             tooltip: {                 valuesuffix: ''             },             plotoptions: {                 bar: {                     datalabels: {                         enabled: true                     }                 }             },              credits: {                 enabled: false             },             series: [{                name: 'users',                data: [<%= user.where(:gender => 'male').count %>, <%= user.where(:gender => 'female').count %>]             }]         });     });

also here check out fiddle.

http://jsfiddle.net/c5yax/

happy coding! :)


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more