I am using a line chart. I feed the data the following:
var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];
In the above the first number of each set is the week of the year and I am trying to show the last 4 months of data.
However, when the chart is drawn Flot charts re-sorts the data by the first value (lowest to highest) which creates all kinds of issues. Instead of 4 columns in the series there are now 52, and the lines are quite out of whack.
I don't see anything in the documentation that says this is supposed to happen, nor do I see anything that says I can prevent it. However, for the data to be meaningful, the data must not be re-ordered.
Is there a setting I'm unaware of that can stop this behavior?
Edit : Adding plot code
var plot = $.plot('#scheduled-actual-flot-line', [
{
label: 'Scheduled Hours',
data: scheduled,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
},
{
label: 'Actual Hours',
data: actual,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
}],
{
series: {
lines: { show: true },
points: { show: true },
shadowSize: 0 // Drawing is faster without shadows
},
colors: ['#afd2f0', '#177bbb'],
legend: {
show: true,
position: 'nw',
margin: [15, 0]
},
grid: {
borderWidth: 0,
hoverable: true,
clickable: true
},
yaxis: { ticks: 4, tickColor: '#eeeeee' },
xaxis: { ticks: 12, tickColor: '#ffffff' }
}
);
Flot takes the x values as numbers and displays / sorts them accordingly. If you don't want that, you can use the category mode (see this example and this fiddle with your data).
xaxis: {
//ticks: 12,
tickColor: '#ffffff',
mode: 'categories'
}
PS: 12 ticks are not possibly with your data, as there are only 4 datapoints defined.
That flot reads all data as numbers by default is described here in the documentation.
Flotr examples use a for loop to create random data, so the first index will always be sequential.
[[51,1700],[52, 1750],[1,1600],[2,1675]];
Your arrays show that flotr must be doing a sort on the array before painting the data sets as lines, bar-graphs or whatever.
I can only suggest you create a timestamp from the months and there's a time setting you can in flotr settings to format the dates as you want.
The other way is replace your anomalous data (months) with sequential indices:
var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;
Flot is doing exactly what it should do for a line chart (or any type of x-y graph). It's showing the last two points of your dataset on the left because 1 and 2 are indeed less than 51 and 52. I'm guessing that you're trying to show data that crosses a year boundary. You need to make the first two weeks of the second year later than the last two of the first. You could use actual dates instead of week numbers, in which case Flot would handle it fine. That would also give you more flexibility in labeling the x-axis. But as a quick fix, just add 52 to the second year's data, e.g.:
var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];
Related
Im trying to generate graph with jquery Flot.
This is the script Im using:
var plot = $.plot("#placeholder", [
{ data: data2, label: observation_obj.concept_name}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
},
xaxis: {
mode: "time",
timeformat: "%d.%m"
}
});
The result I'm getting is this:
http://i62.tinypic.com/25uk51z.png
My data is contains of two points, I dont know why in the x axis I see 4 points,
Can anyone help?
Thanks
The ticks on the x-axis are automatically generated so that they are evenly spaced on the axis. If you want to change that you can give flot an array of (in your case) timestamps which match the timestamps from your data (only examples here):
xaxis: {
mode: "time",
timeformat: "%d.%m",
ticks: [1383582043000, 1383682043000]
}
See the documentation for more infos / examples.
I am trying to graph a month out in flot (per day) or possibly every other day, have a tick.
To get my time values, i am doing this:
$date = strtotime($rowData[0]); // 2013-01-01
$myData = json_encode(array($date*1000, 1234));
// I Then echo it out as an array into the javascript var.
For some reason, i can change the line: minTickSize: [1, day] to 2 (label every other tick i think) and nothing will change. Also, the time values are not showing up as well? What am i doing wrong?
Here is a JSFIDDLE
Here is an update with every two days...is there a rendering issue? Also, why is Oct 10, the only date shown? : JSFIDDLE UPDATE
Here is what i have as far as the javascript goes:
var myData = [[1380603600000,0],[1380690000000,0],[1380776400000,0],[1380862800000,0],[1380949200000,0],[1381035600000,0],[1381122000000,0],[1381208400000,0],[1381294800000,0],[1381381200000,0],[1381467600000,0],[1381554000000,0],[1381640400000,1],[1381726800000,0],[1381813200000,0],[1381899600000,0],[1381986000000,0],[1382072400000,0],[1382158800000,0],[1382245200000,0],[1382331600000,0],[1382418000000,0],[1382504400000,0],[1382590800000,0],[1382677200000,0],[1382763600000,0],[1382850000000,0],[1382936400000,0],[1383022800000,0],[1383109200000,0],[1383195600000,0]];
var plot = $.plot($(".subsChart"),
[ { data: myData, label: "myData"} ], {
series: {
lines: { show: true,
lineWidth: 2,
fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
},
points: { show: true,
lineWidth: 2
},
grow: { active: true,
steps: 30
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "#DDD",
borderWidth: 1,
borderColor: "#DDD"
},
colors: ["#FF0000"],
xaxis: {mode: "time", timeformat: "%b %m", ticks: myData, minTickSize: [5, "day"]},
yaxis: {ticks:3, tickDecimals: 0},
tooltip: true,
});
UPDATE
When i remove the ticks: myData option, the labels do show up, but all of them are on the same date? Also, none of the points even land on the dates.
As #Smokie suggested, you need to remove the ticks option. When you provide ticks, Flot skips any tick generation that it would normally do and uses what you provided instead, which in this case is invalid.
Once you do that, you'll notice that you have labels, but they all show Oct. 10. That's because your date format is %b (short month name) %m (month number). I'd guess that what you actually want is %b %d.
Note that you probably won't get a tick for every day because, depending on the size of your window, they wouldn't all fit. That's why minTickSize is a minimum rather than an exact value; Flot will ensure that at least one day (or however many you specify) separates the ticks, but may choose to spread them out further to ensure that they all fit.
I'm using flot library and I found from the docs that I can send a json object with any option I can right at the charting call.
So let's say I call:
$.plot($("#placeholder"), [ [] ], { yaxis: { show: true, max: 100, min: -100 }, xaxis: { show: true, max: 100, min: -100} });
However this is what I get as result (with a non empty data argument):
But I don't want vertical lines marked at every axis tick, but two lines corresponding to the axis.
I don't want ending with the x=0 and y=0 plots. I would even have to obtains points arrays for it. How can I do this with flot or is there any recommended library to plot x,y points series with not much thrills.
To get lines on the axes, add this to your options object:
grid: { markings: [{ xaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 },
{ yaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }] };
If the other lines are still present after adding this, please provide a more complete example (e.g. a fiddle).
I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/
Not getting any errors from firebug. Not showing in any browser. Was working previously and stopped working about a week ago. Sample of the code...
$(document).ready(function () {
//Generic names for multiple graphs
var First = $('#hfFirstOrder').val().split(",");
var Second = $('#hfSecondOrder').val().split(",");
var Third = $('#hfThirdOrder').val().split(",");
var ticks = $('#hfDaysOrder').val().split(",");
var maxValue = parseInt($('#hfMaxOrder').val());
var FirstArray = [];
var SecondArray = [];
var ThirdArray = [];
for (i = 0; i < First.length; i++) {
FirstArray.push(parseInt(First[i]));
SecondArray.push(parseInt(Second[i]));
ThirdArray.push(parseInt(Third[i]));
}
plotGraph("stackedPurchase", [FirstArray, SecondArray, ThirdArray], true, ticks, "Orders", maxValue, '#000', "Completed",
'#00F', "Ship/Pick", '#F00', "Back Order");
function plotGraph(chartName, total, stackBool, tick, yLabel, maxValue, SC1, SL1, SC2, SL2, SC3, SL3) {
plot = $.jqplot(chartName, total, {
stackSeries: stackBool,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: { barMargin: 20, barWidth: 10 },
showMarker: false,
pointLabels: { show: false }
},
axes: {
xaxis: {
label: "Days",
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
},
yaxis: {
label: yLabel,
padMin: 0,
tickInterval: parseInt(maxValue * .1),
min: 0,
max: maxValue,
tickOptions: { formatString: '%d' }
}
},
series: [{ color: SC1, label: SL1 },
{ color: SC2, label: SL2 },
{ color: SC3, label: SL3 }
],
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
}
});
And then there's a call in the html for
<div id="stackedPurchase" style="height:450px;width:900px;" runat="server"></div>
And the various hidden values are csv strings from the code behind. According to firebug they are being passed in correctly (right formats and correct number of each variable). Judging from my coding experiences recently, its probably something obvious.
Got a partial answer, the first two graphs work now because someone else at work moved the folders that the jqplot stuff was in without informing me. Changing the address in the scripts at top fixed the problem.
But for some reason the third one isn't working.
plotGraph("graphQuote", [FirstArray, SecondArray, ThirdArray], false, ticks, "Quotes", maxValue, '#F00', "Request RFQ", '#00F', "RFQ", '#0F0', "Customer Quote");
SecondArray is all zero values, FirstArray is mostly zero and ThirdArray has a value in most of its fields. Ticks has correct dates.
Alright, found the problem. Apparently
parseInt(maxValue * .1)
gets pissy and returns 0 if maxValue is less than 10, and jqplot doesn't like 0 as a tick interval. Found a better way to do intervals and now everything works.