flot

I'm trying to customize jQuery Flot to remove gaps between dots on time axis. Look at the top image: It shows the data for two days, and I bet you spot the night. What I want to do is to get rid of this annoying gap in the middle of the chart. Any suggestions how to do this? Daniel J F Too bad I can't accept a comment as an answer, since the answer from George Roberts from Mark's link worked smoothly. So what I had to do is to change the mode of the flot from 'time' to null and then emulate a time axis. I've created two arrays: the first one with data for the graph and the second one with

When using flot I would like to have a string based x-axis. For example I have a list of customers "Bob", "Chris", "Joe" and would like to plot their revenue on the Y-Axis. (this is a bar graph) It seems at first glance flot only supports numeric types on the x-axis. Is this true? Ryley @Matt is close, but it would make more sense to just use the ticks option to directly specify what ticks should have what labels: var options = { ... xaxis: { ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']] } ... }; EDIT : it looks like this (I added more data than labels, but you get the idea). The Categories plugin

I am trying to draw a line chart with bar chart. everything went well. This is my code $.plot(holder, [ { data: data[0].data, lines: { show: true }, label:"Service Level" }, { data: data[1].data, bars: { show: true }, yaxis: 2, label:"# Of Calls" } // set second series to use second axis ], { yaxes: [{ min: 0, // options for first axis, max: 100, tickFormatter: function (val, axis) { return val + '%'; } }, { alignTicksWithAxis: 1, // options for second axis, put it on right position: "right" }], xaxis: { min: minVal.getTime(), max: maxVal.getTime(), mode: "time", timeformat: timeFormat, /

I know there are several posts about this but I think I'm missing something. I'm returning the data below in an ajax call but it doesn't seem to be in the right format for FLOT. Is there a better format to return the data in or what should be changed for FLOT to recognize it? TIA <script type="text/javascript"> $(document).ready(function() { // Add the page method call as an onclick handler for the div. $("#Result").click(function() { $.ajax({ type: "POST", url: "WebTest.aspx/GetData", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { //

How can you have a different color for each bar when using the "categories" mode in Flot? This code makes every bar the first color in colors array. I'd like each bar to be the corresponding color in the colors array. Current code: var data = [["Red",1],["Yellow",2],["Green",3]]; $.plot("#placeholder1div",[data], { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 } }, xaxis: { mode: "categories", }, colors: ["#FF0000","#FFFF00","#00FF00"] }); As is often my recommendation with Flot , drop the plugin and configure it up youself. // separate your 3 bars into 3

there is known issue with loading a flot chart in a jquery tab that is not the initial visible tab here: this was asked here: http://osdir.com/ml/jQuery/2009-06/msg02284.html and answered with this solution: .tabs-hide { /*display: none;*/ position: absolute; left: -10000px; } there is still some issues with this solution. Lets say that the tab name that the flot chart is on is called #tab-1. jquery tabs put this in the URL string so this will work initially when you load up but if you try to send someone the URL with the #tab-1 (or any tab name in the URL) in the link, the chart will not be

I'm attempting to rotate the dates on the bottom of my graph to appear vertical versus horizontal. I'm using flot-tickrotor but it doesn't seem to work correctly. xaxis: { rotateTicks: 110, mode: "time", timeformat: "%m/%d", minTickSize: [7, "day"], ticks: cpudatearray } The end result is not correct, it all appears jumbled. You might have better luck just handling this with CSS instead of using the plug in: #flotPlaceholder div.xAxis div.tickLabel { transform: rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg)

I'm using flot ( flot on github ) to draw a graph with the following time series data: [ [1357171200000, 1], [1357344000000, 1], [1357430400000, 2], [1357516800000, 2], [1357689600000, 3], [1357776000000, 1] ] As you can see there are some points in the graph wich show the sales for the given day. My json response doesn't contain sales count / data for days where no sale has happened. For example the 04th of January. How can i configure flot to draw the missing days on y-axis at point zero (because there are no sales)? As you can see in the image flot does connect the points so there are no