score:2
Accepted answer
public function index()
{
$men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
$women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
return view('home', compact('men_learning', 'women_learning'));
}
<script type="text/javascript">
$(function(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Men', 'Women'],
datasets: [{
label: 'Men',
data: [{!!$men_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(40,167,69,1)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0 ,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(254,86,83,.8)',
},
{
label: 'Women',
data: [{!!$women_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(220,53,69,.8)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(63,82,227,.8)',
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: true,
drawBorder: false,
color: '#f2f2f2',
},
ticks: {
beginAtZero: true,
stepSize: 100,
callback: function(value, index, values) {
return value;
}
}
}],
xAxes: [{
gridLines: {
display: false,
tickMarkLength: 15,
}
}]
},
}
});
});
</script>
Source: stackoverflow.com
Related Query
- How to pass data in Laravel with Chart.js
- How to display chart using Chartjs with JSON data in Laravel
- How to display data labels outside in pie chart with lines in ionic
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- How to create chartjs chart with data from database C#
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How to use JSON data in creating a chart with chartjs?
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to create a chart with chartjs.org with data from an array?
- how to write labels along with data on top and bottom of each stack in bar chart
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to dynamically update data of line chart used with chart Js?
- How to get data on chart based on selected date (Filtering data Chart JS with datepicker)
- How do I destroy/update Chart Data in this chart.js code example?
- How to create a chart.js scatter chart with data from two lists
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- how to create a bar chart with php data variables
- How to create a chart-js pie chart with PHP data variables?
- How can I add new data points to an existing chart with chart.js?
- Laravel Chart JS change data with dropdown
- Pass data to Chart Js Laravel
- How to pass data for stacked chart in vue-chartkick
- How can I build some chart with Chart.js and ng2-charts using an array of revenus & budgets per month date as Data source?
- How to fill my chart (chart.js) with my own data from API
- How to set data values as labels in Chart.js with a Radar Chart
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to prevent first/last bars from being cut off in a chart with time scale
More Query from same tag
- What is the order in which the hooks (plugins) of Chart.js are executed?
- Adding a Label to Chart js Pie Graph
- Chart.js -> Displaying % on pie chart
- Angular Chartjs error TS2304: Cannot find name OffscreenCanvasRenderingContext2D
- Setting ChartJS plugin on vue-chartjs not working
- Mixed Chart calculating difference between two bars - ChartJS
- Chart.js not showing line chart. What am I doing wrong?
- Chart js display empty plot
- Charts.js polar area scales
- Canvas JS using ajax call
- Chart.js multiple include prevention
- HTML5 chart stacked bars with repeated colors
- ChartJS animate only one dataset
- Chart.js find visible data points following zoom
- How do I stop chart js from auto rescaling the y axis upon calling chart.update()?
- Hide Y-axis labels when data is not displayed in Chart.js
- updating chartjs pie chart by using .keypress() not working
- Charts.js line chart, how to hide y-axis start and end label if data is same
- Customize legend AngularJS
- Chart.js 3.7 version. How to modify legend label?
- How to open a new Tab with javascript and display some chart
- How to save the previous state and current state for a barchart in reactjs
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- How can I show a subset of data on pie pieces in Chart.JS while still displaying the superset when hovering?
- Dashed line for missing data in Chart.JS (spanGaps style)
- How to make chartJs stacked bar always rounded when data is 0?
- Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'
- (ng2-charts, angular) Doughnut chart not showing up after AOT? (but filltext is working)
- How can I add shadow color below the line in chart.js charts?
- Aligning zero on y axis to the labels on x axis of line chart in chartjs