Highcharts won't work properly - javascript

OK,
so i have this chart
http://jsfiddle.net/7bftp/
I set left Y legend max to 100, but it shows 150 :/
It MUST be to 100 because it's represents %.
Second problem, why i don't have sum of bars above it?
2323+125 should give me 2448 above first bar

You have to adjust the max value of other y-axis also
http://jsfiddle.net/diode/7bftp/1/
...
...
yAxis: [{
min: 0,
max: 4000,
...
...
...
{
min: 0,
max: 100,
...
...

Related

Chart JS: Set Spacing Between Ticks on Y-Axis

I am building a line chart using ChartJS. I want to increase the spacing between the vertical tick marks on the Y-Axis. Here is a slice of the relevant options being passed to ChartJS. Is there a property in the ticks section that will allow me to increase the spacing between the ticks, thereby increasing the total height of the chart canvas?
lineChartOptions = {
scales: {
yAxes: [
{
id: 'y-axis-0',
position: 'left',
ticks: {
... // <-- WHAT OPTION GOES HERE?
}
},
Note: It is not an option to simply decrease the height of the canvas using CSS, the canvas stretches to fill the space thereby distorting the chart.
If not much different data you can use this to set range
//EXAMPLE DATA [533,743,612,983]
ticks: {
beginAtZero: false,
stepSize: 100,
max: 1000
min: 500
}

Defining the height of the jqPlot horizontal bars and the distance between them

is there a way to define the height of the horizontal bars and the distance between them. I am searching for a possibility to put as many horizontal bars in a view as possible.
Thanks!
My solution:
seriesDefaults: {
...
rendererOptions: {
...
barPadding: 1,
barMargin: 10,
barWidth: 20,
...
}
},

d3 network diagram window boundries

I have a simple network diagram. It contains of circle elements and lines connecting them. Now sometimes there could be quite a lot of those circles and they go 'behind' the screen (see the image attached).
The image doesnt cut off the edges, its the edge of my screen :)
Its a force diagram (code used can be found in this fiddle ). Setting the width = 400;
height = 500; or changing these two variables doesn't really help.
What variable am I missing here. Id like them not to go 'behind' the screen or is it just how it should behave ?
Thanks,
Neil
DEMO
map.set('C1', {
fixed: true,
x: 100,
y: height / 2
});
problem is that your 'C1' is fixed at 100 in x axis change it to 200 or 250 according to your need
map.set('C1', {
fixed: true,
x: 250,
y: height / 2
});
OR
you can change fixed: false, to achieve the same DEMO2
map.set('C1', {
fixed: false,
x: 100,
y: height / 2
});
OR
set C1 width half DEMO3
map.set('C1', {
fixed: true,
x: width/2,
y: height / 2
});

How to avoid top space and make full dimension in justgage?

Is there any option to avoid top space.
Actually I am looking solution to show as full width and full height.
demo http://jsfiddle.net/ugFmE/12/
var g = new JustGage({
id: "spedometer",
title: "Monthly expense",
value: 1986,
min: 0,
max: 2450,
shadowOpacity: 0,
relativeGaugeSize: true
});
Add some css to the div to make it go up...
#spedometer{
margin-top: -##px
}
where '##' is the amount of pixels you would like to move the div towards the top..
demo http://jsfiddle.net/ugFmE/17/
Use style attribute of div tag and change value of top-margin to negative. I hope that would help you
<div id="g1" style= margin-top:-100px;></div>
window.onload = function () {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 100,
relativeGaugeSize: true
});
}

Highcharts spacing issue on xAxis in column chart

When I create a simple column chart with at least 2 datapoints there is annoying spacing as you can see in the jsfiddle. The width of the spacing scales with the smallest distance between two datapoints. I can't find any other options besides the one I've already set (min, max, minRange) to prevent the spacing.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 23,
minRange: 23
},
series: [{
data:[[0,10], [23,10]]
}]
});
});
http://jsfiddle.net/f5JUU/2/ (Big spacing)
http://jsfiddle.net/f5JUU/3/ (No spacing. This is how the other Jsfiddle should look like too...)
Not sure if you mean the spacing between the points, or the size of the points.
if the size, use pointRange:
http://jsfiddle.net/f5JUU/4/
pointRange:1
If you want the data to be like your 'big spacing' example, but the chart to look like your 'small spacing' example, then you just need to make your x axis max value much larger.
http://jsfiddle.net/f5JUU/5/
You can try to use groupPadding / pointPadding / pointWidth parameters and adapt columns correct with your expectations.
All parametsers are documented here: http://api.highcharts.com/highcharts

Categories

Resources