We Keep Coding

Amcharts: Gantt - duration in float

Is it possible to enter duration in floats, for example, 0.89
My fiddle - https://jsfiddle.net/sachinpsingh/36xqwskf/1/
I tried but it seems to accept only integer values.
The Code -
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"period": "fff",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"balloonDateFormat": "QQQ",
"columnWidth": 0.5,
"marginBottom": 30,
"valueAxis": {
"type": "date",
"minPeriod": "fff",
"ignoreAxisWidth": true
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[duration]]ms"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01 00:00:00",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}]
}],
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}
});
When I define "duration": 4.88, it shows in the chart as "duration": 4 (only integer value).
I want that it should show 4.88 as the size in chart.

I figured out a solution -
just need to replace the "type": "date", to "type": "time",
just as below -
"valueAxis": {
"type": "time",
"minPeriod": "fff",
"ignoreAxisWidth": true
}
It Works!

How can I change color of StockEvent baloon's border [AmCharts v3]

Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );

You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.

Set bulletBorderColor to lineColor by default in amCharts

According to the amCharts documentation, if bulletBorderColor isn't set, it will default to lineColor. This doesn't seem to be working. I am building a theme for my team to use so they don't have to worry about setting colors every time they generate a chart. Does anyone have a workaround, or solution for this?
CodePen:
http://codepen.io/anon/pen/MwByvL
Code:
AmCharts.makeChart("line-chart-fw", {
"type": "serial",
"theme": "sailthru",
"marginTop": 0,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 0,
"responsive": {
"enabled": true
},
"pathToImages": "js/amcharts/images/",
"graphs": [{
"title": "Yesterday",
"id": "g2",
"balloonText": "",
"type": "smoothedLine",
"valueField": "value2"
}, {
"title": "Today",
"id": "g1",
"balloonText": "<b>[[category]]</b><br><span style='font-size:11px;'>Today: [[value]]</span><br><span style='font-size:11px;'>Yesterday: [[value2]]</span>",
"type": "smoothedLine",
"valueField": "value"
}],
"chartCursor": {
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"valueLineAlpha": 0.5,
"fullWidth": true,
"categoryBalloonEnabled": false
},
"legend": {
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"marginBottom": 0,
"width": 140,
"labelText": "[[title]]",
"valueText": "",
},
"categoryField": "year",
"categoryAxis": {
"parseDates": false,
"minorGridAlpha": 0.1,
"labelsEnabled": true,
"inside": false,
},
"dataProvider": [{
"year": "12 AM",
"value": 5,
"value2": 10
}, {
"year": "1 AM",
"value": 10,
"value2": 5
}, {
"year": "2 AM",
"value": 15,
"value2": 20
}, {
"year": "3 AM",
"value": 5,
"value2": 10
}, {
"year": "4 AM",
"value": 12,
"value2": 18
}, {
"year": "5 AM",
"value": 16,
"value2": 12
}, {
"year": "6 AM",
"value": 7,
"value2": 5
}, {
"year": "7 AM",
"value": 20,
"value2": 15
}, {
"year": "8 AM",
"value": 25,
"value2": 20
}, {
"year": "9 AM",
"value": 20,
"value2": 15
}, {
"year": "10 AM",
"value": 20,
"value2": 8
}, {
"year": "11 AM",
"value": 60,
"value2": 45
}, {
"year": "12 PM",
"value": 80,
"value2": 70
}, {
"year": "1 PM",
"value": 95,
"value2": 80
}, {
"year": "2 PM",
"value": 80,
"value2": 90
}, {
"year": "3 PM",
"value": 40,
"value2": 50
}, {
"year": "4 PM",
"value": 60,
"value2": 20
}, {
"year": "5 PM",
"value2": 35
}, {
"year": "6 PM",
"value2": 20
}, {
"year": "7 PM",
"value2": 10
}, {
"year": "8 PM",
"value2": 20
}, {
"year": "9 PM",
"value2": 5
}, {
"year": "10 PM",
"value2": 5
}, {
"year": "11 PM",
"value2": 10
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"labelsEnabled": true,
"inside": true,
"ignoreAxisWidth": true,
"axisTitleOffset": 0,
"maximum": 100,
}]
});

The documentation might not be very straightforward. Technically bullet border will use line's color, but only if you do not override the bullet color with bulletColor, which you seem to be doing.
To work around that use useLineColorForBulletBorder. (set it to true)
So the relevant part of your theme file should look like this:
AmGraph: {
lineAlpha: 1,
bulletBorderAlpha: 1,
bulletColor: "#ffffff",
lineThickness: 1.5,
fillAlphas: 0.05,
bulletSize: 6,
bulletBorderThickness: 1.5,
bulletColor: "#ffffff",
bulletBorderAlpha: 1,
bullet: "round",
minorGridEnabled: false,
useLineColorForBulletBorder: true
}
P.S. I noticed you have a lot of trailing commas in your theme file (a comma after the last property in the object). While modern browsers can handle it, some older ones will fail with a syntax error. You might want to get that fixed.

Highcharts Error #18 in - Highcharts.Chart(options)

Given the follow Highcharts.Chart(options)
{
"chart": {
"type": "spline"
},
"title": {
"text": "",
"x": -20
},
"subtitle": {
"text": "",
"x": -20
},
"xAxis": [
"23 Jun",
"24 Jun",
"25 Jun",
"26 Jun",
"27 Jun",
"28 Jun",
"29 Jun"
],
"yAxis": {
"title": {
"text": ""
},
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#808080"
}
]
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "middle",
"borderWidth": 0
},
"series": [
{
"name": "exposed",
"data": [
100,
200,
150,
130,
180,
200,
190
],
"dashStyle": "longdash"
},
{
"name": "converted",
"data": [
90,
80,
70,
75,
70,
80,
85
],
"dashStyle": "longdash"
},
{
"name": "engaged",
"data": [
30,
40,
35,
40,
48,
30,
33
],
"dashStyle": "longdash"
}
]
}
When I draw it with - $('#container').highcharts({...}) it prompts the error -
Uncaught Highcharts error #18: www.highcharts.com/errors/18
http://www.highcharts.com/errors/18
You can see it in - jsFiddle
What is wrong with that options format ?

Define a container in the jsFiddle
there is a problème with the x axis. You have to define an object not only an array. Ex
"xAxis": {categories: [
'23 Jun',
'24 Jun',
'25 Jun',
'26 Jun',
'27 Jun',
'28 Jun',
'29 Jun'
]}
do you expect somethink like this http://jsfiddle.net/x4YbZ/ ?

underscore.js how to combine 2 collections

I have two collections A and B. ( A,B have the exactly same structure, but different nodes values)
now I'd like to add A into B, with exactly the order: A B and without merging or changing any
nodes inside them. ( just like a joint action) { A } + {B}
I've read the documentation for underscore but couldn't find a proper function which gets this job done.
any idea?
==========update with example ========Sample is simplified from a larger structure, if there are errors please let me know=========
var collection1 = [{
"date": "29 January 2014",
"items": [{
"name": "Jack",
"score": 90,
"title": "programmer"
}, {
"name": "TOM",
"score": 52,
"title": "designer"
}]
}, {
"date": "28 January 2014",
"items": [{
"name": "Jim",
"score": 30,
"title": "driver"
}, {
"name": "William",
"score": 52,
"title": "worker"
}]
}]
var collect2 = [{
"date": "26 January 2014",
"items": [{
"name": "Marry",
"score": 92,
"title": "teacher"
}, {
"name": "TOM",
"score": 52,
"title": "designer"
}]
}]
========expected output==============
[{
"date": "29 January 2014",
"items": [{
"name": "Jack",
"score": 90,
"title": "programmer"
}, {
"name": "TOM",
"score": 52,
"title": "designer"
}]
}, {
"date": "28 January 2014",
"items": [{
"name": "Jim",
"score": 30,
"title": "driver"
}, {
"name": "William",
"score": 52,
"title": "worker"
}]
}, {
"date": "26 January 2014",
"items": [{
"name": "Marry",
"score": 92,
"title": "teacher"
}, {
"name": "TOM",
"score": 52,
"title": "designer"
}]
}]

I think what you are looking for is simply Array.concat
var foo = ['a','b','c'];
var bar = ['d','e','f'];
var all = foo.concat(bar); // ['a','b','c','d','e','f'];

Use Underscore#extend as : _.extend(collection1, collection2);
DEMO
col1 = { aa: 'aa', cc: 'cc' }; col2 = { bb: 'bb', dd: 'dd' };
_.extend(col1, col2)
console.log(col1);
# Prints Object {aa: "aa", cc: "cc", bb: "bb", dd: "dd"}