Menu
Chartjs is a pretty excellent open source tool, but had a quick question about a bar chart I'm trying to create. Given this chart data:
var chartData = {
labels : labels,
datasets :[
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
scaleOverride: true,
scaleSteps: 9,
data : values
}
]
}
I had hoped that the chart would draw with top value of 10, whether or not there were any values of 10. I thought the scaleOverride and scaleSteps would accomplish that.
Is it possible to get that output? I went thru the docs and did not see any other obvious options to set.
got it to work. My orig post did not include the javascript function at the bottom.
<div class="barChartTest" id="rating_12229" onload="drawChart();">
<input type="hidden" class="rating-component" comp-name="test1" comp-value="6"/>
<input type="hidden" class="rating-component" comp-name="test2" comp-value="7"/>
<input type="hidden" class="rating-component" comp-name="test3" comp-value="6"/>
<input type="hidden" class="rating-component" comp-name="test4" comp-value="5"/>
<input type="hidden" class="rating-component" comp-name="test5" comp-value="1"/>
</div>
<canvas id="rating_12229" width="50" height="20"></canvas>
and here is my javascript:
function buildRatingChartData(ratingId){
var comps = document.getElementById(ratingId).getElementsByClassName("rating-component");
var labels = [];
var values = [];
for(var i=0; i<comps.length; i++){
labels.push(comps[i].getAttribute("comp-name"));
values.push(comps[i].getAttribute("comp-value"));
}
var chartData = {
labels : labels,
datasets :[
{
scale: 10,
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
scaleOverride:true,
scaleSteps:9,
scaleStartValue:0,
scaleStepWidth:1,
data : values
}
]
}
return chartData;
}
here was where I added those options and got the output I wanted:
function drawCharts(){
var ratings = document.getElementsByClassName("brewRatingData");
for(var i=0; i<ratings.length; i++){
var ratingId = ratings[i].getAttribute("id");
var canvasId = ratingId.replace("brewRating", "coffeeBarChart");
var brewChartData = buildRatingChartData(ratingId);
var ctx = document.getElementById(canvasId).getContext("2d");
window.myBar = new Chart(ctx).Bar(brewChartData, {
responsive : true,
scaleOverride:true,
scaleSteps:10,
scaleStartValue:0,
scaleStepWidth:1,
});
}
}
399
Also include scaleStartValue and scaleStepWidth as stated in docs.
Example
This example creates a bar chart with Y-axis starting at 0 and ending at 900. To do that, step width is set to 100 and number of steps are set to 9.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id="income" width="600" height="400"></canvas>
</body>
</html>
JS
var barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : [456,479,324,569,702,600]
},
{
fillColor : "rgba(73,188,170,0.4)",
strokeColor : "rgba(72,174,209,0.4)",
data : [364,504,605,400,345,320]
}
]
};
var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData, {
animation:false,
scaleOverride:true,
scaleSteps:9,
scaleStartValue:0,
scaleStepWidth:100
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
