flot

How can I set gradient effects on pie charts? [{ label: i, data: 1000, color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }, //nextserie ] doesn't work. Also how can I set gradient effects as default colors for my charts? In the way you can index it by number like: [{ label: i, data: 1000, color: 1, }, //nextserie ] I have now added support for rendering pie chart with gradients, either radial or linear. My commit is referenced in pull request #853 . An example "default" pie chart with a radial gradient: $.plot($("#default_gradient"), data, { series: { pie

Can you render a bar chart like this using flot? Do I need to create the dataset manually to get this result, instead of using mode: 'time' ? Actually pretty easy to produce using flot. var options = { series: { bars: { show: true, barWidth: 15778463000, // 1/2 year in milliseconds align: 'center' }, }, yaxes: { min: 0 }, xaxis: { mode: 'time', timeformat: "%y", tickSize: [1, "year"], autoscaleMargin: .10 // allow space left and right } }; $(function() { $.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value] [1262304000*1000, 200], [1293840000*1000, 300]]],

i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My code is: $(function () { var a1 = [ [0, 100], [1, 200], [2,300], [3,400], [4,500] ]; var a2 = [ [0, 90], [1, 150], [2,250], [3,380], [4,450] ]; //var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]; var data = [ { label: "Pre Transformation", data: a1 }, { label: "Post Transformation", data: a2 } ]; $.plot($("#placeholder2"), data, { series: { bars: { show: true, barWidth: 0.13, order: 1 } }, xaxis: {

I want to be able to catch the clicked event that is hooked to all the axis ticks. here is what i have done so far. http://jsfiddle.net/grVFk/5074/ If anyone knows how to do that with any of the charting plugins can kindly share. thanks the plot isn't plain HTML. So there is no a tag. And the plot itself do not provide you with an api to catch the click event on an axis tick. What you can do is to select the axis tick manually with jQuery and add a click event: $('.highcharts-axis tspan').each(function(){ var label = $(this), value = label.text(); if(categoryLinks[value]) { label.click

In Flot.js, bar graphs and line graphs have numbers as the coordinates in the x and y axis by default. How can you make the coordinates such that the numbers are only integers or at least only the integers are visible? Check out the minTickSize option from the documentation : Alternatively, you can specify that you just don't want ticks at a size less than a specific tick size with "minTickSize". So in your graph options, you would specify it like this: $.plot($('#placeholder'),data,{ //your options, xaxis: { minTickSize: 1 } }); See it working here: http://jsfiddle.net/ryleyb/g2CTz/ Looks

I'm trying to get a graph that looks like a gauge. I am already using jQuery Flot for my other charts, so is it possible using Flot or plain Javascript? Can someone help me getting started coding this? Here it is only using base flot and a background image: // consts var minCord = {x: -60, y: -57}; var maxCord = {x: 60, y: -60}; var radius = 90; $(function() { // some calculations var startAngle = (6.2831 + Math.atan2(minCord.y, minCord.x)); var endAngle = Math.atan2(maxCord.y, maxCord.x); var degreesSweep = (-endAngle) + startAngle; var positionOnArc = function(magnitude){ var numDegrees =

I can't figure out how to get flot.pie to change the data shown in the labels from a percentage of the "raw data" to the actual data. In my example i've created a pie chart with the numbers of read/unread messages. Number of read messages: 50. Number of unread messages: 150. The created pie shows the percentage of read messages as 25%. On this spot i want to show the actual 50 messages. See image below: The code i used to create the pie: var data = [ { label: "Read", data: 50, color: '#614E43' }, { label: "Unread", data: 150, color: '#F5912D' } ]; And: $(function () { $.plot($("#placeholder"),