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.
Related
I have this current data structure on my firebase
{
"bible-operators": [{
"op-id": 0,
"op-name": "Anonymous",
"bcv": 101001001,
"op-version": 1,
"pass": "none",
"setting1": 1,
"setting2": 2,
"setting3": 3,
"setting4": 4,
"setting5": 5,
"setting6": 6,
"setting7": 7,
"bg": 1
}, ... {
"op-id": 4,
"op-name": "Test User 4",
"bcv": 101001001,
"op-version": 1,
"pass": "pass4",
"setting1": 1,
"setting2": 2,
"setting3": 3,
"setting4": 4,
"setting5": 5,
"setting6": 6,
"setting7": 7,
"bg": 1
}]
}
I tried to make test update using this function
function update(op_id, nuname, nuversion, nubcv, nupass) {
firebase.database().ref('operators/' + op_id).set({
"op-name": nuname,
"op-version": nuversion,
pass: nupass,
bcv : nubcv
});
}
My expected result is to update the provided new data but retain the others that has no updates. However, after calling update, all non provided data were deleted from the database. setting1-7 and bg.
How can I run the update without losing data that has no new data provided?
Thanks
The function firebase.database().ref('bible-operators/' + op_id).set() replace the document, you have to use update() instead of set().
try it:
firebase.database().ref('bible-operators/' + op_id).update({
"op-name": nuname,
"op-version": nuversion,
pass: nupass,
bcv : nubcv
});
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've got the mfpierre:chartist meteor package installed and the mspi:chartistlegend plugin for it installed (both atmosphere packages). I've got the plugin like so:
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend() ]
});
The chart won't render with the "plugins" key/value pair in place. If I remove the "plugins" key/value, the chart renders fine. As far as I can tell, I'm following the documentation. Any help welcome.
I am not using meteor so your mileage may vary but I am using Angular2 and was getting similar errors. The answer for me was to use the legend plugin to get it initialized first and then use it in the Chartist plugin definition like you have done. This feels hacky but its working...
import * as Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-legend';
constructor(){
var tester = new MyLegend(); //without this line, you get 'Chartist.plugins undefined'
}
.... in another method like ngOnInit or something...
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill']
}) ]
});
You need to provide an object to .legend() containing names for the legends, like this:
new Chartist.Line('.ct-chart-line', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
},
plugins: [
Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill'],
})
]
});
More demos here: https://codeyellowbv.github.io/chartist-plugin-legend/
You can also add names in the series like this:
series: [
{ "name": "Money A", "data": [60000, 40000, 80000, 70000] },
{ "name": "Money B", "data": [40000, 30000, 70000, 65000] },
{ "name": "Money C", "data": [8000, 3000, 10000, 6000] }
]
Source
I am working with date-time highchart and I want x-axis tick interval to appear every month(jan-12, Feb-12, Mar-12). But If the data points are less than 4 then the x-axis label starts showing days of month as well (10 dec,24 dec, 7 jan). How do I make sure that even if there are less data points or the graph is zoomed, the tick interval are monthly. Here is the code for x-axis:
xAxis : {
type: 'datetime',
tickmarkPlacement:'on',
dateTimeLabelFormats: {
month: '%b-%y',
},
minRange:1*30*24*60*60*1000,
labels : {
rotation :'280',
align:'right',
style: {
fontFamily : 'Helvetica',
fontSize: '10px'
}
}
}
Thanks in Advance
As mentioned in my earlier comment, the easiest way to get what you've asked for is to set the tickInterval:
xAxis: {
type: 'datetime',
tickInterval:86400000 * 30
}
Example:
http://jsfiddle.net/jlbriggs/Lmfa5v55/
With this setup it doesn't matter what interval your data is in - in the example, it's daily - or if it's irregularly spaced or not.
It doesn't matter what level of zoom, or how many data points, you'll have a tick and label for each month within the bounds of the data.
Try put exact interval tick, and automatic day or month will appear.
You only need format label, after put ticks.
Options.xAxis.tickPositioner = function () {
const ticks = this.series[0].xData;
let result = [];
for (let index = 0; index < ticks.length; index++) {
result.push(ticks[index]);
}
return result;
};
and format xAxis
labels: {
format: "{value:%b-%Y}",
align: "center"
}
to tooltips
tooltip: {
valueSuffix: "",
valuePrefix: "",
xDateFormat: "%B - %Y",
valueDecimals: 0
},
The problem here is that not all the months have 30 days, is better not to set the tickInterval or the minRange. You could try to generate the months at your own, like:
startDate = Date.UTC(2012, 1, 1); //your starting date
// Set the xaxis value as first day of month
for (var i = 0; i < yourData.length; i++) {
var d = new Date();
d.setTime(startDate);
d.setMonth(d.getMonth() + i);
categories.push(d.getTime());
}
Or generate your own categories as shown on Highcharts demo page:
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec' //etc.
],
},
See a working demo of first option at: http://jsfiddle.net/gjkde5np/1/
Extracted from: How to set PointIntervals per month in HighChart
You could also check the code from highcharts "Time series with irregular intervals" http://www.highcharts.com/demo/spline-irregular-time . Here they use the [Date.UTC(1970, 9, 21), 0], [Date.UTC(1970, 10, 4), 0.28]
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();