Okay to get started I am using Jquery-Flot to plot a radial graph I have found a plug in to create a spider graph see API here:
http://www.jumware.com/Includes/jquery/Flot/Doc/JQuery.Flot.spider.html
Now it works all nicely bar the fact I dont want to show the lines that connect the points.
Usually with:
points: { show: true}, lines: { show: false}
but when using the spider plugin it seems to ignore this setting. Am I doing something wrong here or is it a case of when using this plugin I have to show lines?
Working example at:
http://jsfiddle.net/WAscC/2/
Code:
function EveryOneSec() {
var d1 = [[0, 10], [1, 20], [2, 80], [3, 70], [4, 60]];
var d2 = [[0, 30], [1, 25], [2, 50], [3, 60], [4, 95]];
var d3 = [[0, 50], [1, 40], [2, 60], [3, 95], [4, 30]];
var options = {
series: {
spider: {
active: true,
legs: {
data: ["", "", "", "", ""],
legScaleMax: 1,
legScaleMin: 0.8
}, spiderSize: 0.9
}
}, grid: {
hoverable: false,
clickable: false,
tickColor: "rgba(0,0,0,0.2)",
mode: "radar"
}
};
data = [{
label: "",
data: d1,
spider: {
show: true,
lineWidth: 0
}
}, {
label: "",
data: d2,
spider: {
show: true,
lineWidth: 0
}
}, {
label: "",
data: d3,
spider: {
show: true,
lineWidth: 0
},
points: { show: true},lines: { show: false }
}];
$.plot($("#RadialPlot"), data, options);
}
EveryOneSec();
Update One
editing lineWidth: 0,
connectionWidth: 0 to any number seems to have no affect at all on the graph.
How can I only show points and not lines?
Add connection: { width: 0 } to spider options:
spider: {
active: true,
connection: { width: 0 }, // add this line
legs: {
data: ["", "", "", "", ""],
legScaleMax: 1,
legScaleMin: 0.8
},
spiderSize: 0.9
}
Documentation states that option should be: connectionWidth: 0, but that seems to have changed, as seen from the source for the actual plugin:
function drawspiderConnections(ctx,cnt,serie,c,fill) {
var pos,d;
ctx.beginPath();
ctx.lineWidth = serie.spider.connection.width; // this is the line
// etc.
}
Related
I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.
I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});
How i can arrange bubble randomly without overlap
var Highcharts2 = $('#attBubbleGraph').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
margin: [1, 1, 1, 1]
},
title: {
text: 'Testing'
},
series: [
{
showInLegend: false,
name: 'Present',
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
}]
});
in the above code used x,y and radius (value) like below
data: [
[0, 0, 50],
[2, 0, 50],
[4, 0, 50],
],
But I'am Looking for a bubble graph of radius (value) with random x, y without overlapping
I have a line graph with data for each month. No matter where I add the color option in the option list or even as part of the data the line is still the default yellow.
Here is the code that has it working with the default.
Where do i need to add a color variable to make it display.
var plotData = [[1, data.data['Jan']], [2, data.data['Feb']], [3, data.data['Mar']], [4, data.data['Apr']], [5, data.data['May']], [6, data.data['June']], [7, data.data['July']], [8, data.data['Aug']], [9, data.data['Sep']], [10, data.data['Oct']], [11, data.data['Nov']], [12, data.data['Dec']]];
$.plot('#placeholder', [plotData]), {
series: {
lines: {
show: true,
lineWidth: 4,
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: false,
borderColor: '#EDEDED',
borderWidth: 1,
labelMargin: 15,
backgroundColor: '#FFF'
},
yaxis: {
min: 0,
color: '#EDEDED'
},
xaxis: {
color: '#FFF',
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
}
Move the ) from behind [plotdata] to the end of the options object:
$.plot('#placeholder', [plotData]), {
^
As it is now, you call plot without options, so the default options are used.
Here is a fiddle which shows the working code.
For the right way to define custom colors, see here or in the above fiddle.
I'm using jQuery plot with the categories plugin to create charts.
I want to plot two bars side by side for each month with this code:
$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], {
series: {
bars: {
show: true,
barWidth: 0.5,
align: "center",
}
},
xaxis: {
mode: "categories",
ticks: [[0,"Jan"], [1,"Feb"], [2,"Mär"], [3,"Apr"], [4,"Mai"],
[5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Okt"], [10,"Nov"], [11,"Dez"]],
tickLength: 1,
},
grid: {
hoverable: true,
},
yAxis: {
allowDecimals:false,
}
});
And that's my result:
The bars are still overlapping but I want my result to look like
Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.
Here's the jsfiddle: http://jsfiddle.net/buk8mhy8/
Found 2 mistakes in your fiddle
jquery.flot.orderBars.js link is wrong.
Removed order:1 and 2 from series data
updated your series default object with this
series: {
bars: {
show: true,
barWidth: 0.15,
order: 1
}
}
Check the updated fiddle
Hope this helps.
I tried to use orderBars plugin but the result was not what I expected. So what I did was:
Use the categories plugin
Define left and right align
obs: It works only with two bars side-by-side.
The Code:
var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ];
$.plot($("#placeholder"),
[{ data: data1,
bars: {
show: true,
barWidth: 0.2,
align: "left",
}
},
{
data: data2,
bars: {
show: true,
barWidth: 0.2,
align: "right",
}
}
],
{
xaxis: {
mode: "categories",
tickLength: 0
}
}
);
The result:
I am trying to implement a flot bar graph, but I am having a few problems
The first being that setting the yaxsis min and max does not seem to work, the graph still only goes from 0 - 14.
Second I dont know how to set individual colours and names for each bar.
This is what I have
var d2 = [{
"label": "Face",
"data": [[0 , "3"], [5, "13"]]
},
{
"label": "Telephone",
"data": [[1, "400"], [6, "337"]]
},
{
"label": "Web",
"data": [[2, "1304"], [7, "843"]]
}];
var options = {
yaxes: {min: 0, max: 25000},
xaxis: {
tickSize: [1],
autoscaleMargin: .10,
show: false
},
series: {
lines: { show: false},
bars: {
show: true,
barWidth: 0.9,
align: 'center',
multiplebars:true,
},
points: {
show: true
}
}
};
$.plot($('#graph1'), d2, options);
Does anyone know how to fix these?
Thanks
If you want a different name and color for each bar then you'll need to configure the bar settings as part of the data sets.
var data1 = [
{
label: "Face",
data: [[0 , 3], [5, 13]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "Telephone",
data: [[1, "400"], [6, "337"]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
}]
Then graph them like this:
$.plot($("#placeholder"), data1, options);
As for min and max not working, what happens if you don't configure them? Does the axis fit the data correctly?