score:1
ok, the problem was that there was no data passed into the coffeescript.
i managed getting this done using the gem 'gon'. here is what i did:
my app.js.coffee file looks like this:
jquery ->
months = $.map( gon.sales, ( val, i ) ->
val.month
);
amts = $.map( gon.sales, ( val, i ) ->
val.amount
);
data = {
labels : months,
datasets : [
{
fillcolor : "rgba(151,187,205,0.5)",
strokecolor : "rgba(151,187,205,1)",
pointcolor : "rgba(151,187,205,1)",
pointstrokecolor : "#fff",
data : amts
}
]
}
in my sales_controller.rb i've added the following:
def index
@sales = sale.all
gon.sales = @sales
end
in my application.html.haml layout file:
= include_gon
and ofcourse in the gemfile:
gem 'gon'
finally in index.html.haml:
%canvas#canvas{:height => "400", :width => "600"}
and now the chart in dynamically populated with data from my sales table.
score:0
you need to fetch sum of amount by grouping on created_at
's month.
orders = order.select("date_trunc('month', created_at) as month, sum(amount) as sum_of_amount").group("month")
months = orders.collect(&:month)
amts = orders.collect(&:sum_of_amount)
now you just need to pass months
in labels:
and amts
in data:
.
good luck!
Source: stackoverflow.com
Related Query
- Rails chart.js data coffee script
- what is wrong with my code ? java script chart position
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- how to display table from chart js data in canvas.js using java script .?
- Chartjs Bar Chart showing old data when hovering
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Chart JS data labels getting cut
- chart js tooltip how to control the data that show
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS show multiple data points for the same label
- Add all data in the tooltip of Chart JS
- How to display data labels outside in pie chart with lines in ionic
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Show data dynamically in line chart - ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJS: Draw vertical line at data point on chart on mouseover
- Chart js data to start at zero
- Chart Js Show the old data on mouse hover
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Chart js shows old data on mouse hover
- React ChartJS 2 : Get data on clicking the chart
- Mouse over on line chart data active other data-set in Chart.js
- Chart js: Update line chart having two data sets
- Parsing JSON data into Chart.js bar chart
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to update data Chart in async way in Angular Chart.js?
More Query from same tag
- PrimeNg Pie Chart - By default show all tooltip?
- Generate PDF from HTML page made with Bootstrap and ChartJS in Laravel
- Dynamically update the options of a chart in chartjs using Javascript
- chart.js: Chart in chart
- How to display grouped data in ChartJs
- Angular 8 & ChartJs change color in pie chart
- Why chart.js on meteor.js rebuilds itself instead of interpolate new point?
- CakePhp3 - Showing values on ChartJs
- How to remove x axis scale labels Chart.Js
- Chart.js not showing line chart. What am I doing wrong?
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Why is my dependency injection not working in Angular?
- JavaScript - Chart.js tooltip shows wrong x-axis value
- How to draw lines between minimum and maximum value to average value in chartJS?
- Radar Chart, Chart.js v3.2 labels customization
- Using string list as Chart.js label
- grouped bar dataset in djanog template loop
- ChartJs - set x-axis ticks at specified/fixed intervals
- JavaScript variable in an object
- Displaying line chart for multiple datasets using chart.js
- TemplateSyntaxError: tag name expected
- How to hide section in a Chart.js Pie Chart
- Chart.js v3.2 Change Radar background shape from Polygonal-Triangle to Circular
- ChartJs: X Axis labels cutting at bottom
- Remove only y-axis line from chat drawn using chart.js 1.0.2
- How show data label in the graph on Chart.js?
- How can I pass the data into the chartjs label?
- Difficulty in using php json_encode data received in javascript to display graph using chart.js library
- ChartJs. How to stretch up line graph to the edges?
- Chartjs - Stacked bar chart blocking other values