ankane / chartkick Goto Github PK
View Code? Open in Web Editor NEWCreate beautiful JavaScript charts with one line of Ruby
Home Page: https://chartkick.com
License: MIT License
Create beautiful JavaScript charts with one line of Ruby
Home Page: https://chartkick.com
License: MIT License
i need to use column chart but the employee department name is long how to increase the space between the column chart ? i am using jsapi not highcharts
You should decouple Ruby and JS code so that other web languages (PHP, Python, ...) can build similar libraries based on the same JS.
I have ChartKick referenced as outlined in the docs:
- content_for :head do
= javascript_include_tag '//www.google.com/jsapi', 'chartkick'
(even referencing in head instead of at bottom of body!) and chartkick is not defined
is being thrown. In the inspector, on line 355 of chartkick.js:
Uncaught TypeError: Cannot read property 'innerText' of undefined
Any ideas?
Hi.
I've been trying to remove the time in the data shown when you hover over a data point. I've tried using to_date and to_s on the date in the data but to no avail.
I've also checked if the data im using has a time together with the date (it doesn't. just has a date).
Is there a way (or i missed something) to remove the time? I need the data point to show only the date and the corresponding paired data (in this case, inventory).
P.S. Really sorry. Dunno if this is the right place to ask this.
Is there a way to override the div which sets the default font to Lucida Grande, or a way to change the default font to anything else, such as Helvetica?
Would it be incredibly hard to add support for Sinatra with out going through padrino?
No reason to do this if negative values are detected, and no reason to require everyone that wants negative values to pass :min => nil
.
Is this in the pipeline of upcoming charts ?https://developers.google.com/chart/interactive/docs/gallery/geomap
Hey there,
I love the gem and thanks a lot for creating it. I am sorry if this issue is more technical support than an actual issue.
Diving right into it, I currently have a Projects model that has_many Tasks and each task belongs_to a User. The goal I am trying to achieve is to show how many tasks for a single project are assigned to each user.
This is already easily accomplished by doing this:
column_chart @project.tasks.group("user_id").count
However it is obviously displaying the ID of the user as the value and not one of the attributes on the user such as their email or full name. Is there a best use scenario for doing so?
Thanks!
Hi,
Trying to create my first chart.
What I want to do is create a line chart with a series of data (no time or date associated with it)
Below lines did not work,
new Chartkick.LineChart("chart-1", { 11,6,3,2,8});
new Chartkick.LineChart("chart-1", { "1":11,"2":6,"3":3,"4":2,"5":8});
How can I make this work?
Cheers
Would be a nice feature to have :)
We want to hide the legend when only graphing a single series, like:
<%= line_chart User.group_by_day(:created_at).count %>
However, if the data is provided as:
<%= line_chart @goals.map{|goal|
{:name => goal.name, :data => goal.feats.group_by_week(:created_at).count }
} %>
and there is only one series, we still want to show the legend, since the title of the chart will be something like "Goals per Week".
Is there a way to display the name rather than an object?
For example: http://cl.ly/image/0F0Y1m200x2x
I'm using this code to produce the above chart.
<%= pie_chart Invoice.count(:group => "company") %>
If I change it to company.name I get an error that that column doesn't exist:
<%= pie_chart Invoice.count(:group => "company.name") %>
Mysql2::Error: Unknown column 'company.name' in 'field list'
// see if one series or multiple
if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
series = [{name: "Value", data: series}];
opts.hideLegend = true;
} else {
opts.hideLegend = false;
}
To support multiple columns of data rather than a max of 2 columns this if statement in chartkick.js needs to be rebuilt. The offending part of the statement is isArray(series[0]))
which places the entire dataset into a object/hash.
Looking over the code i think a refactor would be beneficial to separate Data Manipulation and generation of the charts. Then use the process functions to call the needed manipulations and chart options as optional parameters
I'm sorry if it's not an issue of chartkick, but after googling a bit I still have no clue.
What I want to do is set the default language to "zh" no matter what locales users use. So that the labels on line charts would be in Chinese.
According to Google's documentation, I should be able to set the language by using the language
parameter:
google.load('visualization', '1', {'packages':['corechart'], 'language': 'ja'});
I tried with line_chart api_console_page_index_path, library: {language: "zh"}
but it doesn't work.
Can you please help me?
<%= line_chart(my_data, library: {chart: {zoomType: 'x'}, title: {text: "Amazing Data"}}) %>
Won't create the zooming UI, but assigns the title just fine.
It seems like everything that should go to http://api.highcharts.com/highcharts#chart
is ignored
jsfiddle with correct end result: http://jsfiddle.net/WgNcm/
I'm thinking it'd be slick to have a chart range filter: https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control. Is there any way to pass that in to the library hash?
Is there currently a way to redraw a rendered chart with a simple js call? I'm wanting to make the charts more responsive and thought it could be an easy fix to attach a chart redraw function to window size event.
Hi,
I'm using chartkick
and group_date
for a multiple series chart like the one in the readme, let's say:
<%= line_chart @users.map{|user| {:name => user.name, :data => user.orders.group_by_week(:created_at).average(:price)}
} %>
Is there a way to customize the tooltip via chartkick? (In the above example, I need to change date
format and round price
to the second decimal)
TIA
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js", "chartkick" %>
Trying to do some advanced x-axis label formatting with with highcharts;
<%= column_chart weekly_samples_charts_path, library: {
xAxis: {
labels: {
enabled: true,
formatter: function() { ... }
}
}
} %>
but this failes, I get undefined method
function' for #<#Class:0x007f8dd57e3258:0x007f8dd53cb8c8>` error.
Is this expected?
In order to customize further, e.g. http://jsfiddle.net/doktormolle/2JWQY, I propose:
In erb land
<%= line_chart data, id: 'bam' %>
<%= line_chart data # since no id specified, won't be able to access visualization object in javascript land %>
In javascript land
ChartKick.charts['bam'] // returns visualization object
What do you reckon?
<%= line_chart [
{ name: "Total", data: statistics_path(key: "persons", subkey: "total") }
]
%>
Produces a chart, but never hits the url.
I'm new to web dev and this is more of a question then an issue. I'm trying to turn off the the vertical and horizontal labels but just can't get it right. Here is the code:
<%= column_chart Vehicle.group_by_month(:rego_due).count, :height => "150px", :library => { :backgroundColor => "#f5f5f5", :colors => ['#004d84', :hAxis => { :textPosition => 'none' } ]} %>
Is there a list of all the library members that can be accessed or an examples? Thanks
Is there any way to group data by two values?
Grouping data by month and year seems to not be handled very well. The best way i can figure to do it is with using Date() objects and each value is given a general full date for first of the month but you only show the month and year data.
I am dealing with data that looks like:
{"July"=>4, "August"=>120, "September"=>6, "October"=>10, "November"=>2, "June"=>1, "February"=>3, "March"=>5, "December"=>6, "May"=>1, "January"=>25, "April"=>72}
I would like to add year either as part of the month key name such as "July 2013" or possible as:
{"month" => "July", "year" => "2013", "count" => 4},{"month" => "September", "year" => "2013", "count" => 6}
Is there any suggestions on the best way to deal with this?
Hi,
using this library I noticed that there is no option to allow discrete line/area charts. It would be useful in some scenarios.
Since at the moment I don't need continuous charts, I switched time
to false
in processLineData
and datetime
to string
in renderLineChart
but it would be great if that could be configurable with an option
This is an awesome library. Thanks!
I'm pretty new to Ruby, so this could be a horrible question. Sorry if this is the case.
I'm just curious if there is an easy way to update the x-axis labels with formatted strings? I'm building a big hourly date time chart and the x-axis labels are cluttered because its a pretty huge chart.
Any suggestions are greatly appreciated,
Thanks!
Nick
Really appreciate!
Is it possible to add support for Chart.js?
I have no experience with submiting to opensource software, and dont know much of javascript; but with some help, i could do it.
Trying to use pie chart on a invoice model and because it contains a date field l get the following
PG::Error: ERROR: column "invoices.date" must appear in the GROUP BY clause or be used in an aggregate function
LINE 1: ... ORDER BY date DESC
Have tested on model without a date field and works fine
Here's an example: http://jsfiddle.net/zPEML/
In this one it doesn't load even when inspecting the element.
This is most likely because my javascript is defined at the bottom of the file, not above the script generated by Uncaught ReferenceError: Chartkick is not defined
Hi,
It would be nice if we could specify locale for google charts: https://developers.google.com/chart/interactive/docs/library_loading_enhancements#loadwithlocale
Here's the data:
{"2013-05-20 00:00:00+00":0,"2013-05-21 00:00:00+00":0,"2013-05-22 00:00:00+00":116906}
What am I doing wrong?
I was hoping to use Chartkick with Padrino, which is a Sinatra-based framework that can be made Rails-like by including ActiveRecord, ActiveSupport, etc.
However, Chartkick won't run without Rack 1.4.5. Padrino requires Rack 1.5, and so I'm getting this error:
Bundler could not find compatible versions for gem "rack":
In Gemfile:
chartkick (>= 0) ruby depends on
rack (~> 1.4.5) ruby
Haven't had a chance to play with Chartkick but it seems like it's something that could run with just ActiveRecord, just like the geocoder gem (https://github.com/alexreisner/geocoder)?
Are you able to add the ability to chart timelines?
(https://developers.google.com/chart/interactive/docs/gallery/timeline)
Thanks!
Does chartkick currently support the Google Charts DataTable Roles?
function negativeValues(series) {
var i, j, data;
for (i = 0; i < series.length; i++) {
data = series[i].data;
for (j = 0; j < data1.length; j++) {
if (data[j][1] < 0) {
return true;
}
}
}
return false;
}
@ankane Can you explain what the .data is used for in the data = series[i].data;
line?
The .data is causing a .data not defined error when i start creating the timeline. When i remove the .data everything appears to work correctly. I have never used the data other than with jquery. Is this supposed to be a jquery reference?
Not sure if this has been fixed already (because I've seen other issues regarding this)...(I installed Chartkick about 5 days ago), but for some reason, I can't get chartkick to display the proper date (I'm using unix time, which I've converted to Ruby datetime)
This is the same data, in 3 different types of charts. For some reason, the column chart works, but the line and area don't.
Currently the createDataTable function supports a single column type. Up tot this point this has been "String" for the purpose of the charts that are currently supported. But the createDataTable function needs to be rebuilt to allow multiple columns to be created. Example usage is for the timeline visualization that requires a Start and End data column. #39
http://www.highcharts.com/demo/area-stacked
We are strongly considering chartkick for our upcoming project, However we frequently need stacked area & bar charts. If this is not incredibly hard to implement we request it.
if it is non trivial, point us in the right direction & well send a pull request if we get something working
Hey @ankane is there any instructions for adding additional charts?
Thanks for the useful library.
I am looking to use this feature of Highchart:
http://highcharts.uservoice.com/forums/55896-general/suggestions/2542204-set-timezone
See the example:
http://jsfiddle.net/highcharts/y6Q7p/
What would be the best way to use this with chartkick ?
Thanks again,
First thanks alot for this gem i have been trying for more than a month to create a dynamic gem but i always fail, but its easier with your gem thanks alot <3 .
Second I have Ticket model belongs_to employee_department and belongs_to state , i would like to show on pie chart the count of states (in state model i have :name attribute ) for each employee_department ( :name attribute ).
Third I used pie chart with one model it looks different from the one you have in the example ( your pie chart example shows with percentage and small squares ), how you change its theme ?
Note: I have <%= javascript_include_tag "/assets/highcharts.js", "chartkick" %>
thanks again for this gem ๐
I think your examples shouldn't rely on the grouping gem. It'd be nice to see what the line_chart method is expecting without any other plugins involved. Something like
I'm a pretty inexperienced rails dev, so maybe I'm missing something fundamental.
First of all thanks for this super eay, quick setup gem! Works a charm even with turbolinks.
However Chartkick relies on having JavaScript loaded before the rest of the page. It returns an error when loaded in the footer or when using async="async", which are both best practices performance-wise.
Love the library and wonder if you'd consider adding (inline) sparklines. They are compact and super useful: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR
Wow! Thank you for this gem. It's so nice and simple.
I browsed through the JS and Ruby helpers and I was wondering if it would be possible to pass in options via the Ruby helper which get passed into the Highcharts or Google Charts JS options. I tried something like:
<%= line_chart series, legend: { position: "left" } %>
Is this something that would work?
Example JSON:
{
"2013-05-20 03:02:30 UTC": {
"bad": "3",
"good": "4",
"neutral": "10"
},
"2013-05-20 05:55:52 UTC": {
"good": "1724",
"total": "52072",
"locatable": "20025",
"unmatched": "51501"
}
}
Is there a way to pass data options to highcharts? So i can use an option like 'sliced' of piecharts:
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.