I am using dojo to create a bar chart with multiple vertical axes (one for an actual count, the other for a percentage), and when I do, the title for the right axis always gets cut off (i.e., the half of it that's furthest from the chart gets cut off by the edge of the chart). I've already tried using chart.resize(w,h), but this only shrinks the data in the chart, while maintaining the same margins from the edge (and thus the same title cut as before). Does anyone know how to get the title to properly display? For reference, here's the code I'm using, both to create the div node and the chart.
chartNode = domConstruct.create("div", {
id : this.context.viewid + "_ChartNode",
}, this.context.element, "first");
domStyle.set(chartNode, {
width : "800px",
height : "400px"
});
var chart = new Chart(chartNode);
chart.addPlot("default", {
type : "Columns",
markers : true,
gap : 5
});
chart.addPlot("something", {
type : "Columns",
vAxis : "percent"
});
chart.addAxis("x", {
title : "Person",
titleOrientation : "away",
minorTicks : false,
majorTickStep : 1,
dropLabels : false
});
chart.addAxis("y", {
vertical : true,
fixLower : "includeZero",
title : "Count",
min : 0,
max : data[0].totalSubmitted
});
chart.addAxis("percent", {
title : "Percentage",
titleGap : 20,
vertical : true,
leftBottom : false,
fixLower : "includeZero",
min : 0,
max : 100,
})
chart.addSeries("y", data);
chart.render();
Edit: This is what my code is actually generating, with the cutoff being highlighted in red.
Related
I am trying to use the Charts.js library in my android app inside a webview. I tried changing it to chartsnew.js library too, but I get the same error and the chart does not load in my app.
D/chromium: Unknown chromium error: -6
I have tried searching all forums and questions posted before, tried double checking that the URL to my file is correct and that the JavaScript is also enabled inside.
The app originally used an ajax request to pull data, but since things were not working I tried putting the static data. The graphs load and show if I open the file directly in chrome. But shows a blank canvas in android webview.
HTML File attached :
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../general/js/ChartNew.js"></script>
<script src="../general/js/shapesInChart.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : false,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
};
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Bar(data, options);
});
</script>
</html>
EDIT 1 :
ok So I was not able to load the local HTML file inside the android web-view, no matter what I tried. But then I still moved ahead and tried to modify my code to get the dynamic data from an ajax request. Surprisingly, it has started working on the dynamic data
Here is my code for the dynamic pull :
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../general/js/Chart.js"></script>
<script src="../general/js/Chartjs.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<canvas id="myChart" width="350" height="350"></canvas>
<script type="text/javascript" charset="utf-8">
var id=replaceName;
var regDate = replaceDate;
$(document).ready(function() {
$.ajax({
url:"<serverurl>customer/betGetBloodPressure.jsp",
data:{"id":id,"regDate":regDate},
type:"post",
dataType:"jsonp",
jsonp: "callback",
success: function(res) {
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : 3,
//Number - The value jump in the hard coded scale
scaleStepWidth : 50,
//Number - The scale starting value
scaleStartValue : 0,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'sans-serif'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 0,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null,
spaceBetweenBar : 0 ,
// String or array - fill color when hovered
hoverBackgroundColor: "rgba(255,99,132,0.4)",
// String or array - border color when hovered
hoverBorderColor: "rgba(255,99,132,1)"
};
var data = {
labels : ['MIN BP', 'AVERAGE BP', 'MAX BP'],
datasets :
[
{
label: 'Max Average Of Age #',
fillColor: '#a280ff',
data: [parseInt(res.aoa_lower_low),parseInt(res.aoa_avg_low),parseInt(res.aoa_higer_low)],
yAxisID: "y-axis-0"
},
{
label: 'My Info. #',
fillColor: '#7c4dff',
data: [parseInt(res.my_low),parseInt(res.my_avg),parseInt(res.my_high)]
},
{
label: 'Min Average Of Age #',
fillColor: '#6933ff',
data: [parseInt(res.aoa_lower_high),parseInt(res.aoa_avg_high),parseInt(res.aoa_higer_high)]
}
]
};
scaleSteps = 10;
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Bar(data,options);
}
});
});
</script>
</html>
Now am struggling with one last problem, as seen in the screenshot my graph appears, but am not able to show the label values which can show me what each of my color indicates defined as the "label" parameter in the above code inside the datasets. Looks like I am missing something I need to define in my options, but not able to find out what. Please help
Graph pulled from AJAX Request
okay so I finally found the solution to the problem of my second EDIT in which label values descriptions for my color was not showing up.
Just added :
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
to my options. And awesome it works now. :)
Working Sample Image
I want to get all the scale x labels and scale y labels and also the main x label and y label in zingchart . How to do it ?
The "Main label X" and "Main label Y" are referred to as scaleX.label and scaleY.label in zingchart. You will need to specify a text parameter for that object like so :
scaleY :{
label : {
text : "Main label y"
}
}
By default, each tick mark in ZingChart is predetermined based upon values. To change this, there are two ways to accomplish this :
Using the scale labels property which takes an array of string values. This will overwrite the text value at each corresponding index. Note that this will not modify the placement of each node value on the chart; it is simply a visual change.
Using the scale values property which takes an array of numeric values. This will modify the actual values of how the scales are placed. i.e. scaleX.values : [4,5,6,7] will set the starting scale at a numeric value of 4 and end at 7.
Example showing the properties noted above :
var myConfig = {
type: "bar",
plotarea : {
margin : "dynamic"
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
],
scaleY : {
label : {
text : "Scale Y"
},
values : [30,40,50]
},
scaleX : {
label : {
text : "Scale X"
},
labels : ["first", "second", "third"]
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?
Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.
Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/
This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}
I wanted to include the JavaScript framework Chartjs into my JSP project. I tried a very simple bar chart with just one date (an average number of points). But it doesn't seem to have worked correctly. Here is a screenshot of the canvas object where I created the chart: http://i43.tinypic.com/15wc6md.png
My code is:
<canvas id="chartjs"></canvas>
<script>
//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#chartjs").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
var data = {
labels : ["Durchschnittsgesamtpunktzahl aller Teilnehmer"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [<%=examAveragePoints%>]
}
]
}
var options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : true,
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
}
new Chart(ctx).Bar(data,options);
</script>
The problem is that you only have one object in your dataset.
Chart.js sets the object with the lowest number to 0 on the y-axis. I'm facing the same problem but I havent found a solution yet. It seems to be a common problem with Chart.js
https://github.com/nnnick/Chart.js/issues/252
Try to use a hardcoded scale.
I'm pretty new to JavaScript and HTML5. I'm trying to print a normal line chart onto canvas using Chart.js. I followed the step by step guide on their website, but am unable to make the graph show.
This is the current code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHARTS</title>
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000">Aw Snap!</canvas>
<script>
context = document.getElementById('myCanvas').getContext('2d');
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
Line.defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
}
new Chart(context).Line(data,options);
</script>
</body>
What am I doing wrong that is causing my chart to not show?
Data variable is not yet initialized when you are calling "new Chart". Move the "new Chart" to end of JS block.
A tip - to check for errors use JS console.
Edit: The were two additional JavaScript errors - options variable was not intialized and Line was undefined variable. Please check my reply below for demo link.
You didn't declared the options variable either pass an empty array for options.
new Chart(context).Line(data,{});
Or declare the variable
var options = { ... }
new Chart(context).Line(data, options);
I think I have a solution to 'options' problem.
If you remove options from:
new Chart(context).Line(data,options);
so it looks like that:
new Chart(context).Line(data);
does it work?
It is because
Line.defaults = { ... }
is just a list of options you may change - you are not supposed to put the whole thing to your html file.
In other words instead of for example:
Line.defaults = { scaleOverlay : true, scaleOverride : true }
try:
var options = { scaleOverlay : true, scaleOverride : true }
The tutorial on the homepage of chartjs is confusing in this regard a little bit because it tells you to use an array of settings that are default in the main file. But you are supposed to just take the "insides" and use them, not the whole thing and it does not say to actually create options variable for it.
It took me an hour to figure out but only because I have made a mistake of not checking up JS Console immediatelly, as #Lauris hinted out in his answer :)
Also make sure that this:
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
points to a correct file. It looks like you just did that to hide the real path from StackOverflow community. In that case nevermind.
I hope this helps!