score:0
Accepted answer
the code example for your reference:
<div style="width:600px;height:400px;">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.bundle.min.js"></script>
<script type="text/javascript">
var colors = ["#009ea0", "#a7a9ac", "#d15f27", "#bad80a", "#e0aa0f", "#754760", "#373535"];
var listname = "cl26"; //data list name
var xaxisname="title";
var yaxisname=["java","python","sharepoint","dotnet"];
$(document).ready(function() {
var requesturi = _sppagecontextinfo.webabsoluteurl +
"/_api/web/lists/getbytitle('"+listname+"')/items";
//execute ajax request
$.ajax({
url: requesturi,
type: "get",
headers: { "accept": "application/json;odata=verbose" },
success: function (data) {
var mylabels=[];
var mydatasets=[];
$.each(data.d.results, function(i, item) {
mylabels.push(item[xaxisname]);
});
for(var i=0;i<yaxisname.length;i++){
var mydata=[];
$.each(data.d.results, function(j, item) {
mydata.push(item[yaxisname[i]]);
});
mydatasets.push({
label:yaxisname[i],
backgroundcolor:colors[i],
data:mydata
});
}
buildbarchart(mylabels,mydatasets);
},
error: function () {
//alert("failed to get details");
}
});
});
function buildbarchart(mylabels,mydatasets){
var barchartdata = {
labels: mylabels,
datasets: mydatasets
};
var ctx = document.getelementbyid('mychart').getcontext('2d');
var mybar = new chart(ctx, {
type: 'bar',
data: barchartdata,
options: {
title: {
display: true,
text: 'myproject'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xaxes: [{
stacked: true,
}],
yaxes: [{
stacked: true
}]
}
}
});
}
</script>
Source: stackoverflow.com
Related Query
- Vertical stacked bar chart using SharePoint List
- Vertical stacked bar chart with chart.js
- How to create stacked bar chart using react-chartjs-2?
- Multiple stacked bar chart using ChartJs
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Stacked bar chart with rounded corner of bar using Chart.js
- Draw stacked horizontal bar chart with Average line using ChartJS
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Chartjs v2.0: stacked bar chart
- Moving vertical line when hovering over the chart using chart.js
- Horizontal stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Click event on stacked bar chart - ChartJs
- Overlapping Bar Chart using Chart.js
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to display inline values in a stacked bar chart with Chart.js?
- Chartjs - show elements in all datasets on hover using bar chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- set y-axis scale manually in a bar chart using angular-chart.js
- Stacked horizontal bar chart along total count with chart.js
- X-axis multiple colored label for bar chart using chart.js
- Stacked bar chart results in misaligned bars
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- Adding custom text to Bar Chart label values using Chart.js
- applying background-color in bar chart using chart.js
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Add a custom label to the top or bottom of a stacked bar chart
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
More Query from same tag
- Convert charts from vue-chartjs to a PDF
- How to create dynamic D3 tickFormat in dc charts
- Chart.js - Line charts: draw points between grid lines
- ChartJS 2.7.0 updating and exporting as png
- How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- Unable to get the expected legend shown in chart js
- Chart.js Formatting dual axis and labels
- ChartJS not working in Vue
- ChartJS create chart Ajax
- Animation chart js (line), animate chart drawing line by line
- Bar chart with min height and zero values - ChartJs
- how to write labels along with data on top and bottom of each stack in bar chart
- How to keep bars same size even when adding new datasets
- Y axis set custom value using chart.js
- Chart js: Update line chart having two data sets
- Chart.js legend is undefined
- chartjs mixed type display want to set display none for some bar
- The chart doesn't display the data from my call to the API with Axios
- How to change cursor on hover of data labels in chart.js version 3?
- Showing only entire units on ChartJS
- Chart.js - combine data and label into a single object
- Plotting multiple lines (line chart) in Apache Zeppelin using AngularJS
- Trying To Change only each Label's title in angular Chartjs
- Reducing Y-axis in chart.js
- How to use chart.js script to draw multiple pie Charts
- iframes without sandbox attribute is a Vulnerability
- ChartJS hide labels on small screen sizes
- How can I effectively adjust the dimensions of a canvas element?
- ng2-charts : Newly added rows not getting displayed on phone devices