My Dashboard
section "Graph", do
div do
render 'graph'
end
end
_graph.html.erb
<script type="text/javascript">
$(function(){
new Highcharts.Chart({
chart: {
renderTo: "charts"
},
title: {
text: "Orders"
},
xAxis: {
title: {
text: "X axis"
}
},
yAxis: {
title: {
text: "Y axis"
}
},
series: [{
data: [1,3,5,7]
}]
});
});
In which folder I place that _graph.html.erb so that it can loaded. is JavaScript in it works correctly after that?
Charts integration on active admin is pretty simple, all you have to use is get chartkick in your Gemfile.
Then in your dashboard.rb you can create another panel within a column and show your graph.
Example:
panel "Top stuff --all name-removed for brevity--" do
# line_chart Content.pluck("download").uniq.map { |c| { title: c, data: Content.where(download: c).group_by_day(:updated_at, format: "%B %d, %Y").count } }, discrete: true
# column_chart Content.group_by_hour_of_day(:updated_at, format: "%l %P").order(:download).count, {library: {title:'Downloads for all providers'}}
# column_chart Content.group(:title).order('download DESC').limit(5).sum(:download)
bar_chart Content.group(:title).order('download DESC').limit(5).sum(:download) ,{library: {title:'Top 5 Downloads'}}
##
# line_chart result.each(:as => :hash) { |item|
# {name: item.title, data: item.sum_download.count}
# }
end
end
Related
Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing
From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react
I'm rendering a chart using highstocks on my rails application on a index.html.erb file, however when I try to load the chart, I get the following error on the firebug console,
ReferenceError: HighCharts is not defined
new HighCharts.Chart({
My index.html.erb file is as follows
<div id="quotes_chart", style="width=560px; height:300px;">
<script>
$(function(){
new HighCharts.Chart({
chart : {
renderTo: "quotes_chart"
},
title : {
text: "Daily trades"
},
xAxis : {
type: "datetime"
},
yAxis : {
title: {
text: "Shillings"
}
},
tooltip : {
formatter: function(){
return HighCharts.dateFormat("%B %e, %Y", this.x) + ': ' + "Kshs" + Highcharts.numberFormat(this.y, 2);
}
},
series: [
<% { "Telecommunication" => StockQuote.telecomm, "Agriculture" => StockQuote.agric }.each do |name, prices|
%>
{
name: <%= name %>,
pointInterval: <%= 1.day * 1000 %>,
pointStart: <%= 2.weeks.ago.to_i * 1000 %>,
data: <%= (2.weeks.ago.to_date..Date.today).map { |date| StockQuote.price_on(date).to_f}.inspect%>
},
<% end %>
]
});
});
</script>
</div>
In my application.html.erb is as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="components/highstock/highstock.js"></script>
<%= javascript_include_tag "jquery-1.11.0.min", "highcharts" %>
In my app assests/javascripts folder I have both the jquery-1.11.0.min.js and highcharts.js files as downloaded from highcharts.com
What might I be doing wrong?
var chart=null;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: '${model.title}'
}
...
Set the chart to null because this error can occur due to multiple declaration that you may not be aware of. Assumption is all imports are correct
You need to load Highcharts only once, not twice as you have. So, I recommend to use only:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="components/highstock/highstock.js"></script>
Because Highstock includes all Highcharts options. Morever please take care about correct paths to your files, because it looks like a problem only with it.
I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},
In my app users record their weight and the date that weight belongs to. I want that data displayed in a HighStock line graph. Should be very simple, but I've been working on this (partially) over the past 2 months. I've looked at a bunch of different things and I can't get this to work.
The exact data I'd like displayed is the actual line in the line graph to be their weight, y-axis will be their weight, x-axis will be the date that the user entered for that weight.
i.e. user enters their weight in the form for yesterday as 135 and the date they put in with the form is 12/3/2012.
Don't know if it matters but a User has_many weights, a weight belongs_to a user.
Here is what I have and I'm getting a bunch of different errors. I'm definitely missing/not understanding something here:
Weight Model:
class Weight < ActiveRecord::Base
def user_weight_series(user, weight)
weights_by_weight_date = Weights.select("date(weight_date) as dater, content as weights")
weights_by_weight_date.map do |record|
parts = %w[%Y %m %d].map{ |s| record.dater.send(s) }
"[Date.UTC(#{parts.join(',')}), #{record.weights}]"
end
end
application.html.erb
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'weight_chart',
type: 'line',
marginRight: 20,
marginBottom: 25
},
title: {
text: 'Your Weight Over Time',
x: -20 //center
},
yAxis: {
title: {
text: 'Weight'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
x: -10,
y: 100,
borderWidth: 0
},
scrollbar: {
enabled: true
},
rangeSelector : {
selected : 1
},
credits: {
enabled: false
},
series: [{
tickInterval: <%= 1.day * 1000 %>,
pointStart: <%= 3.weeks.ago.at_midnight.to_i * 1000 %>,
name: 'Weight',
data: [ <%= current_user.user_weight_series(user, weight).join(", ") %> ],
}]
},
function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker()
},0)
});
});
});
What's the best way to do this? Thank you in advance!
Here is the process I use, along with some tips to get you started:
Work backwards from the desired display you want to create, using dummy json data to populate the chart.
Figure out how to create a ruby hash of your real database data that matches the dummy json data series. For the timestamps, convert them to a highcharts-readable format like this:
SOME_DATE.to_time.to_i * 1000
Have one of your controllers render the resulting ruby hash as json.
def some_controller_method
#chart_data_series = [] // your desired series here
respond_to do |format|
format.json { render :json => #chart_data_series }
end
end
Read this json from its appropriate page and pass it into your chart series. One way is to use d3:
function buildChart(){
d3.json("/path/to/your/data.json", function(error, json_data) {
$('#chart_container').highcharts({
chart: {type: 'column'},
// options, options, etc
series: json_data,
// options, options, etc
});
});
});
I'm making an app with highcharts, after having many problems I finally make plotted but now takes the correct data but I need to make some adjustments.
for example if an user registers a new log on the same day it should take the cost of the log and add it to the logs of the same day or simply show if there are no more, I follow the railcast episode 223 and helpme a little. but my issue is: when I add a new log it create a new bar:
(there are only 2 logs, I'm gonna create a new log)
here is that my app do.
also I need to fix the datetime, here is my code:
$(function () {
new Highcharts.Chart({
chart: { renderTo: 'foo_chart',defaultSeriesType: 'column' },
title: { text: 'tanking costs daily' },
xAxis: { type: 'datetime' },
yAxis: {
title: { text: 'cost' }
},
tooltip: {
formatter: function () {
return Highcharts.dateFormat("%B %e %Y", this.x) + ': ' + '$' + Highcharts.numberFormat(this.y, 2);
}
},
series: [{
name: 'Days',
pointInterval: <%= 1.day * 1000 %>,
pointStart: <%= 1.weeks.ago.at_midnight.to_i * 1000 %>,
data:[
<% for tankinglog in #tankinglog %>
<%= "(" + tankinglog.cost.to_f.round(2).to_s + "),"%>
<% end %>
]
}]
});
});
if you see the list on the picture I have 3 logs...the last 2 logs have the same date these must appear in the same bar with the sum of their costs
Your question is very confusing. You want all the data summed into one bar? A new bar is created for each number you have in the data list. So your for-each loop is creating a new bar for each item in #tankinglog. The solution is to sum what's required into one number, then add it to the list.
I'm not sure exactly what you're asking because your question is poor but here are all the values summed into one bar.
$(function () {
new Highcharts.Chart({
chart: { renderTo: 'foo_chart',defaultSeriesType: 'column' },
title: { text: 'tanking costs daily' },
xAxis: { type: 'datetime' },
yAxis: {
title: { text: 'cost' }
},
tooltip: {
formatter: function () {
return Highcharts.dateFormat("%B %e %Y", this.x) + ': ' + '$' + Highcharts.numberFormat(this.y, 2);
}
},
series: [{
name: 'Days',
pointInterval: <%= 1.day * 1000 %>,
pointStart: <%= 1.weeks.ago.at_midnight.to_i * 1000 %>,
data:[
<%
result = 0;
for tankinglog in #tankinglog
result += tankinglog.cost.to_f
end %>
<%= result.round(2).to_s %>
]
}]
});
});