Develop Reference

Flot Chart Bar spacing

I am using flotchart JS for showing bar graphs. However, I can't seemed to fix the spacing between bars.
I have enabled panning already. However, sets the width of the bar according to the placeholder. How can set each bar's spacing according to its label?
this is my code:
$.plot("#graph", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
},
yaxis: {
panRange: [0, null],
plotPan: false //pan axis is allowed for plot pan
},
pan: {
interactive: true,
mode: "smart",
active: true
}
});

An alternative solution to your problem could be to rotate the tick labels for example by using the tickrotor plugin:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
rotateTicks: 90
},
You may need to increase the height of the chart since the labels now take up more space. See this fiddle for a full example.

You can achieve this by limiting the number of bars shown at once by giving a max property for the xaxis:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
max: 7, // set according to your needs, maybe dynamic depending on chart width
min: 0
},
You then have to use panning to see the other bars. See this fiddle for an example.

HIghcharts Common spacing at yaxis in Dynamic data

I am displaying a area spline dynamic data graph where the dynamic values are fetching from a particular API. The problem is, when the dynamic data are displaying, the graph series goes below the y-axis or above the graph's customized design.
From my side, I found that the problem is with y-axis spacing. So, my question is: could I use a common spacing at y-axis? And the series must display above a particular pixels (height) from x-axis. At the same time, I can use the options min, max, tickinterval because of changing the data from external source.
Here is my y-axis,
yAxis: {
title: {
text: '',
},
opposite: true,
offset: 0,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.5f}'
}
},
gridLineWidth: 0.1,
labels: {
enabled: true,
align: 'right',
x: 10,
format: '{value: .5f}'
},
opposite: true,
minorGridLineWidth: 0,
}

How do you create a Radar chart using chart.js with a y-axis of 0 to 100?

I am currently using Chart.js to display my data as a radar chart. The problem I am facing is that each time I add data to the page, it sets the max value to whatever the highest value is in the table. I need it to start with a Y-axis of 0 to 100.
I am using Chart.js v 2.1.2
Here's the chart and config code for the chart:
myRadar = new Chart(document.getElementById("canvas"), config);
var config = {
type: 'radar',
data: radarChartData,
options:
{
responsive: false,
maintainAspectRadio: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Radar Chart'
},
scale: {
reverse: false,
ticks: {
beginAtZero: true,
},
pointLabels: {
callback: function (pointLabel) {
if (pointLabel.length > 10)
return pointLabel.substring(0, 10) + '...';
else
return pointLabel
}
}
},
scaleOverride: true,
scaleSteps: 5,
scaleStepWidth: 20,
scaleStartValue: 100,
}
};

I tested this on 2.2.1, no sure if they had Min/Max for your version.
ticks: {
max:100, // Set it to your Max value
min: 0, // You can also change the Min
beginAtZero: false, // in case you change the Min
}, // etc
Docs: tick configuration
Codepen: Chart.js Radar Chart

Plot multiple scales on a single axis

I'm trying to plot some data on a webpage. I have 4+ series with a common Xaxis but the scaling on the Yaxis should be unique for each series.
Something like the below picture (you can see multiple scales on both Y and Y2 axis)
I've been testing out jqplot it supports a Y and Y2 axis but I cannot see a way to have more that one scale on each axis is this possible?
If not is there another package I can use that can do this?

I have discovered JQplot supports more than two YAxis but each Axis after the first axis will be displayed on the right hand side of the plot I've found no simple way to modify this behaviour. The below picture is a plot I was able to create using 4 yaxis scales
.
Something like the below Javascript in the plot statement will do it.
axes: {
xaxis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
drawMajorGridlines: true,
min: 0,
max: 21,
numberTicks: 7,
},
yaxis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y2axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y3axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
y4axis: {
show: true,
renderer: $.jqplot.LinearAxisRenderer,
},
},

Data labels cutting off in jqPlot

I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});

Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.