diff --git a/src/amchart/Bar.js b/src/amchart/Bar.js index b9dfdc6ecc..be5d2bf8d6 100644 --- a/src/amchart/Bar.js +++ b/src/amchart/Bar.js @@ -32,7 +32,7 @@ Bar.prototype.publish("stackType", "regular", "set", "Stack Type",["none","regular","100%"],{tags:["Basic"]}); - Bar.prototype.publish("tooltipTemplate","[[category]]([[title]]): [[value]]", "string", "Tooltip Text",null,{tags:["Intermediate"]}); + //Bar.prototype.publish("tooltipTemplate","[[category]]([[title]]): [[value]]", "string", "Tooltip Text",null,{tags:["Intermediate"]}); Bar.prototype.enter = function(domNode, element) { CommonSerial.prototype.enter.apply(this, arguments); diff --git a/src/amchart/CommonSerial.js b/src/amchart/CommonSerial.js index 76393faff7..83c6962902 100644 --- a/src/amchart/CommonSerial.js +++ b/src/amchart/CommonSerial.js @@ -1,3 +1,12 @@ + +//http://stackoverflow.com/questions/22209619/amchart-x-axis-data-date-formatting-to-display-per-day-values-with-hours-minutes +//http://www.amcharts.com/demos/date-based-data/ + + +//http://www.amcharts.com/tutorials/time-series-chart-the-great-advantages-of-parsing-dates/ +// http://www.amcharts.com/tutorials/updating-balloon-tool-tip-text-fly/ + + "use strict"; (function(root, factory) { if (typeof define === "function" && define.amd) { @@ -12,6 +21,9 @@ this._tag = "div"; this._chart = {}; + + this._dateParserData = d3.time.format("%Y-%m-%d").parse; + this._dateParserValue = d3.time.format("%Y-%m-%d").parse; } CommonSerial.prototype = Object.create(HTMLWidget.prototype); CommonSerial.prototype.constructor = CommonSerial; @@ -62,7 +74,8 @@ CommonSerial.prototype.publish("bulletSize", 0, "number", "Bullet Size",null,{tags:["Intermediate"]}); CommonSerial.prototype.publish("bulletType", "none", "set", "Bullet Type", ["none", "round", "square", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "bubble", "diamond"],{tags:["Basic"]}); - CommonSerial.prototype.publish("dataDateFormat", null, "string", "",null,{tags:["Private"]}); + //CommonSerial.prototype.publish("dataDateFormat", null, "string", "",null,{tags:["Private"]}); + //CommonSerial.prototype.publish("balloonDateFormat", "MMM DD, YYYY HH mm ss" , "string", "",null,{tags:["Private"]}); CommonSerial.prototype.publish("xAxisAutoGridCount", true, "boolean", "Specifies Whether Number of GridCount Is Specified Automatically, According To The Axis Size",null,{tags:["Advanced"]}); CommonSerial.prototype.publish("xAxisGridPosition", "middle", "set", "Specifies If A Grid Line Is Placed On The Center of A Cell or On The Beginning of A Cell", ["start","middle"],{tags:["Advanced"]}); @@ -93,9 +106,124 @@ CommonSerial.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette",null,{tags:["Intermediate","Shared"]}); + CommonSerial.prototype.publish("xAxisTypeTimePattern", "%Y-%m-%d", "string", "Time Series Pattern"); + CommonSerial.prototype.publish("yAxisTypeTimePattern", "%Y-%m-%d", "string", "Time Series Pattern"); + + CommonSerial.prototype.publish("yAxisType", "linear", "set", "Y-Axis Type", ["none", "linear", "pow", "log", "time"]); + CommonSerial.prototype.publish("xAxisType", "ordinal", "set", "X-Axis Type", ["ordinal", "linear", "time"]); + + CommonSerial.prototype.publish("yAxisTickFormat", "s", "string", "Y-Axis Tick Format"); + + CommonSerial.prototype.publish("balloonType", "amchart", "set", "Balloon Type", ["hpcc", "amchart"]); + + var xAxisTypeTimePattern = CommonSerial.prototype.xAxisTypeTimePattern; + CommonSerial.prototype.xAxisTypeTimePattern = function (_) { + var retVal = xAxisTypeTimePattern.apply(this, arguments); + if (arguments.length) { + this._dateParserData = d3.time.format(_).parse; + } + return retVal; + }; + + var yAxisTypeTimePattern = CommonSerial.prototype.yAxisTypeTimePattern; + CommonSerial.prototype.yAxisTypeTimePattern = function (_) { + var retVal = yAxisTypeTimePattern.apply(this, arguments); + if (arguments.length) { + this._dateParserValue = d3.time.format(_).parse; + } + return retVal; + }; + + + CommonSerial.prototype.testDataTimeX = function () { + var rawData = [{ "DateTime": "2014-06-01T07:01:39", "Price": 821 }, { "DateTime": "2015-12-01T01:33:35", "Price": 841 }, { "DateTime": "2015-12-25T23:58:34", "Price": 1356 }, { "DateTime": "2015-05-16T17:02:17", "Price": 1136 }, { "DateTime": "2015-09-11T10:37:50", "Price": 1094 }, { "DateTime": "2014-11-03T21:34:47", "Price": 1266 }, { "DateTime": "2015-11-05T12:31:45", "Price": 1159 }, { "DateTime": "2014-11-27T16:25:57", "Price": 1572 }, { "DateTime": "2015-12-26T15:13:48", "Price": 1083 }, { "DateTime": "2014-06-18T16:21:06", "Price": 1324 }, { "DateTime": "2014-05-13T05:35:12", "Price": 1553 }, { "DateTime": "2014-06-01T20:40:50", "Price": 1216 }, { "DateTime": "2015-07-15T07:19:39", "Price": 1403 }, { "DateTime": "2016-03-17T09:32:59", "Price": 1382 }, { "DateTime": "2015-05-28T02:24:27", "Price": 1337 }, { "DateTime": "2015-08-08T18:46:00", "Price": 1084 }, { "DateTime": "2015-10-25T15:42:48", "Price": 1217 }, { "DateTime": "2016-01-07T00:48:47", "Price": 1464 }, { "DateTime": "2015-12-13T23:21:16", "Price": 894 }, { "DateTime": "2014-06-13T22:49:52", "Price": 967 }, { "DateTime": "2015-01-07T20:33:03", "Price": 1033 }, { "DateTime": "2015-02-28T10:08:16", "Price": 1119 }, { "DateTime": "2015-11-09T15:33:56", "Price": 1298 }, { "DateTime": "2015-04-18T00:05:19", "Price": 808 }, { "DateTime": "2016-04-19T04:09:19", "Price": 1331 }, { "DateTime": "2015-11-26T05:03:53", "Price": 1221 }, { "DateTime": "2014-09-17T08:59:31", "Price": 1450 }, { "DateTime": "2016-03-29T15:34:22", "Price": 1403 }, { "DateTime": "2015-09-13T13:46:01", "Price": 1088 }, { "DateTime": "2014-12-04T20:41:36", "Price": 1503 }, { "DateTime": "2015-06-19T12:43:51", "Price": 1350 }, { "DateTime": "2014-05-21T12:58:46", "Price": 874 }, { "DateTime": "2016-02-11T07:48:56", "Price": 1519 }, { "DateTime": "2015-02-23T22:35:44", "Price": 1383 }, { "DateTime": "2015-11-28T11:35:45", "Price": 928 }, { "DateTime": "2016-01-17T10:27:12", "Price": 941 }, { "DateTime": "2015-02-04T07:17:50", "Price": 1076 }, { "DateTime": "2016-04-11T08:28:10", "Price": 907 }, { "DateTime": "2015-02-27T15:02:35", "Price": 1263 }, { "DateTime": "2016-03-23T15:54:53", "Price": 911 }, { "DateTime": "2014-09-26T19:15:38", "Price": 1076 }, { "DateTime": "2015-10-15T15:13:47", "Price": 1052 }, { "DateTime": "2015-04-07T13:22:52", "Price": 1481 }, { "DateTime": "2016-01-31T11:15:52", "Price": 1248 }, { "DateTime": "2014-11-20T09:46:51", "Price": 1360 }, { "DateTime": "2015-10-19T15:05:26", "Price": 1094 }, { "DateTime": "2016-04-30T09:54:01", "Price": 1552 }, { "DateTime": "2015-06-07T23:49:49", "Price": 1329 }, { "DateTime": "2015-07-10T20:12:46", "Price": 801 }, { "DateTime": "2014-12-22T19:11:04", "Price": 1066 }, { "DateTime": "2015-12-07T17:03:07", "Price": 1032 }, { "DateTime": "2015-11-30T13:11:22", "Price": 1546 }, { "DateTime": "2014-06-29T07:24:44", "Price": 1042 }, { "DateTime": "2014-08-03T08:15:25", "Price": 1326 }, { "DateTime": "2015-09-01T20:32:23", "Price": 928 }, { "DateTime": "2016-05-02T12:56:47", "Price": 1550 }, { "DateTime": "2014-11-18T04:38:21", "Price": 972 }, { "DateTime": "2016-05-03T01:05:51", "Price": 1164 }, { "DateTime": "2015-02-03T17:16:07", "Price": 998 }, { "DateTime": "2015-09-04T21:29:16", "Price": 1199 }, { "DateTime": "2015-12-02T10:44:32", "Price": 1250 }, { "DateTime": "2016-01-26T16:11:51", "Price": 1241 }, { "DateTime": "2015-05-30T12:42:11", "Price": 1336 }, { "DateTime": "2014-09-11T10:19:44", "Price": 1231 }, { "DateTime": "2016-04-06T05:54:55", "Price": 1276 }, { "DateTime": "2016-02-18T00:29:49", "Price": 939 }, { "DateTime": "2014-11-16T15:35:04", "Price": 1557 }, { "DateTime": "2015-12-10T03:06:01", "Price": 1292 }, { "DateTime": "2015-05-31T04:19:33", "Price": 1347 }, { "DateTime": "2014-10-08T17:26:41", "Price": 1041 }, { "DateTime": "2015-01-13T10:43:21", "Price": 1089 }, { "DateTime": "2015-04-14T04:05:10", "Price": 999 }, { "DateTime": "2015-10-05T11:47:54", "Price": 1520 }, { "DateTime": "2015-06-26T00:22:00", "Price": 1342 }, { "DateTime": "2015-05-13T14:32:54", "Price": 976 }, { "DateTime": "2015-07-13T19:13:18", "Price": 1576 }, { "DateTime": "2014-05-17T21:59:02", "Price": 1220 }, { "DateTime": "2015-03-15T07:15:00", "Price": 1230 }, { "DateTime": "2015-02-22T22:04:01", "Price": 1510 }, { "DateTime": "2015-11-26T06:03:07", "Price": 816 }, { "DateTime": "2014-07-02T20:20:52", "Price": 1343 }, { "DateTime": "2015-07-14T13:10:03", "Price": 1285 }, { "DateTime": "2015-11-01T03:18:14", "Price": 1424 }, { "DateTime": "2015-03-17T12:04:38", "Price": 1109 }, { "DateTime": "2015-11-19T05:47:16", "Price": 1278 }, { "DateTime": "2015-11-12T09:03:53", "Price": 841 }, { "DateTime": "2014-10-17T18:37:00", "Price": 1425 }, { "DateTime": "2015-09-27T04:37:49", "Price": 1555 }, { "DateTime": "2015-07-30T04:01:21", "Price": 1222 }, { "DateTime": "2015-02-11T17:59:08", "Price": 1464 }, { "DateTime": "2014-09-13T19:57:59", "Price": 1271 }, { "DateTime": "2015-03-25T10:55:59", "Price": 1397 }, { "DateTime": "2014-07-13T09:36:47", "Price": 915 }, { "DateTime": "2015-02-15T10:49:48", "Price": 1015 }, { "DateTime": "2014-10-24T08:50:59", "Price": 835 }, { "DateTime": "2016-01-14T18:23:43", "Price": 1088 }, { "DateTime": "2016-03-05T04:11:37", "Price": 1573 }, { "DateTime": "2014-08-09T06:02:06", "Price": 1504 }, { "DateTime": "2015-05-25T07:47:41", "Price": 1326 }, { "DateTime": "2016-02-11T06:53:58", "Price": 1525 }]; + rawData.sort(function (l, r) { + if (l.DateTime > r.DateTime) { + return 1; + } + if (l.DateTime < r.DateTime) { + return -1; + } + return 0; + }); + return this + .xAxisType("time") + .xAxisTypeTimePattern("%Y-%m-%dT%H:%M:%S") + .yAxisType("linear") + .columns(["Date", "Price1", "Price2", "Price3"]) + .data(rawData.map(function (row, idx) { + switch (idx % 3) { + case 0: + return [row.DateTime, row.Price, null, null]; + case 1: + return [row.DateTime, null, row.Price, null]; + case 2: + return [row.DateTime, null, null, row.Price]; + } + })) + ; + }; + + + CommonSerial.prototype.formatData = function (d) { + switch (this.xAxisType()) { + case "time": + return this._dateParserData(d); + default: + return d; + } + }; + + CommonSerial.prototype.formatValue = function (d) { + if (!d) { + return d; + } + if (d instanceof Array) { + return d.map(function (item) { + return this.formatValue(item); + }, this); + } + switch (this.yAxisType()) { + case "time": + return this._dateParserValue(d); + default: + if (typeof d === "string") { + return +d; + } + return d; + } + }; + + CommonSerial.prototype.formattedData = function () { + return this.data().map(function (row) { + return row.map(function (cell, idx) { + if (idx === 0) { + return this.formatData(cell); + } if (idx >= this._columns.length) { + return cell; + } + return this.formatValue(cell); + }, this); + }, this); + }; + + + + + CommonSerial.prototype.testData = function () { + this.testDataTimeX() + return this; + }; + + + + + CommonSerial.prototype.updateChartOptions = function() { + var context = this; + //this._chart.dataDateFormat = this.dataDateFormat(); //TODO look into this more + //this._chart.balloonDateFormat = this.balloonDateFormat(); - this._chart.dataDateFormat = this.dataDateFormat(); this._chart.type = "serial"; this._chart.startDuration = this.startDuration(); this._chart.rotate = this.orientation() === "vertical"; // this messes up the hover over things @@ -125,6 +253,15 @@ this._chart.categoryAxis.titleColor = this.xAxisTitleFontColor(); this._chart.categoryAxis.titleFontSize = this.xAxisTitleFontSize(); + this._chart.categoryAxis.labelFunction = function(d) { + return d; + } + + if (this.xAxisType() === 'time') { + this._chart.categoryAxis.parseDates = true; + this._chart.categoryAxis.minPeriod = "hh"; + } + this._chart.titles = []; if (this.marginLeft()) { this._chart.marginLeft = this.marginLeft(); } @@ -132,7 +269,9 @@ if (this.marginTop()) { this._chart.marginTop = this.marginTop(); } if (this.marginBottom()) { this._chart.marginBottom = this.marginBottom(); } - this._chart.dataProvider = this.formatData(this._data); + this._chart.dataProvider = this.amFormatData(this._data); + //this._chart.dataProvider = this.formattedData(this._data); + this._chart.valueAxes[0].title = this.yAxisTitle(); this._chart.valueAxes[0].titleColor = this.yAxisTitleFontColor(); @@ -150,6 +289,16 @@ this._chart.valueAxes[0].boldPeriodBeginning = this.yAxisBoldPeriodBeginning(); this._chart.valueAxes[0].axisTitleOffset = this.yAxisTitleOffset(); + this._chart.valueAxes[0].labelFunction = function(d) { + return d; + } + + if (this.yAxisType() === 'time') { + this._chart.valueAxes[0].parseDates = true; + this._chart.valueAxes[0].minPeriod = "hh"; + } + + if (this.showScrollbar()) { this._chart.chartScrollbar.enabled = true; } else { @@ -160,10 +309,19 @@ }; CommonSerial.prototype.buildGraphObj = function(gType,i) { + console.log('here'+i); var context = this; var gObj = {}; - gObj.balloonText = context.tooltipTemplate(); + if (this.balloonType() === "amchart") { + gObj.balloonFunction = function(d) { + var bArr = []; + for (var key in d.dataContext) { + bArr.push(d.dataContext[key]); + } + return bArr.join(","); + } + } gObj.lineAlpha = context.lineOpacity(); gObj.lineColor = context.lineColor(); gObj.lineThickness = context.lineWidth(); @@ -198,16 +356,26 @@ return gObj; }; - CommonSerial.prototype.formatData = function(dataArr) { + CommonSerial.prototype.amFormatData = function(dataArr) { var dataObjArr = []; var context = this; dataArr.forEach(function(dataRow) { var dataObj = {}; context._columns.forEach(function(colName, cIdx) { - dataObj[colName] = dataRow[cIdx]; + //dataObj[colName] = context.formattedData(dataRow[cIdx]); + //dataObj[colName] = context.formatData_X(dataRow[cIdx]); + //dataObj[colName] = dataRow[cIdx]; + if (cIdx === 0) { + //console.log(context._dateParserData(dataRow[cIdx])) + dataObj[colName] = context._dateParserData(dataRow[cIdx]); // need disticntion between X and Y Vals ?? and do i need to create a date object? + + } else { + dataObj[colName] = dataRow[cIdx]; + } }); dataObjArr.push(dataObj); }); + //console.log(dataObjArr); return dataObjArr; }; @@ -221,7 +389,7 @@ colArr.slice(1, colArr.length).forEach(function(col) { context._valueField.push(col); }); - this._columns = colArr; + this._columns = colArr; // this might not work as expected cause were using __ now? return this; } return retVal; @@ -232,13 +400,18 @@ var context = this; var initObj = { type: "serial", - chartScrollbar: {} + chartScrollbar: {}, }; if (typeof define === "function" && define.amd) { initObj.pathToImages = require.toUrl("amchartsImg"); } this._chart = AmCharts.makeChart(domNode, initObj); this._chart.addListener("clickGraphItem", function(e) { + //e.item.dataContext.fill = "#0079DC"; //todo param for selection color? + e.item.dataContext[e.graph.fillColorsField] = "#0079DC"; + e.chart.validateData(); + console.log(e.graph.fillColorsField); + console.log(e); context.click(context.rowToObj(context._data[e.index]), context._columns[e.target.columnIndex+1]); }); }; diff --git a/src/chart/XYAxis.js b/src/chart/XYAxis.js index 8e6e4c4b27..5b818fec84 100644 --- a/src/chart/XYAxis.js +++ b/src/chart/XYAxis.js @@ -12,6 +12,8 @@ this._dateParserData = d3.time.format("%Y-%m-%d").parse; this._dateParserValue = d3.time.format("%Y-%m-%d").parse; + + this.test = []; } XYAxis.prototype = Object.create(SVGWidget.prototype); XYAxis.prototype.constructor = XYAxis; @@ -206,7 +208,7 @@ return d.map(function (item) { return this.formatValue(item); }, this); - } + } switch (this.yAxisType()) { case "time": return this._dateParserValue(d);