Does Flot offers an option to make the bar chart float?. I am looking for a Flot equivalent to interval bar plot (PyChart). The following picture is taken from the link:
(I am aware that Flot may not support this since it seems like each bar in Flot only has one variable, but I am not sure).
Edit: Any javascript library suggestion is also welcome!
I managed a workaround using Flot's bar chart and Flot's stacking. Basically for the empty space, I create a stack with white color (which somehow got translated into transparent except for the edges). Unfortunately, Flot's stacking require all stacks of the same level to be of the same type/color. In order to circumvere this, some of the bars have zero width in the stacks of wrong colors. Result looks surprisingly good!
The corresponding code follows (the example data does NOT corresponds to the image above, since it would be a little too large. This shows only two of the "colors").
var series = [
{
data: [
[24.0, 0],
[6.93333333333, 1],
[6.95, 2],
[6.91666666667, 3],
[6.95, 4],
],
color: "#FFFFFF",
},
{
data: [
[0.0, 0],
[0.0666666666667, 1],
[0.05, 2],
[0.0833333333333, 3],
[0.05, 4],
],
color: "#FFFF00",
},
];
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]];
var options = {
series: {
bars: {
show: true,
barWidth: .75,
horizontal: true,
align: "center"
},
stack: true,
},
xaxis: {
ticks: 24,
},
yaxis: {
ticks: date_ticks_pre,
},
zoom: { interactive: true },
pan: { interactive: true },
};
$.plot('#flot_plot',
series,
options);
Related
so here is code :
var data = [
['tn-4431', 0],
['tn-sf', 1],
['tn-me', 2],
['tn-to', 3],
['tn-mn', 4],
['tn-bj', 5],
['tn-ba', 6],
['tn-bz', 7],
['tn-je', 8],
['tn-nb', 9],
['tn-tu', 10],
['tn-kf', 11],
['tn-ks', 12],
['tn-gb', 13],
['tn-gf', 14],
['tn-sz', 15],
['tn-sl', 16],
['tn-mh', 17],
['tn-ms', 18],
['tn-kr', 19],
['tn-ss', 20],
['tn-za', 21],
['tn-kb', 22],
['tn-ta', 23]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/tn/tn-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Tunisia'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tn/tn-all.js"></script>
<div id="container"></div>
since I am using already Highcharts.js to render line charts and polar chart in my code i can't use highmaps . I followed the general documentation for Highcharts maps and installed the plugin for highcharts maps. the code was fine 1 day ago and it render the map but now it is showing me this error in the chrome console "Uncaught TypeError: Cannot read property 'dataMin' of undefined".
is there any solution ?
thanks in Advance.
I reproduce your code and seems that everything works fine: https://jsfiddle.net/BlackLabel/cjr9p7oq/
// Create the chart
Highcharts.mapChart('container', {
...
});
It could be a temporary issue related to binding files after the new release. Please confirm if everything works fine.
I have a page with several charts on it, using Chartist. I want to have both global options and individual options for each chart.
var barChartOptions = {
reverseData: true,
horizontalBars: true,
}
new Chartist.Bar('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
},barChartOptions
// HOW DO I ADD SPECIFIC OPTIONS?!
);
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[120, 90, 150, 100]]
},barChartOptions);
new Chartist.Bar('#chart3', {
labels: [1, 2, 3, 4],
series: [[180, 190, 90, 110]]
},barChartOptions);
Here's a jsFiddle showcasing my problem.
Note: I'm a JavaScript n00b, so I might be missing something very basic here.
Assuming you use jQuery or Underscore.js, you can use the extend (jQuery, Underscore) function to merge two objects, so you can do:
var barChartOptions = {
reverseData: true,
horizontalBars: true,
}
new Chartist.Bar('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
},_.extend({/*specific options*/}, barChartOptions));
This way the object that will be passed to Chartist.Bar is your specific options merged with the global barChartOptions.
Pretty much as simple as the title. In the direction plugin arrows can only be drawn if you have two arrows (one for each endpoint). I'd like to just draw one arrow on an end point. Thanks in advance!
I don't see a direct option for this but if you give the angle for any one point as infinity it seems to suppress the arrow on that point:
$.plot(
"#placeholder",
[
[[1, 10, 1e1000], [2, 20, 1e1000], [3, 33, 1e1000], [4, 13, 1e1000], [5, 8, 1e1000], [6, 26, 45]]
],
{
series: {
points: {
show: true,
radius: 3,
fill: false,
symbol: 'circle'
},
lines: {
show: true,
lineWidth: 2
},
direction: {
show: true
}
}
}
);
Produces:
See fiddle here.
I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this
Added in fiddle have a look FIDDLE
function range(ystart,yend,ycolor,xpoint){
// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color
// So I would like to call like this
range(1,6,"#F90B0B",34)
}
This is actual code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6],
[24, 7],
[19,8],
[15, 9]
]
}]
});
});
Thank in advance for all volunteers
The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.
Edit to your function:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6]
],
color: "#F90B0B"
},
{
name: 'Test Plot2',
data: [
[28, 6],
[24, 7],
[19,8],
[15, 9]
],
color: "#F909F9"
}]
});
});
At this moment is it not supported, only by two series, but in the nearest feature it should be available.
I would like to create a line plot for a vector of y values. In the default situation, x should starts from 1. I am wondering is there a way to let x values start from 0?
Below is my code and demo:
$(document).ready(function() {
var s= [12, 45, 89, 181, 111, 147, 116]
$.jqplot('chart1', [s], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
pad: 0
}
},
legend: {
show: true,
location: 'nw',
placement: 'inside',
fontSize: '11px'
}
})
})
Edit: it is also necessary to set the data of x.
Here is the demo.
In the first paragraph of this link the author mentions that for what you are trying to achieve, you need an array of x,y data points (the ordered pairs themselves must be arrays too). So in your specific case this should give the desired effect:
var s= [[0, 12], [1, 45], [2, 89], [3, 181], [4, 111], [5, 147], [6, 116]];
For larger arrays of ordered pairs you can use a for loop to generate the ordered pair-arrays.