JS:
var dataSource = [
{date: new Date(1994,2,1), low: 24.00, high: 25.00, open: 25.00, close: 24.875},
{date: new Date(1994,2,2), low: 23.625, high: 25.125, open: 24.00, close: 24.875},
{date: new Date(1994,2,3), low: 26.25, high: 28.25, open: 26.75, close: 27.00},
{date: new Date(1994,2,4), low: 26.50, high: 27.875, open: 26.875, close: 27.25},
{date: new Date(1994,2,7), low: 26.375, high: 27.50, open: 27.375, close: 26.75},
{date: new Date(1994,2,8), low: 25.75,high: 26.875, open: 26.75, close: 26.00},
{date: new Date(1994,2,9), low: 25.75, high: 26.75, open: 26.125, close: 26.25},
{date: new Date(1994,2,10), low: 25.75, high: 26.375, open: 26.375, close: 25.875},
{date: new Date(1994,2,11), low: 24.875, high: 26.125, open: 26.00, close: 25.375},
{date: new Date(1994,2,14), low: 25.125, high: 26.00, open: 25.625, close: 25.75},
{date: new Date(1994,2,15), low: 25.875, high: 26.625, open: 26.125, close: 26.375},
{date: new Date(1994,2,16), low: 26.25, high: 27.375, open: 26.25, close: 27.25},
{date: new Date(1994,2,17), low: 26.875, high: 27.25, open: 27.125, close: 26.875},
{date: new Date(1994,2,18), low: 26.375, high: 27.125, open: 27.00, close: 27.125},
{date: new Date(1994,2,21), low: 26.75, high: 27.875, open: 26.875, close: 27.75},
{date: new Date(1994,2,22), low: 26.75, high: 28.375, open: 27.50, close: 27.00},
{date: new Date(1994,2,23), low: 26.875, high: 28.125, open: 27.00, close: 28.00},
{date: new Date(1994,2,24), low: 26.25, high: 27.875, open: 27.75, close: 27.625},
{date: new Date(1994,2,25), low: 27.50, high: 28.75, open: 27.75, close: 28.00},
{date: new Date(1994,2,28), low: 25.75, high: 28.25, open: 28.00, close: 27.25},
{date: new Date(1994,2,29), low: 26.375, high: 27.50, open: 27.50, close: 26.875},
{date: new Date(1994,2,30), low: 25.75, high: 27.50, open: 26.375, close: 26.25},
{date: new Date(1994,2,31), low: 24.75, high: 27.00, open: 26.50, close: 25.25},
];
$(function () {
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: 'stock'
},
series: {},
argumentAxis: {
tickInterval: { days: 2 },
label: {
format: 'dd/MM'
}
}
});
});
View :
Markup :
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
Problem :
Here my Date is new Date(1994,2,1) and in chart it display
02/03
And at the starting and ending extra date is display in chart like
28/2 And 30/3
So,What should i change to make my same date as in datasource ?
You can visit example by following link also
DevExpress Link
You use a continuous axis, you can specify how far to extend the axis from its maximum and minimum values. Use the axis' minValueMargin and maxValueMargin properties to do this.
Also check the valueMarginsEnabled property by setting it to false.
By default, the axes extend slightly beyond their extrema. It prevents
cutting off parts of the minimum and maximum series points. To disable
this feature, set the valueMarginsEnabled option to false.
Regarding the date format, check the data/time style which chart gadget understand.
The reason is that JavaScript counts months from 0 to 11. January is 0. December is 11. That is why this happens. See JavaScript Dates to learn more.
If you have no gaps in your dates try switching the argumentAxis.type to discrete. When the axis is continuous the chart manipulates the raw data and changes the values used for the argumentAxis.
Related
We need to manipulate the event rendering based on other events for particular day. So is there any option available to get all the events for a day, so that we can merge all the events or use 1st event only or 2nd event only for a particular day based on the condition in our event data (means Merge all events or exclude 1st event & include 2nd event, or include 1st event & exclude 2nd event). We are looking something like a day render but the callback have the event data of that date.
Please see the sample events with the recurring behavior description below
[{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"ranges": {
"start": "2017-09-18",
"end": "2017-09-25"
},
"recurringBehaviourType": 1,
"recurringBehaviour": "Merge this event with future conflicting events. This is working fine=> oe. this #event1 merges with #event2.",
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-23",
"end": "2017-09-23"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"recurringBehaviourType": 2,
"recurringBehaviour": "Use this event instead of future conflicting events. ie. #event4 no need to merge with this #event3. Here need to ignore #event4.",
"ranges": {
"start": "2017-09-01",
"end": "2017-09-08"
},
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-06",
"end": "2017-09-06"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"ranges": {
"start": "2017-09-10",
"end": "2017-09-16"
},
"recurringBehaviourType": 3,
"recurringBehaviour": "Use future conflicting events instead of this eventie. ie. This #event5 no need to merge with #event6. Here need to ignore this #event5.",
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-12",
"end": "2017-09-12"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
]
We are very exited to know if there is a solution for our this requirement .
You can use the eventRender() callback to add CSS classes or data attributes to the events, including CSS to hide them if you don't want to display them yet.
Then, once all events have been rendered with your classes/data attributes, you can use the eventAfterAllRender() callback to find and examine them using those classes/data attributes. You could then update the events' CSS, or add and display new elements.
Here's an example with working JS to show only the total number of events, not the actual events, on any given day. It should get you started.
I have bar graph and i want to change color of graph if it goes higher than 500.
following data: days is a variable days store values from mysql how do i define low: and high: values in following code, I have tried multiple options but no luck
days variable hold values like 150, 200, 234, 655, 7434, 222
series: [{
type: 'column',
allowPointSelect: true,
data: days,
shadow : true,
showInLegend: true,
dataLabels: {
enabled: true,
},
}]
You can do this by pre-processing your data.
Something like this:
$.each(dataRaw, function(i,val) {
if(val < low) {
dataFiltered.push({"y":val,"color":"blue"});
}
else if(val > high) {
dataFiltered.push({"y":val,"color":"red"});
}
else {
dataFiltered.push(val);
}
});
You have to pre-define your high/low values, loop through your data, and build a data array that includes the color declarations for any values requiring highlight.
Example:
http://jsfiddle.net/jlbriggs/svucekrm/
How do I find the minimum value per day? The dimension being the Days, the group the minimum amount.
Using the following data as an example -
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
So the results should be -
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
I'm going round in circles trying to work this out and I'm now completely confused so any help would be appreciated!
Thanks.
The following will get your your absolute minimum. Won't work with filtering though!
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
var ndx = crossfilter(data);
var dayDim = ndx.dimension(function (d) { return "" + d.date.substr(8,2); });
var minGroup = dayDim.group().reduce(
function (p, v) { if(v.amount < p || p === null) p = v.amount; return p; },
function (p, v) { return p; },
function () { return null; }
);
console.table(minGroup.top(Infinity));
If you want filtering to work, you need to keep a sorted array of all the values found in each array and then add/remove values as data is filtered and unfiltered. Then use this sorted array to figure out your minimum. Something like the following (untested):
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
var ndx = crossfilter(data);
var dayDim = ndx.dimension(function (d) { return "" + d.date.substr(8,2); });
var minGroup = dayDim.group().reduce(
function (p, v) {
if(v.amount < p.min || p.min === null) {
p.min = v.amount;
}
p.values.push(v.amount);
return p;
},
function (p, v) {
p.values.splice(p.values.indexOf(v.amount),1);
if(v.amount === p.min) {
p.values.sort(function(a,b) { return a < b ? -1 : 1; });
p.min = p.values[0];
}
return p;
},
function () { return { min: null, values: [] }; }
);
console.log(minGroup.top(Infinity));
I need to generate a graph using the following XML in FLEX.
[Bindable]
public var stockDataAC:ArrayCollection = new ArrayCollection( [
{date: "2010, 4, 27", close: 41.71},
{date: "2010, 4, 28", close: 42.21},
{date: "2010, 5, 2", close: 42.71},
{date: "2010, 5, 3", close: 42.99},
{date: "2010, 5, 4", close: 44} ]);
..............
< mx:horizontalAxis >
< mx:DateTimeAxis dataUnits="days" displayLocalTime="true" parseFunction="myParseFunction" / >
< /mx:horizontalAxis>
But this displays the graph from 2010/4/27 till 2010/5/4 including 2010/4/29, 2010/4/30 and 2010/5/1. I require the graph to display only the points in XML and exclude remaining thought it lies in between since it contains no data. How this can be done?
Maybe you should consider tracing lines between the XML points, instead of displaying points.
See Canvas.lineTo(x,y) for more.
I have an ArrayCollection of Objects. Each Object has the following keys/values:
{date: 2009-12-01, visits=13555, bouceRate=45}
{date: 2009-12-05, visits=46955, bouceRate=45}
{date: 2009-12-06, visits=13685, bouceRate=45}
{date: 2009-12-02, visits=13685, bouceRate=45}
{date: 2009-12-04, visits=68755, bouceRate=45}
{date: 2009-12-03, visits=35875, bouceRate=45}
I need to sort this ArrayCollection by date, so it would be from past to present - like so:
{date: 2009-12-01, visits=13555, bouceRate=45}
{date: 2009-12-02, visits=13685, bouceRate=45}
{date: 2009-12-03, visits=35875, bouceRate=45}
{date: 2009-12-04, visits=68755, bouceRate=45}
{date: 2009-12-05, visits=46955, bouceRate=45}
{date: 2009-12-06, visits=13685, bouceRate=45}
I have tried the following with no prevail (not sorting):
var dateSort:Sort = new Sort();
dateSort.fields = [new SortField("date", false, false, true)];
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();
// traceout
for (var i:int = 0; i <newAreaChartData.length; i++)
trace ("Object #" + i + ": " + ObjectUtil.toString(newAreaChartData.getItemAt(i)));
This worked for me:
for(i = 0; i < newAreaChartData.length; ++i) {
newAreaChartData[i].formattedDate = getActualDate(newAreaChartData[i].date);
newAreaChartData[i].dateTime = newAreaChartData[i].formattedDate.time;
trace(newAreaChartData[i].dateTime);
}
var dateSort:Sort = new Sort();
dateSort.fields = [new SortField("dateTime", false, false, true)];
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();
for (var i:int = 0; i <newAreaChartData.length; i++)
trace ("Object #"+ i + ": " + ObjectUtil.toString(newAreaChartData.getItemAt(i)));
The way your creating the SortField :
new SortField("date", false, false, true)
From the API , the last parameter should mean that you want the value to be sorted numerically instead of as a string.
What is the type of the "date" field in the Object ? If it is a string, then you might want to sort things alphabetically
new SortField("date", false, false, null)
Hoping this helps
PH
I don't believe that the sort is applied until you call ArrayCollection.refresh():
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();