Scenario: I'm plotting a volume bar chart using Flot JS, with a per-minute data. So for example, for 3 hours, I have 3 x 60 data points being pulled from the database.
Problem: Since there I have 6 hours worth of data points, and the width of the chart is only 250px, the bars are only 1px wide each, without margins. I was wondering if there's a grouping data option in Flot Charts where I could tell it to average the volume data per 15 minutes or 30 minutes.
$.plot('#flot-vol, [{
color: '#fff',
bars: { show: true },
data: dataV
}], {
grid: { show: false },
shadowSize: false
});
In High Charts there is a GroupData option wherein you can group the given data by day / week / months. I was wondering if there's such a feature in Flot Charts?
If I need to use MySQL to group the data, how do I group the data per 30 minutes if I have the following MySQL statement? Currently I'm pulling all the volume of the latest date from the table named Ticker.
SELECT UNIX_TIMESTAMP(`Timestamp`), `Volume` from `Ticker` WHERE CompID = 'symbol' AND Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`)
Update:
Thanks to Ryley for clarifying the answer, in case anyone is wondering how to group the data through MySQL, here it is.
MySQL Statement that Worked
SELECT UNIX_TIMESTAMP(`Timestamp`), AVG(`Volume`) FROM `Ticker` WHERE `CompID` = 'symbol' AND Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`) GROUP BY (UNIX_TIMESTAMP(`Timestamp`) DIV 30*60)
Flot does not aggregate data itself, but you're on the right track thinking about doing it from mysql.
Make your query average the data into 30 minute segments:
SELECT trunc(UNIX_TIMESTAMP(`Timestamp`)/(30*60))*(30*60) as time_chunk,
AVG(`Volume`) from `Ticker`
WHERE CompID = 'symbol' AND
Date(`Timestamp`) = (SELECT Max(Date(`Timestamp`)) FROM `Ticker`)
GROUP BY time_chunk
I'm not a MySQL user, so this may not be exactly right, but the idea is to take your timestamp and truncate it to 30 minute increments, then average the Volume over that 30 minutes.
Related
I have a set graph that ranges from 300 - 850 on the y-axis, and the user can update the chart and select a 3, 6, or 12 month range on the x-axis, where the far right value should be the most recent month in the data set. But Chart.js appends the data that is out of my label range: ] where
labels: ["Apr'17", "May'17", "Jun'17"]
data: [{"x": "Jan'17", "y": 565},{"x": "Mar'17","y": 765},{"x": "Jun'17","y": 665}]
I only want the Jun'17 data point shown here, but Jan'17 and Mar'17 data points are appended. I can add a max, min limit on the x-scale, but is that the only way to accomplish this? There seems like there should be a cleaner solution.
It works with the 6 month range as I would expect with the same data, but the previous three months added to the labels array:
I am currently trying to plot some data which I receive via a HTTP request. The issue that I am having is that the x-axis doesn't plot the timestamp correctly because it it's in Unix format. I've read some other similar question on SO such as: Example One
The issue is that I'm not passing an object but directly an Unix time data. When hovering the graph, you can see that the x-axis doesn't display the date and hour correctly.
Here is a fiddle with my current graph: Graph Fiddle
Since you actually have datetime values, showing them using category is sort of a hack, and would also not show gaps between points correctly if they are not evenly spaced.
Instead you could merge your two arrays into pairs and then supply it to the series as proper X-Y values for a datetime axis. You also have to multiply your datetime values by 1000 to get milliseconds, which Highcharts expects.
For example (JSFiddle), merging:
dataArray.push(selectedData);
timeDataArray.push(selectedTime);
var mergedArray = timeDataArray.map(function(e, i) {
return [e*1000, dataArray[i]];
});
And axis and series:
xAxis: {
type: 'datetime'
},
series: [{
name: 'AAPL',
data: mergedArray
}]
I am using amCharts for displaying stock data. I have 7 zoom levels: 1H, 1D, 1W, 1M, 3M, 1Y, MAX. For 1H, 1D, I am using a dataset which contains minute wise data. For 1W, 1M, I use a different dataset which has hour wise data. And for rest 3 levels, I have another dataset with day wise data. Now here is my problem:
When initially, I load minute wise data at default zoom level 1D, and add a listener "changed" to chart.periodSelector, after clicking on 1W button or any further zoom level button, the difference in minutes between startDate and endDate of generated event: var minsDiff = (event.endDate.getTime() - event.startDate.getTime()) / 60000 is always equal to number of minutes in 1 day (1440) instead of 7 days.
I suppose this may be because the current dataset loaded is minutes dataset with 1440 max number of datapoints. So it may be setting date range for 1 Week equal to that of 1 Day because only that much data is available. But what I want is actual date range of 1 week if I click 1W button because I want to load a different chart with different dataset (hour wise data for 1W).
I tried using listener "zoomed" of chart. But same problem persisted.
Normally out of scope periods are not visible unless you set hideOutOfScopePeriods to false. As you noticed, if a period is greater than the amount of data available then the chart will truncate the zoom to fit the data you have. Checking the predifinedPeriod property in the changed event is a surefire way to see which button was clicked, which will help in this scenario where the data doesn't necessarily encompass the entire period:
listeners: [
{
event: "changed",
method: function(eventObj) {
console.log("clicked " + eventObj.predefinedPeriod);
}
}
]
I have a data array which consists of timestamp - value pairs.
Basically there are two sets of data; 2014 and 2015 values.
For;
2014.12 : There are 4 values
2015.1 : There are 4 values.
2015.2 : There are 4 values.
2015.3 : There are 4 values.
I want to show them in order, 2014 values first , and so on.
However I end up showing values without time order starting from 1 to 12 on x axis.
Is there any way of setting the x axis in order based on my array data?
Fiddle;
http://jsfiddle.net/shamaleyte/6gL1wzsL/4/
Use the time plugin & mode to show date/time & values pairs.
xaxis: {
mode: 'time'
},
See this updated fiddle and the chapter in the documentation.
On HighStocks, how do I know if the currently displayed chart according to the selected period range data is grouped into weeks?
I am asking because I would like to set ToolTip text, saying "week starting..." once the data is grouped into weeks instead of days, so my question is what would be the js code to test whether or not the data displayed is grouped into weeks.
You have access to currentDataGrouping in series object, and here is structure, which should be helpful for you:
currentDataGrouping: {
count: 1
unitName: "week"
unitRange: 604800000
}