http://git-wip-us.apache.org/repos/asf/stratos/blob/53c98dd9/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js ---------------------------------------------------------------------- diff --git a/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js b/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js new file mode 100644 index 0000000..7d827fd --- /dev/null +++ b/extensions/das/modules/artifacts/metering-dashboard/capps/stratos-metering-service/GadgetMemberCount_1.0.0/Member_Count/js/igviz.js @@ -0,0 +1,3565 @@ +(function () { + + var igviz = window.igviz || {}; + + igviz.version = '1.0.0'; + + igviz.val = 0; + window.igviz = igviz; + var persistedData = []; + var maxValueForUpdate; + var singleNumSvg; + var singleNumCurveSvg; + var mapChart; + var mapSVG; + var worldMapCodes; + var usaMapCodes; + + /*************************************************** Initializtion functions ***************************************************************************************************/ + + + igviz.draw = function (canvas, config, dataTable) { + var chart = new Chart(canvas, config, dataTable); + + if (config.chartType == "singleNumber") { + this.drawSingleNumberDiagram(chart); + } else if (config.chartType == "map") { + this.drawMap(canvas, config, dataTable); + } else if (config.chartType == "tabular") { + this.drawTable(canvas, config, dataTable); + } else if (config.chartType == "arc") { + this.drawArc(canvas, config, dataTable); + } else if (config.chartType == "drill") { + this.drillDown(0, canvas, config, dataTable, dataTable); + } + return chart; + //return + }; + + igviz.setUp = function (canvas, config, dataTable) { + var chartObject = new Chart(canvas, config, dataTable); + + if (config.chartType == "bar") { + this.drawBarChart(chartObject, canvas, config, dataTable); + } else if (config.chartType == "scatter") { + this.drawScatterPlot(chartObject); + } else if (config.chartType == "line") { + this.drawLineChart(chartObject); + } else if (config.chartType == "area") { + this.drawAreaChart(chartObject); + } + return chartObject; + }; + + + /*************************************************** Line chart ***************************************************************************************************/ + + igviz.drawLineChart = function (chartObj) { + divId = chartObj.canvas; + chartConfig = chartObj.config; + dataTable = chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = []; + for (i = 0; i < chartConfig.yAxis.length; i++) { + yStrings[i] = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + xScaleConfig = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "x", + "range": "width", + "zero": false, + "clamp": false, + "field": xString, + "round": true + } + + yScaleConfig = { + "index": chartConfig.yAxis[0], + "schema": dataTable.metadata, + "name": "y", + "range": "height", + "nice": true, + "field": yStrings[0] + } + + var yDomain = []; + chartConfig.yAxis.forEach(function (columnIndex, i) { + dataTable.data.forEach(function (row, j) { + yDomain.push(row[columnIndex]); + }); + }); + + yDomain.sort(function (a, b) { + return a - b; + }); + + var yScale = { + name: "y", + type: "linear", + range: "height", + zero: true, + domain: [yDomain[0], yDomain[yDomain.length - 1]] + }; + + var xScale = setScale(xScaleConfig); + var yScale = yScale; + + var xAxisConfig = { + "type": "x", + "scale": "x", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "right", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "y", + "angle": 0, + "title": "Member Count", + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + if (chartConfig.interpolationMode == undefined) { + chartConfig.interpolationMode = "monotone"; + } + var spec = { + "width": chartConfig.width - 250, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':90,"right":150}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale, yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + } + ], + "axes": [xAxis, yAxis + ], + "legends": [ + { + + "orient": "right", + "fill": "color", + "title": "Member Count", + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 1.5} + + } + } + } + ], + + "marks": [] + } + + for (i = 0; i < chartConfig.yAxis.length; i++) { + markObj = { + "type": "line", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings[i]}, + "stroke": {"scale": "color", "value": dataTable.metadata.names[chartConfig.yAxis[i]]}, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings[i]} + } + } + }; + pointObj = { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]}, + "fill": { + "scale": "color", "value": dataTable.metadata.names[chartConfig.yAxis[i]] + //"fillOpacity": {"value": 0.5} + }, + "update": { + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 300}, + "stroke": {"value": "white"} + } + } + } + } + + + spec.marks.push(markObj); + spec.marks.push(pointObj); + spec.legends[0].values.push(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + chartObj.toolTipFunction = []; + chartObj.toolTipFunction[0] = function (event, item) { + + console.log(tool, event, item); + if (item.mark.marktype == 'symbol') { + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1] = function (event, item) { + + tool.html("").style({'left': event.pageX + 10 + 'px', 'top': event.pageY + 10 + 'px', 'opacity': 0}) + + } + + chartObj.spec = spec; + chartObj.toolTip = true; + chartObj.spec = spec; + + } + + + /*************************************************** Bar chart ***************************************************************************************************/ + igviz.drawBarChart = function (mychart, divId, chartConfig, dataTable) { + // console.log(this); + divId = mychart.canvas; + chartConfig = mychart.config; + dataTable = mychart.dataTable; + if (chartConfig.hasOwnProperty("groupedBy")) { + var format = "grouped"; + if (chartConfig.hasOwnProperty("format")) { + format = chartConfig.format; + + } + if (format == "grouped") { + console.log("groupedDFJSDFKSD:JFKDJF"); + if (chartConfig.orientation == 'H') { + console.log('horizontal'); + return this.drawGroupedBarChart(mychart); + + } + return this.drawGroupedBarChartVertical(mychart); + } + else { + return this.drawStackedBarChart(mychart); + } + } + + var xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]); + var yString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]) + + xScaleConfig = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "x", + "zero": false, + "range": "width", + "round": true, + "field": xString + } + + yScaleConfig = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "y", + "range": "height", + "nice": true, + "field": yString + } + + var xScale = setScale(xScaleConfig) + var yScale = setScale(yScaleConfig); + + var xAxisConfig = { + "type": "x", + "scale": "x", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": false, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": 30, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "y", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -35, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + if (chartConfig.barColor == undefined) { + chartConfig.barColor = "steelblue"; + } + +// console.log(table) + var spec = { + + "width": chartConfig.width - 150, + //"padding":{'top':30,"left":80,"right":80,'bottom':60}, + "height": chartConfig.height, + "data": [ + { + "name": "table" + } + ], + "scales": [ + xScale, + yScale + ], + "axes": [ + xAxis, + yAxis + + + ], + "marks": [ + { + "key": xString, + "type": "rect", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "width": {"scale": "x", "band": true, "offset": -10}, + "y": {"scale": "y:prev", "field": yString, "duration": 2000}, + "y2": {"scale": "y", "value": 0} + + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yString}, + "y2": {"scale": "y", "value": 0}, + "fill": {"value": chartConfig.barColor} + }, + "exit": { + "x": {"value": 0}, + "y": {"scale": "y:prev", "field": yString}, + "y2": {"scale": "y", "value": 0} + }, + + "hover": { + + "fill": {'value': 'orange'} + } + + } + } + ] + } + + +// var data = {table: table} + + mychart.originalWidth = chartConfig.width; + mychart.originalHeight = chartConfig.height; + + mychart.spec = spec; + //mychart.data = data; + //mychart.table = table; + ////vg.parse.spec(spec, function (chart) { + // mychart.chart = chart({ + // el: divId, + // renderer: 'svg', + // data: data, + // hover: false + // + // }).update(); + // + // // mychart.chart.data(data).update(); + // //self.counter=0; + // //console.log('abc'); + // //setInterval(updateTable,1500); + // + //}); + }; + + igviz.drawStackedBarChart = function (chartObj) { + + var chartConfig = chartObj.config; + var dataTable = chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId = chartObj.canvas; + + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat = { + "index": chartConfig.groupedBy, + "schema": dataTable.metadata, + "name": "cat", + "range": "width", + "field": groupedBy, + "padding": 0.2 + } + + + val = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "val", + "range": "height", + "dataFrom": "stats", + "field": "sum", + "nice": true + } + + + var cScale = setScale(cat) + var vScale = setScale(val); + + var xAxisConfig = { + "type": "x", + "scale": "cat", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.groupedBy], + "grid": false, + "dx": -10, + "dy": 10, + "align": "right", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "val", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": false, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + + spec = { + "width": chartConfig.width - 160, + "height": chartConfig.height - 100, + "padding": {"top": 10, "left": 60, "bottom": 60, "right": 100}, + "data": [ + { + "name": "table" + }, + { + "name": "stats", + "source": "table", + "transform": [ + {"type": "facet", "keys": [groupedBy]}, + {"type": "stats", "value": yStrings} + ] + } + ], + "scales": [ + cScale, + vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "legends": [ + { + "orient": {"value": "right"}, + "fill": "color", + "title": dataTable.metadata.names[chartConfig.xAxis], + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + "axes": [ + xAxis, yAxis + ], + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [ + {"type": "facet", "keys": [xString]}, + {"type": "stack", "point": groupedBy, "height": yStrings} + ] + }, + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "x": {"scale": "cat", "field": groupedBy}, + "width": {"scale": "cat", "band": true, "offset": -1}, + "y": {"scale": "val", "field": "y"}, + "y2": {"scale": "val", "field": "y2"}, + "fill": {"scale": "color", "field": xString} + }, + "update": { + "fillOpacity": {"value": 1} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + } + } + ] + } + ] + } + + chartObj.legend = true; + chartObj.legendIndex = chartConfig.xAxis; + chartObj.spec = spec; + + } + + igviz.drawGroupedBarChart = function (chartObj) { + var chartConfig = chartObj.config; + var dataTable = chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId = chartObj.canvas; + + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat = { + "index": chartConfig.groupedBy, + "schema": dataTable.metadata, + "name": "cat", + "range": "height", + "field": groupedBy, + "padding": 0.2 + } + + + val = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "val", + "range": "width", + "round": 'true', + "field": yStrings, + "nice": true + } + + + var cScale = setScale(cat) + var vScale = setScale(val); + + var xAxisConfig = { + "type": "x", + "scale": "val", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "right", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "cat", + "angle": 0, + "tickSize": 0, + "tickPadding": 8, + "title": dataTable.metadata.names[chartConfig.groupedBy], + "grid": false, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + + spec = { + "width": chartConfig.width, + "height": chartConfig.height, + + "data": [ + { + "name": "table" + } + ], + "scales": [ + cScale, vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "axes": [ + xAxis, yAxis + ], + "legends": [ + { + "orient": {"value": "right"}, + "fill": "color", + "title": dataTable.metadata.names[chartConfig.xAxis], + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [{"type": "facet", "keys": [groupedBy]}] + }, + "properties": { + "enter": { + "y": {"scale": "cat", "field": "key"}, + "height": {"scale": "cat", "band": true} + } + }, + "scales": [ + { + "name": "pos", + "type": "ordinal", + "range": "height", + "domain": {"field": xString} + } + ], + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "y": {"scale": "pos", "field": xString}, + "height": {"scale": "pos", "band": true}, + "x": {"scale": "val", "field": yStrings}, + "x2": {"scale": "val", "value": 0}, + "fill": {"scale": "color", "field": xString} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + , + + "update": { + "fillOpacity": {"value": 1} + } + } + }, + //{ + // "type": "text", + // "properties": { + // "enter": { + // "y": {"scale": "pos", "field": xString}, + // "dy": {"scale": "pos", "band": true, "mult": 0.5}, + // "x": {"scale": "val", "field": yStrings, "offset": -4}, + // "fill": {"value": "white"}, + // "align": {"value": "right"}, + // "baseline": {"value": "middle"}, + // "text": {"field": xString} + // } + // } + //} + ] + } + ] + } + + chartObj.legend = true; + chartObj.legendIndex = chartConfig.xAxis; + chartObj.spec = spec; + + } + + igviz.drawGroupedBarChartVertical = function (chartObj) { + var chartConfig = chartObj.config; + var dataTable = chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId = chartObj.canvas; + + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + groupedBy = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.groupedBy]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat = { + "index": chartConfig.groupedBy, + "schema": dataTable.metadata, + "name": "cat", + "range": "width", + "field": groupedBy, + "padding": 0.2 + } + + + val = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "val", + "range": "height", + "round": 'true', + "field": yStrings, + "nice": true + } + + + var cScale = setScale(cat) + var vScale = setScale(val); + + var yAxisConfig = { + "type": "y", + "scale": "val", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "right", + "titleDy": 10, + "titleDx": 0 + } + var xAxisConfig = { + "type": "x", + "scale": "cat", + "angle": 0, + "tickSize": 0, + "tickPadding": 8, + "title": dataTable.metadata.names[chartConfig.groupedBy], + "grid": false, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + + spec = { + "width": chartConfig.width - 150, + "height": chartConfig.height, + "data": [ + { + "name": "table" + } + ], + "scales": [ + cScale, vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "axes": [ + xAxis, yAxis + ], + "legends": [ + { + "orient": {"value": "right"}, + "fill": "color", + "title": dataTable.metadata.names[chartConfig.xAxis], + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [{"type": "facet", "keys": [groupedBy]}] + }, + "properties": { + "enter": { + "x": {"scale": "cat", "field": "key"}, + "width": {"scale": "cat", "band": true} + } + }, + "scales": [ + { + "name": "pos", + "type": "ordinal", + "range": "width", + "domain": {"field": xString} + } + ], + "marks": [ + { + "type": "rect", + "properties": { + "enter": { + "x": {"scale": "pos", "field": xString}, + "width": {"scale": "pos", "band": true}, + "y": {"scale": "val", "field": yStrings}, + "y2": {"scale": "val", "value": 0}, + "fill": {"scale": "color", "field": xString} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + , + + "update": { + "fillOpacity": {"value": 1} + } + } + }, + //{ + // "type": "text", + // "properties": { + // "enter": { + // "y": {"scale": "pos", "field": xString}, + // "dy": {"scale": "pos", "band": true, "mult": 0.5}, + // "x": {"scale": "val", "field": yStrings, "offset": -4}, + // "fill": {"value": "white"}, + // "align": {"value": "right"}, + // "baseline": {"value": "middle"}, + // "text": {"field": xString} + // } + // } + //} + ] + } + ] + } + + chartObj.legend = true; + chartObj.legendIndex = chartConfig.xAxis; + chartObj.spec = spec; + + } + + + /*************************************************** Area chart ***************************************************************************************************/ + + igviz.drawAreaChart = function (chartObj) { + // var padding = chartConfig.padding; + var chartConfig = chartObj.config; + var dataTable = chartObj.dataTable; + + if (chartConfig.yAxis.constructor === Array) { + return this.drawMultiAreaChart(chartObj) + } + if (chartConfig.hasOwnProperty("areaVar")) { + return this.drawStackedAreaChart(chartObj); + } + + divId = chartObj.canvas; + + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + // console.log(table,xString,yStrings); + // sortDataSet(table); + + xScaleConfig = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "x", + "zero": false, + "range": "width", + "field": xString + } + + + yScaleConfig = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "y", + "range": "height", + "field": yStrings + } + + + var xScale = setScale(xScaleConfig) + var yScale = setScale(yScaleConfig); + + var xAxisConfig = { + "type": "x", + "scale": "x", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "right", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "y", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + if (chartConfig.interpolationMode == undefined) { + chartConfig.interpolationMode = "monotone" + } + + + var spec = { + "width": chartConfig.width - 100, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':60,"right":40}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale, yScale, + { + "name": "color", "type": "ordinal", "range": "category10" + } + ], + + "axes": [xAxis, yAxis] + , + + "marks": [ + { + "type": "area", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "interpolate": {"value": chartConfig.interpolationMode}, + + "y": {"scale": "y", "field": yStrings}, + "y2": {"scale": "y", "value": 0}, + "fill": {"scale": "color", "value": 2}, + "fillOpacity": {"value": 0.5} + }, + "update": { + "fillOpacity": {"value": 0.5} + + }, + "hover": { + "fillOpacity": {"value": 0.2} + + } + + } + }, + { + "type": "line", + "key": xString, + + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings}, + "stroke": {"scale": "color", "value": 2}, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings} + } + } + }, + { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings}, + "fill": {"scale": "color", "value": 2}, + "size": {"value": 50} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size": {"value": 50} + + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 100}, + "stroke": {"value": "white"} + } + } + } + + ] + } + + chartObj.toolTipFunction = []; + chartObj.toolTipFunction[0] = function (event, item) { + + + console.log(tool, event, item); + if (item.mark.marktype == 'symbol') { + + + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1] = function (event, item) { + + tool.html("").style({'left': event.pageX + 10 + 'px', 'top': event.pageY + 10 + 'px', 'opacity': 0}) + + } + + chartObj.spec = spec; + chartObj.toolTip = true; + chartObj.spec = spec; + + + }; + + igviz.drawMultiAreaChart = function (chartObj) { + + divId = chartObj.canvas; + chartConfig = chartObj.config; + dataTable = chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yStrings = []; + for (i = 0; i < chartConfig.yAxis.length; i++) { + yStrings[i] = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + xScaleConfig = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "x", + "range": "width", + "clamp": false, + "field": xString + } + + yScaleConfig = { + "index": chartConfig.yAxis[0], + "schema": dataTable.metadata, + "name": "y", + "range": "height", + "nice": true, + "field": yStrings[0] + } + + var xScale = setScale(xScaleConfig) + var yScale = setScale(yScaleConfig); + + var xAxisConfig = { + "type": "x", + "scale": "x", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "left", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "y", + "angle": 0, + "title": "values", + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + + if (chartConfig.interpolationMode == undefined) { + chartConfig.interpolationMode = "monotone"; + } + + + var spec = { + "width": chartConfig.width - 160, + "height": chartConfig.height, + // "padding":{"top":40,"bottom":60,'left':60,"right":145}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale, yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + } + ], + "legends": [ + { + + "orient": "right", + "fill": "color", + "title": "Area", + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 1.5} + + } + } + } + ], + "axes": [xAxis, yAxis] + , + + "marks": [] + } + + for (i = 0; i < chartConfig.yAxis.length; i++) { + areaObj = { + "type": "area", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y", "field": yStrings[i]}, + "y2": {"scale": "y", "value": 0}, + "fill": {"scale": "color", "value": dataTable.metadata.names[chartConfig.yAxis[i]]}, + "fillOpacity": {"value": 0.5} + }, + "update": { + "fillOpacity": {"value": 0.5} + + }, + "hover": { + "fillOpacity": {"value": 0.2} + } + + } + } + + lineObj = { + "type": "line", + "key": xString, + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"value": 400}, + "interpolate": {"value": chartConfig.interpolationMode}, + "y": {"scale": "y:prev", "field": yStrings[i]}, + "stroke": {"scale": "color", "value": dataTable.metadata.names[chartConfig.yAxis[i]]}, + "strokeWidth": {"value": 1.5} + }, + "update": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]} + }, + "exit": { + "x": {"value": -20}, + "y": {"scale": "y", "field": yStrings[i]} + } + } + } + + + pointObj = { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yStrings[i]}, + "fill": {"scale": "color", "value": dataTable.metadata.names[chartConfig.yAxis[i]]}, + "size": {"value": 50} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size": {"value": 50} + //"size": {"scale":"r","field":rString}, + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 100}, + "stroke": {"value": "white"} + } + } + } + + + spec.marks.push(areaObj); + + spec.marks.push(pointObj); + spec.marks.push(lineObj); + spec.legends[0].values.push(dataTable.metadata.names[chartConfig.yAxis[i]]) + + } + + + chartObj.toolTipFunction = []; + chartObj.toolTipFunction[0] = function (event, item) { + + a = 4 + + console.log(tool, event, item); + if (item.mark.marktype == 'symbol') { + // window.alert(a); + + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr></table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + } + } + + chartObj.toolTipFunction[1] = function (event, item) { + + tool.html("").style({'left': event.pageX + 10 + 'px', 'top': event.pageY + 10 + 'px', 'opacity': 0}) + + } + + chartObj.spec = spec; + chartObj.toolTip = true; + chartObj.spec = spec; + + chartObj.spec = spec; + + + }; + + igviz.drawStackedAreaChart = function (chartObj) { + + var chartConfig = chartObj.config; + var dataTable = chartObj.dataTable; + // var table = setData(dataTable,chartConfig); + divId = chartObj.canvas; + + + areaString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.areaVar]) + yStrings = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]); + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]); + + // console.log(table,xString,yStrings,groupedBy); + // sortDataSet(table); + + cat = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "cat", + "range": "width", + "field": xString, + "padding": 0.2, + "zero": false, + "nice": true + } + + + val = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "val", + "range": "height", + "dataFrom": "stats", + "field": "sum", + "nice": true + } + + + var cScale = setScale(cat) + var vScale = setScale(val); + + var xAxisConfig = { + "type": "x", + "scale": "cat", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": true, + "dx": -10, + "dy": 10, + "align": "left", + "titleDy": 10, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "val", + "angle": 0, + "title": dataTable.metadata.names[chartConfig.yAxis], + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -10, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + + spec = { + "width": chartConfig.width - 160, + "height": chartConfig.height - 100, + "padding": {"top": 10, "left": 60, "bottom": 60, "right": 100}, + "data": [ + { + "name": "table" + }, + { + "name": "stats", + "source": "table", + "transform": [ + {"type": "facet", "keys": [xString]}, + {"type": "stats", "value": yStrings} + ] + } + ], + "scales": [ + cScale, + vScale, + { + "name": "color", + "type": "ordinal", + "range": "category20" + } + ], + "legends": [ + { + "orient": {"value": "right"}, + "fill": "color", + "title": dataTable.metadata.names[chartConfig.areaVar + ], + "values": [], + "properties": { + "title": { + "fontSize": {"value": 14} + }, + "labels": { + "fontSize": {"value": 12} + }, + "symbols": { + "stroke": {"value": "transparent"} + }, + "legend": { + "stroke": {"value": "steelblue"}, + "strokeWidth": {"value": 0.5} + + + } + } + } + ], + + "axes": [ + xAxis, yAxis + ], + "marks": [ + { + "type": "group", + "from": { + "data": "table", + "transform": [ + {"type": "facet", "keys": [areaString]}, + {"type": "stack", "point": xString, "height": yStrings} + ] + }, + "marks": [ + { + "type": "area", + "properties": { + "enter": { + "interpolate": {"value": "monotone"}, + "x": {"scale": "cat", "field": xString}, + "y": {"scale": "val", "field": "y"}, + "y2": {"scale": "val", "field": "y2"}, + "fill": {"scale": "color", "field": areaString}, + "fillOpacity": {"value": 0.8} + + }, + "update": { + "fillOpacity": {"value": 0.8} + }, + "hover": { + "fillOpacity": {"value": 0.5} + } + } + }, + { + "type": "line", + "properties": { + "enter": { + "x": {"scale": "cat", "field": xString}, + //"x": {"value": 400}, + "interpolate": {"value": "monotone"}, + "y": {"scale": "val", "field": "y"}, + "stroke": {"scale": "color", "field": areaString}, + "strokeWidth": {"value": 3} + } + } + } + ] + } + ] + } + + chartObj.spec = spec; + chartObj.legend = true; + chartObj.legendIndex = chartConfig.areaVar; + + + } + + + /*************************************************** Arc chart ***************************************************************************************************/ + + + igviz.drawArc = function (divId, chartConfig, dataTable) { + + radialProgress(divId) + .label(dataTable.metadata.names[chartConfig.percentage]) + .diameter(200) + .value(dataTable.data[0][chartConfig.percentage]) + .render(); + + + function radialProgress(parent) { + var _data = null, + _duration = 1000, + _selection, + _margin = { + top: 0, + right: 0, + bottom: 30, + left: 0 + }, + __width = chartConfig.width, + __height = chartConfig.height, + _diameter, + _label = "", + _fontSize = 10; + + + var _mouseClick; + + var _value = 0, + _minValue = 0, + _maxValue = 100; + + var _currentArc = 0, + _currentArc2 = 0, + _currentValue = 0; + + var _arc = d3.svg.arc() + .startAngle(0 * (Math.PI / 180)); //just radians + + var _arc2 = d3.svg.arc() + .startAngle(0 * (Math.PI / 180)) + .endAngle(0); //just radians + + + _selection = d3.select(parent); + + + function component() { + + _selection.each(function (data) { + + // Select the svg element, if it exists. + var svg = d3.select(this).selectAll("svg").data([data]); + + var enter = svg.enter().append("svg").attr("class", "radial-svg").append("g"); + + measure(); + + svg.attr("width", __width) + .attr("height", __height); + + + var background = enter.append("g").attr("class", "component") + .attr("cursor", "pointer") + .on("click", onMouseClick); + + + _arc.endAngle(360 * (Math.PI / 180)) + + background.append("rect") + .attr("class", "background") + .attr("width", _width) + .attr("height", _height); + + background.append("path") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc); + + background.append("text") + .attr("class", "label") + .attr("transform", "translate(" + _width / 2 + "," + (_width + _fontSize) + ")") + .text(_label); + + //outer g element that wraps all other elements + var gx = chartConfig.width / 2 - _width / 2; + var gy = (chartConfig.height / 2 - _height / 2) - 17; + var g = svg.select("g") + .attr("transform", "translate(" + gx + "," + gy + ")"); + + + _arc.endAngle(_currentArc); + enter.append("g").attr("class", "arcs"); + var path = svg.select(".arcs").selectAll(".arc").data(data); + path.enter().append("path") + .attr("class", "arc") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc); + + //Another path in case we exceed 100% + var path2 = svg.select(".arcs").selectAll(".arc2").data(data); + path2.enter().append("path") + .attr("class", "arc2") + .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")") + .attr("d", _arc2); + + + enter.append("g").attr("class", "labels"); + var label = svg.select(".labels").selectAll(".labelArc").data(data); + label.enter().append("text") + .attr("class", "labelArc") + .attr("y", _width / 2 + _fontSize / 3) + .attr("x", _width / 2) + .attr("cursor", "pointer") + .attr("width", _width) + // .attr("x",(3*_fontSize/2)) + .text(function (d) { + return Math.round((_value - _minValue) / (_maxValue - _minValue) * 100) + "%" + }) + .style("font-size", _fontSize + "px") + .on("click", onMouseClick); + + path.exit().transition().duration(500).attr("x", 1000).remove(); + + + layout(svg); + + function layout(svg) { + + var ratio = (_value - _minValue) / (_maxValue - _minValue); + var endAngle = Math.min(360 * ratio, 360); + endAngle = endAngle * Math.PI / 180; + + path.datum(endAngle); + path.transition().duration(_duration) + .attrTween("d", arcTween); + + if (ratio > 1) { + path2.datum(Math.min(360 * (ratio - 1), 360) * Math.PI / 180); + path2.transition().delay(_duration).duration(_duration) + .attrTween("d", arcTween2); + } + + label.datum(Math.round(ratio * 100)); + label.transition().duration(_duration) + .tween("text", labelTween); + + } + + }); + + function onMouseClick(d) { + if (typeof _mouseClick == "function") { + _mouseClick.call(); + } + } + } + + function labelTween(a) { + var i = d3.interpolate(_currentValue, a); + _currentValue = i(0); + + return function (t) { + _currentValue = i(t); + this.textContent = Math.round(i(t)) + "%"; + } + } + + function arcTween(a) { + var i = d3.interpolate(_currentArc, a); + + return function (t) { + _currentArc = i(t); + return _arc.endAngle(i(t))(); + }; + } + + function arcTween2(a) { + var i = d3.interpolate(_currentArc2, a); + + return function (t) { + return _arc2.endAngle(i(t))(); + }; + } + + + function measure() { + _width = _diameter - _margin.right - _margin.left - _margin.top - _margin.bottom; + _height = _width; + _fontSize = _width * .2; + _arc.outerRadius(_width / 2); + _arc.innerRadius(_width / 2 * .85); + _arc2.outerRadius(_width / 2 * .85); + _arc2.innerRadius(_width / 2 * .85 - (_width / 2 * .15)); + } + + + component.render = function () { + measure(); + component(); + return component; + } + + component.value = function (_) { + if (!arguments.length) return _value; + _value = [_]; + _selection.datum([_value]); + return component; + } + + + component.margin = function (_) { + if (!arguments.length) return _margin; + _margin = _; + return component; + }; + + component.diameter = function (_) { + if (!arguments.length) return _diameter + _diameter = _; + return component; + }; + + component.minValue = function (_) { + if (!arguments.length) return _minValue; + _minValue = _; + return component; + }; + + component.maxValue = function (_) { + if (!arguments.length) return _maxValue; + _maxValue = _; + return component; + }; + + component.label = function (_) { + if (!arguments.length) return _label; + _label = _; + return component; + }; + + component._duration = function (_) { + if (!arguments.length) return _duration; + _duration = _; + return component; + } + + component.onClick = function (_) { + if (!arguments.length) return _mouseClick; + _mouseClick = _; + return component; + } + + return component; + + }; + + }; + + + /*************************************************** Scatter chart ***************************************************************************************************/ + + igviz.drawScatterPlot = function (chartObj) { + divId = chartObj.canvas; + chartConfig = chartObj.config; + dataTable = chartObj.dataTable; + // table=setData(dataTable,chartConfig) + + xString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.xAxis]) + yString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.yAxis]) + rString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.pointSize]) + cString = "data." + createAttributeNames(dataTable.metadata.names[chartConfig.pointColor]) + + + xScaleConfig = { + "index": chartConfig.xAxis, + "schema": dataTable.metadata, + "name": "x", + "range": "width", + "zero": false, + "field": xString + + } + + rScaleConfig = { + "index": chartConfig.pointSize, + "range": [0, 576], + "schema": dataTable.metadata, + "name": "r", + "field": rString + } + cScaleConfig = { + "index": chartConfig.pointColor, + "schema": dataTable.metadata, + "name": "c", + "range": [chartConfig.minColor, chartConfig.maxColor], + "field": cString + } + + yScaleConfig = { + "index": chartConfig.yAxis, + "schema": dataTable.metadata, + "name": "y", + "range": "height", + "nice": true, + "field": yString + } + + var xScale = setScale(xScaleConfig) + var yScale = setScale(yScaleConfig); + var rScale = setScale(rScaleConfig); + var cScale = setScale(cScaleConfig) + + var xAxisConfig = { + "type": "x", + "scale": "x", + "angle": -35, + "title": dataTable.metadata.names[chartConfig.xAxis], + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": 25, + "titleDx": 0 + } + var yAxisConfig = { + "type": "y", + "scale": "y", + "angle": 0, + "title": "values", + "grid": true, + "dx": 0, + "dy": 0, + "align": "right", + "titleDy": -30, + "titleDx": 0 + } + var xAxis = setAxis(xAxisConfig); + var yAxis = setAxis(yAxisConfig); + + var spec = { + "width": chartConfig.width - 130, + "height": chartConfig.height, + //"padding":{"top":40,"bottom":60,'left':60,"right":60}, + "data": [ + { + "name": "table" + + } + ], + "scales": [ + xScale, yScale, + { + "name": "color", "type": "ordinal", "range": "category20" + }, + rScale, cScale + ], + "axes": [xAxis, yAxis + ], + //"legends": [ + // { + // + // "orient": "right", + // "fill": "color", + // "title": "Legend", + // "values": [], + // "properties": { + // "title": { + // "fontSize": {"value": 14} + // }, + // "labels": { + // "fontSize": {"value": 12} + // }, + // "symbols": { + // "stroke": {"value": "transparent"} + // }, + // "legend": { + // "stroke": {"value": "steelblue"}, + // "strokeWidth": {"value": 1.5} + // + // } + // } + // }], + + + // "scales": [ + // { + // "name": "x", + // "nice": true, + // "range": "width", + // "domain": {"data": "iris", "field": "data.sepalWidth"} + // }, + // { + // "name": "y", + // "nice": true, + // "range": "height", + // "domain": {"data": "iris", "field": "data.petalLength"} + // }, + // { + // "name": "c", + // "type": "ordinal", + // "domain": {"data": "iris", "field": "data.species"}, + // "range": ["#800", "#080", "#008"] + // } + //], + // "axes": [ + // {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"}, + // {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"} + //], + // "legends": [ + // { + // "fill": "c", + // "title": "Species", + // "offset": 0, + // "properties": { + // "symbols": { + // "fillOpacity": {"value": 0.5}, + // "stroke": {"value": "transparent"} + // } + // } + // } + //], + "marks": [ + { + "type": "symbol", + "from": {"data": "table"}, + "properties": { + "enter": { + "x": {"scale": "x", "field": xString}, + "y": {"scale": "y", "field": yString}, + "fill": {"scale": "c", "field": cString} + //"fillOpacity": {"value": 0.5} + }, + "update": { + "size": {"scale": "r", "field": rString} + // "stroke": {"value": "transparent"} + }, + "hover": { + "size": {"value": 300}, + "stroke": {"value": "white"} + } + } + } + ] + } + chartObj.toolTipFunction = []; + chartObj.toolTipFunction[0] = function (event, item) { + console.log(tool, event, item); + xVar = dataTable.metadata.names[chartConfig.xAxis] + yVar = dataTable.metadata.names[chartConfig.yAxis] + pSize = dataTable.metadata.names[chartConfig.pointSize] + pColor = dataTable.metadata.names[chartConfig.pointColor] + + contentString = '<table><tr><td> X </td><td> (' + xVar + ') </td><td>' + item.datum.data[xVar] + '</td></tr>' + '<tr><td> Y </td><td> (' + yVar + ') </td><td>' + item.datum.data[yVar] + '</td></tr>' + '<tr><td> Size </td><td> (' + pSize + ') </td><td>' + item.datum.data[pSize] + '</td></tr>' + '<tr><td bgcolor="' + item.fill + '"> </td><td> (' + pColor + ') </td><td>' + item.datum.data[pColor] + '</td></tr>' + + '</table>'; + + + tool.html(contentString).style({ + 'left': event.pageX + 10 + 'px', + 'top': event.pageY + 10 + 'px', + 'opacity': 1 + }) + tool.selectAll('tr td').style('padding', "3px"); + + } + + chartObj.toolTipFunction[1] = function (event, item) { + + tool.html("").style({'left': event.pageX + 10 + 'px', 'top': event.pageY + 10 + 'px', 'opacity': 0}) + + } + + chartObj.spec = spec; + chartObj.toolTip = true; + } + + + /*************************************************** Single Number chart ***************************************************************************************************/ + + igviz.drawSingleNumberDiagram = function (chartObj) { + + divId = chartObj.canvas; + chartConfig = chartObj.config; + dataTable = chartObj.dataTable; + + //Width and height + var w = chartConfig.width; + var h = chartConfig.height; + var padding = chartConfig.padding; + + var svgID = divId + "_svg"; + //Remove current SVG if it is already there + d3.select(svgID).remove(); + + //Create SVG element + singleNumSvg = d3.select(divId) + .append("svg") + .attr("id", svgID.replace("#", "")) + .attr("width", w) + .attr("height", h); + + + singleNumSvg.append("rect") + .attr("id", "rect") + .attr("width", w) + .attr("height", h); + + /*singleNumCurveSvg = d3.select(divId) + .append("svg") + .attr("id", svgID.replace("#","")) + .attr("width", 207) + .attr("height", 161);*/ + + }; + + + /*************************************************** Table chart ***************************************************************************************************/ + + var cnt = 0; + + igviz.drawTable = function (divId, chartConfig, dataTable) { + + //remove the current table if it is already exist + d3.select(divId).select("table").remove(); + + var rowLabel = dataTable.metadata.names; + + //append the Table to the div + var table = d3.select(divId).append("table").attr('class', 'table table-bordered'); + + //create the table head + thead = table.append("thead"); + tbody = table.append("tbody") + + //Append the header to the table + thead.append("tr") + .selectAll("th") + .data(rowLabel) + .enter() + .append("th") + .text(function (d) { + return d; + }); + }; + + /*************************************************** map ***************************************************************************************************/ + function loadWorldMapCodes() { + var fileName = document.location.protocol + "//" + document.location.host + '/portal/geojson/countryInfo/'; + $.ajaxSetup({async: false}); + $.getJSON(fileName, function (json) { + worldMapCodes = json; + }); + $.ajaxSetup({async: true}); + } + + function loadUSAMapCodes() { + var fileName = document.location.protocol + "//" + document.location.host + '/portal/geojson/usaInfo/'; + $.ajaxSetup({async: false}); + $.getJSON(fileName, function (json) { + usaMapCodes = json; + }); + $.ajaxSetup({async: true}); + } + + function getMapCode(name, region) { + if (region == "usa") { + $.each(usaMapCodes, function (i, location) { + if (usaMapCodes[name] != null && usaMapCodes[name] != "") { + name = "US" + usaMapCodes[name]; + } + }); + + } else { + $.each(worldMapCodes, function (i, location) { + if (name.toUpperCase() == location["name"].toUpperCase()) { + name = location["alpha-3"]; + } + }); + } + return name; + }; + + igviz.drawMap = function (divId, chartConfig, dataTable) { + + var fileName; + var width = chartConfig.width; + var height = chartConfig.height; + var xAxis = chartConfig.xAxis; + var yAxis = chartConfig.yAxis; + + if (chartConfig.region == "usa") { + fileName = document.location.protocol + "//" + document.location.host + '/portal/geojson/usa/'; + loadUSAMapCodes(); + mapChart = d3.geomap.choropleth() + .geofile(fileName) + .projection(d3.geo.albersUsa) + .unitId(xAxis) + .width(width) + .height(height) + .colors(colorbrewer.RdPu[chartConfig.legendGradientLevel]) + .column(yAxis) + .scale([width / 1.1]) + .translate([width / 2, height / 2.2]) + .legend(true); + + + } else { + fileName = document.location.protocol + "//" + document.location.host + '/portal/geojson/world/'; + + var scaleDivision = 5.5; + var widthDivision = 2; + var heightDivision = 2; + + if (chartConfig.region == "europe") { + + scaleDivision = width / height; + widthDivision = 3; + heightDivision = 0.8; + + } + loadWorldMapCodes(); + mapChart = d3.geomap.choropleth() + .geofile(fileName) + .unitId(xAxis) + .width(width) + .height(height) + .colors(colorbrewer.RdPu[chartConfig.legendGradientLevel]) + .column(yAxis) + .scale([width / scaleDivision]) + .translate([width / widthDivision, height / heightDivision]) + .legend(true); + } + }; + + + /*************************************************** Bar chart Drill Dowining Function ***************************************************************************************************/ + + igviz.drillDown = function drillDown(index, divId, chartConfig, dataTable, originaltable) { + // console.log(dataTable,chartConfig,divId); + if (index == 0) { + d3.select(divId).append('div').attr({id: 'links', height: 20, 'bgcolor': 'blue'}) + d3.select(divId).append('div').attr({id: 'chartDiv'}) + chartConfig.height = chartConfig.height - 20; + divId = "#chartDiv"; + } + var currentChartConfig = JSON.parse(JSON.stringify(chartConfig)); + var current_x = 0; + if (index < chartConfig.xAxis.length) + current_x = chartConfig.xAxis[index].index + else + current_x = chartConfig.xAxis[index - 1].child; + + var current_y = chartConfig.yAxis; + var currentData = { + metadata: { + names: [dataTable.metadata.names[current_x], dataTable.metadata.names[current_y]], + types: [dataTable.metadata.types[current_x], dataTable.metadata.types[current_y]] + }, + data: [] + } + + var tempData = []; + for (i = 0; i < dataTable.data.length; i++) { + name = dataTable.data[i][current_x]; + currentYvalue = dataTable.data[i][current_y]; + isFound = false; + var j = 0; + for (; j < tempData.length; j++) { + if (tempData[j][0] === name) { + isFound = true; + break; + } + } + if (isFound) { + tempData[j][1] += currentYvalue; + console.log(name, currentYvalue, tempData[j][1]); + } else { + console.log("create", name, currentYvalue); + tempData.push([name, currentYvalue]) + } + } + + currentData.data = tempData; + currentChartConfig.xAxis = 0; + currentChartConfig.yAxis = 1; + currentChartConfig.chartType = 'bar'; + + + var x = this.setUp(divId, currentChartConfig, currentData); + x.plot(currentData.data, function () { + + var filters = d3.select('#links .root').on('click', function () { + d3.select("#links").html(''); + igviz.drillDown(0, divId, chartConfig, originaltable, originaltable); + + }) + + + var filters = d3.select('#links').selectAll('.filter'); + filters.on('click', function (d, i) { + + filtersList = filters.data(); + + console.log(filtersList) + var filterdDataset = []; + var selectionObj = JSON.parse(JSON.stringify(originaltable)); + itr = 0; + for (l = 0; l < originaltable.data.length; l++) { + isFiltered = true; + for (k = 0; k <= i; k++) { + + if (originaltable.data[l][filtersList[k][0]] !== filtersList[k][1]) { + isFiltered = false; + break; + } + } + if (isFiltered) { + filterdDataset[itr++] = originaltable.data[l]; + } + + } + + d3.selectAll('#links g').each(function (d, indx) { + if (indx > i) { + this.remove(); + } + }) + + + selectionObj.data = filterdDataset; + + igviz.drillDown(i + 1, divId, chartConfig, selectionObj, originaltable, true); + + + }); + + + if (index < chartConfig.xAxis.length) { + console.log(x); + d3.select(x.chart._el).selectAll('g.type-rect rect').on('click', function (d, i) { + // console.log(d, i, this); + console.log(d, i); + var selectedName = d.datum.data[x.dataTable.metadata.names[x.config.xAxis]]; + // console.log(selectedName); + var selectedCurrentData = JSON.parse(JSON.stringify(dataTable)); + var innerText; + + var links = d3.select('#links').append('g').append('text').text(dataTable.metadata.names[current_x] + " : ").attr({ + + "font-size": "10px", + "x": 10, + "y": 20 + + }); + + d3.select('#links:first-child').selectAll('text').attr('class', 'root'); + + d3.select('#links g:last-child').append('span').data([[current_x, selectedName]]).attr('class', 'filter').text(selectedName + " > ") + + var l = selectedCurrentData.data.length; + var newdata = []; + b = 0; + for (a = 0; a < l; a++) { + if (selectedCurrentData.data[a][current_x] === selectedName) { + newdata[b++] = selectedCurrentData.data[a]; + } + } + + + selectedCurrentData.data = newdata; + + + igviz.drillDown(index + 1, divId, chartConfig, selectedCurrentData, originaltable, true); + + + }); + + } + }); + + + } + + + /*************************************************** Specification Generation method ***************************************************************************************************/ + + + function setScale(scaleConfig) { + var scale = {"name": scaleConfig.name}; + + console.log(scaleConfig.schema, scaleConfig.index); + + dataFrom = "table"; + + scale.range = scaleConfig.range; + + + switch (scaleConfig.schema.types[scaleConfig.index]) { + case 'T': + scale["type"] = 'time' + + break; + + case 'C': + scale["type"] = 'ordinal' + if (scale.name === "c") { + scale.range = "category20"; + } + + break; + case 'N': + scale["type"] = 'linear' + + break; + } + if (scaleConfig.hasOwnProperty("dataFrom")) { + dataFrom = scaleConfig.dataFrom; + } + + scale.range = scaleConfig.range; + scale.domain = {"data": dataFrom, "field": scaleConfig.field} + + //optional attributes + if (scaleConfig.hasOwnProperty("round")) { + scale["round"] = scaleConfig.round; + } + + if (scaleConfig.hasOwnProperty("nice")) { + scale["nice"] = scaleConfig.nice; + } + + if (scaleConfig.hasOwnProperty("padding")) { + scale["padding"] = scaleConfig.padding; + } + + if (scaleConfig.hasOwnProperty("reverse")) { + scale["reverse"] = scaleConfig.reverse; + } + + if (scaleConfig.hasOwnProperty("sort")) { + scale["sort"] = scaleConfig.sort; + } + + if (scale.name == 'x' && scale.type == 'linear') { + scale.sort = true; + } + if (scaleConfig.hasOwnProperty("clamp")) { + scale["clamp"] = scaleConfig.clamp; + } + + + if (scaleConfig.hasOwnProperty("zero")) { + scale["zero"] = scaleConfig.zero; + } + console.log(scale); + return scale; + + } + + function setAxis(axisConfig) { + + console.log("Axis", axisConfig); + + axis = { + "type": axisConfig.type, + "scale": axisConfig.scale, + 'title': axisConfig.title, + "grid": axisConfig.grid, + + "properties": { + "ticks": { + // "stroke": {"value": "steelblue"} + }, + "majorTicks": { + "strokeWidth": {"value": 2} + }, + "labels": { + // "fill": {"value": "steelblue"}, + "angle": {"value": axisConfig.angle}, + // "fontSize": {"value": 14}, + "align": {"value": axisConfig.align}, + "baseline": {"value": "middle"}, + "dx": {"value": axisConfig.dx}, + "dy": {"value": axisConfig.dy} + }, + "title": { + "fontSize": {"value": 16}, + + "dx": {'value': axisConfig.titleDx}, + "dy": {'value': axisConfig.titleDy} + }, + "axis": { + "stroke": {"value": "#333"}, + "strokeWidth": {"value": 1.5} + } + + } + + } + + if (axisConfig.hasOwnProperty("tickSize")) { + axis["tickSize"] = axisConfig.tickSize; + } + + + if (axisConfig.hasOwnProperty("tickPadding")) { + axis["tickPadding"] = axisConfig.tickPadding; + } + + console.log("SpecAxis", axis); + return axis; + } + + function setLegends(chartConfig, schema) { + + } + + function setData(dataTableObj, chartConfig, schema) { + + var table = []; + for (i = 0; i < dataTableObj.length; i++) { + var ptObj = {}; + namesArray = schema.names; + for (j = 0; j < namesArray.length; j++) { + if (schema.types[j] == 'T') { + ptObj[createAttributeNames(namesArray[j])] = new Date(dataTableObj[i][j]); + } else + ptObj[createAttributeNames(namesArray[j])] = dataTableObj[i][j]; + } + + table[i] = ptObj; + } + + return table; + } + + function createAttributeNames(str) { + return str.replace(' ', '_'); + } + + function setGenericAxis(axisConfig, spec) { + MappingObj = {}; + MappingObj["tickSize"] = "tickSize"; + MappingObj["tickPadding"] = "tickPadding"; + MappingObj["title"] = "title"; + MappingObj["grid"] = "grid"; + MappingObj["offset"] = "offset"; + MappingObj["ticks"] = "ticks"; + + MappingObj["labelColor"] = "fill"; + MappingObj["labelAngle"] = "angle"; + MappingObj["labelAlign"] = "align"; + MappingObj["labelFontSize"] = "fontSize"; + MappingObj["labelDx"] = "dx"; + MappingObj["labelDy"] = "dy"; + MappingObj["labelBaseLine"] = "baseline"; + + MappingObj["titleDx"] = "dx"; + MappingObj["titleDy"] = "dy"; + MappingObj["titleFontSize"] = "fontSize"; + + MappingObj["axisColor"] = "stroke"; + MappingObj["axisWidth"] = "strokeWidth"; + + MappingObj["tickColor"] = "ticks.stroke"; + MappingObj["tickWidth"] = "ticks.strokeWidth"; + + + console.log("previous Axis", spec) + for (var propt in axisConfig) { + + if (propt == "tickSize" || propt == "tickPadding") + continue; + + if (axisConfig.hasOwnProperty(propt)) { + + if (propt.indexOf("label") == 0) + spec.properties.labels[MappingObj[propt]].value = axisConfig[propt]; + else if (propt.indexOf("ticks") == 0) + spec.properties.ticks[MappingObj[propt]].value = axisConfig[propt]; + else if (propt.indexOf("title") == 0) + spec.properties.title[MappingObj[propt]].value = axisConfig[propt]; + else if (propt.indexOf("axis") == 0) + spec.properties.axis[MappingObj[propt]].value = axisConfig[propt]; + else + spec[MappingObj[propt]] = axisConfig[propt]; + } + } + + console.log("NEW SPEC", spec); + } + + function createScales(dataset, chartConfig, dataTable) { + //Create scale functions + + var xScale; + var yScale; + var colorScale; + if (dataTable.metadata.types[chartConfig.xAxis] == 'N') { + xScale = d3.scale.linear() + .domain
<TRUNCATED>
