Any sample code for chart with multiple bars using flot ??
similar to this example . The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.
Update
I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlot instead
Updated Info: Andión's answer makes reference to this library. Bars-side-by-side
You can download the code here:
http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
The result is :
Have you tried the orderBars plugin?
You can download the code here
You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.
Here's sample code for 2 bars.
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 =[0, 2];
var d2 =[1,3];
var startData = [
{ //first series
label:"d1",
data: [d1],
bars:{
show: true,
fill: true,
fillColor: "red"
}
},
{ //second series
label:"d2",
data: [d2],
bars:{
show: true,
fill: true,
fillColor: "blue"
}
}
];
var option={
series: {
bars:{
show: true,
fill: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: { ticks: 5 }
};
$.plot($("#placeholder"),startData,option );
});
Double-check the values that you're passing in on the X-axis (of your bar series).
You don't need a different series for each bar, that would be.... excessive.
What you do need is a different series for each colour of bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).
I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.
I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.
Related
I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,
I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim
First of all, here's the standard JSFiddle for a Force-Directed Graph.
Here's the JSFiddle for my (perhaps misuse of) Force-Directed Graph.
My JSFiddle is throwing a larger-than-usual lump of data at Highcharts (scroll right to the bottom of the JS panel to see actual code) which may be the reason why I'm having the problem that I am having, namely that the lines joining the nodes are missing.
Other non-standard things are happening, e.g.
series: [{
dataLabels: {
enabled: true
},
data: Data.DAT,
formatting: Data.FMT
}
]
The formatting tag is permitted (according to Highcharts themselves) as it doesn't clash with anything in Highcharts API. In subsequent iterations of the main code base, I put everything into data and refer to DAT and FMT deeper in.
It is possible that something in the node management is amiss
e.options.data.forEach(function (link, i) {
if (!e.options.formatting[link.from]) {
console.log("No formatting given for FROM %s", link.from);
} else {
nodes[link.from] = {
id: link.from,
marker: {
radius: e.options.formatting[link.from].size
},
plotX: e.options.formatting[link.from].x,
plotY: e.options.formatting[link.from].y,
fixedPosition: true,
name: e.options.formatting[link.from].name,
color: e.options.formatting[link.from].colour
};
}
if (!e.options.formatting[link.to]) {
console.log("No formatting given for TO %s", link.to);
} else {
nodes[link.to] = {
id: link.to,
marker: {
radius: e.options.formatting[link.to].size
},
plotX: e.options.formatting[link.to].x,
plotY: e.options.formatting[link.to].y,
fixedPosition: true,
name: e.options.formatting[link.to].name,
color: e.options.formatting[link.to].colour
};
}
});
However, I'm at a loss trying to work out how to gets the lines to reappear, thus this posting.
The reason your lines disappear is because you are above turboThreshold. You can see this by looking at console which gives the following error:
Highcharts error #12: www.highcharts.com/errors/12
The fix for this, is either to comply with turbo threshold, that is format your series as an array (which could improve performance). Or to increase the turbo threshold. The latter will make it work, but performance will not be great.
Working example: https://jsfiddle.net/ewolden/3qLdmut8/
I've included in my HTML page a stacked bar graphic (with the Chart.js library) that makes user visualize some data. These data change on selection of the user, the Javascript function that enables this onclick feature is:
function aggLav(){
[...]
for(i=2; i<src.rows.length-1; i++){
cells[i]=row.insertCell(j);
cells[i].onclick = function () {//load graphic
dati=createData();
makeGrafico(dati, this.innerHTML);
var gr=document.getElementById("canvas");
if($(gr).is(':hidden')) $(gr).slideToggle();
};
}
where the function createData creates the JSON object (with labels and datasets) to pass to the graphic (works fine), and the function makeGrafico():
function makeGrafico(dati, titolo){
var d=getFirstMonday();
var mondays=[];
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: dati,
options: {
title:{
display:true,
text:titolo//change to name of procedure
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
}
takes the name of the parameter in order to display it, and the JSON object of the previous function.
When i first click on one procedure (the cell with the onclick feature rapresents an industrial procedure, not relevant), everything goes just fine, the graphic slides up and show the correct result. But when i click on another procedure, i expect to see the graphic related to that procedure: this is true, but when i move the mouse over the image, the graphic suddenly changes, making me see for a while the data of the first procedure i clicked.
In general, if i click 10 different procedures, and i hover the mouse on the graphic, i see all the 10 graphics alterning each other. If i manage to find the spot on where the graphic changes, it rests changed for all the time i leave the pointer on that position.
I'd surely like to make the data (and the graphic) be persistent, and relative to the last procedure i clicked.
How to solve this weird issue? Am i missing something? I'm new to this library.
You might be interested by this post. You need to clear the canvas at the beginning of your makeGrafico function.
In a first time, you should try adding window.myBar.destroy(). If it does not work, you should consider deleting the canvas element and then creating it again :
var $parent = $('#canvas').parent();
$('#canvas').remove();
$parent.append('<canvas id="canvas"></canvas>');
I am using jQuery Flot plugin to draw some graphs. On my local environment everything works fine, but on a test server when i hover over a dot from the graph it yields My_text_label: %y.
In place of %y I expect the y-coordinates of that point.
Here is my code sample:
data = [{
label: label,
data: d1,
color: "#48CFAD"
}];
Options = {
xaxis: {
mode: "time"
},
yaxis: {
},
series: {
lines: {
show: true,
fill: false,
lineWidth: 2
},
points: {
show: true,
radius: 4.5,
fill: true,
fillColor: "#ffffff",
lineWidth: 2
}
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
legend: {
container: legend,
show: true
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
};
$.plot(holder, data, Options );
When you hover over the dot the tooltipOpts: is called and it displays the content: '%s: %y'
%s reads as My_text_label
: is read as :
%y is read as %y
As you stated, it doesn't work on the test server but works fine locally. The problem could be that your version of JQuery on your local machine is different to the version on the test server.
I have had issues with Flot graphs behaving differently in two different environments. My issue was that, in the production environment, jQuery was getting reloaded after my Flot script tag was being called. Since the Flot plugins were "attached" to the jQuery variable, the Flot functionality was getting overwritten. For example, I could no longer call $.plot since the jQuery variable had been redefined.
I ended up having to use the $.getScript function to reload all the Flot code(including plugins) before calling $.plot after the page renders(and the Flot functionality has been overwritten).
In your case, since you are using a plugin, I am not sure how you could solve this effectively. I have not tested it, but try using something like
$(window).on('load', function () {
// add $.getScript calls here
});
to load your Flot js files and plugins.
I'm trying to create a data vs time graph which allows the user to zoom in/out to large/smaller time periods. You can see an example of one such graph here:
http://people.iola.dk/olau/flot/examples/visitors.html
While the API has been a breeze for setting up that level of functionality, I've gotten stock when trying to figure out how to create a default "zoom" value - to, for instance, set the default zoom to the past 30 days (while retaining the ability for the user to zoom out and view an entire year of data).
Does anyone have any experience or know a way of doing this? Or is it a matter of digging into the source code and customizing it?
Thanks!
Walker
If you look at the code in, for example, flot zooming example, and you modify the definitions of the variable "options" thusly:
var options = {
legend: {
show: false
},
series: {
lines: {
show: true
},
points: {
show: true
}
},
yaxis: {
ticks: 10,
min: -0.8,
max: 0.4
},
selection: {
mode: "xy"
}
};
... you'll find that the graph starts out with this level of y-axis zoom, but the smaller graph still retains the full range that you can zoom out to if you want. The lines added are in the "yaxis" definition, "min" and "max". You would do something similar for "xaxis" if you want to pre-zoom the x-axis.