You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@stratos.apache.org by ra...@apache.org on 2015/11/03 09:23:11 UTC
[05/56] [abbrv] stratos git commit: Adding monitoring dashboard
artifacts
http://git-wip-us.apache.org/repos/asf/stratos/blob/252705b7/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js
----------------------------------------------------------------------
diff --git a/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js b/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js
new file mode 100644
index 0000000..1c182d9
--- /dev/null
+++ b/extensions/das/modules/artifacts/monitoring-dashboard/capps/stratos-monitoring-service/GadgetScalingDetails/Scaling_Details/js/igviz.js
@@ -0,0 +1,3408 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+(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]])
+
+ }
+
+ //When there are multiple values for Y axis, it cannot started by minimum value
+ var zeroConfig = false;
+ if (yStrings.length > 1) {
+ zeroConfig = true;
+ }
+
+ xScaleConfig={
+ "index":chartConfig.xAxis,
+ "schema":dataTable.metadata,
+ "name": "x",
+ "range": "width",
+ "zero": false,
+ "clamp":false,
+ "field": xString
+ }
+
+ yScaleConfig= {
+ "index":chartConfig.yAxis[0],
+ "schema":dataTable.metadata,
+ "name": "y",
+ "range": "height",
+ "zero": zeroConfig,
+ "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":"right","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':90,"right":150},
+ "data": [
+ {
+ "name": "table"
+
+ }
+ ],
+ "scales": [
+ xScale,yScale,
+ {
+ "name": "color", "type": "ordinal", "range": "category20"
+ }
+ ],
+ "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}
+
+ }
+ }
+ }
+ ],
+
+ "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",
+ "zero": true,
+ "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",
+ "zero": true,
+ "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",
+ "zero": true,
+ "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",
+ "zero": false,
+ "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 if (schema.types[j]=='N'){
+ ptObj[createAttributeNames(namesArray[j])] = parseFloat(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([0, d3.max(dataset, function (d) {
+ return d.data[d.config.xAxis];
+ })])
+ .range([chartConfig.padding, chartConfig.width - chartConfig.padding]);
+ } else {
+ xScale = d3.scale.ordinal()
+ .domain(dataset.map(function (d) {
+ return d.data[chartConfig.xAxis];
+ }))
+ .rangeRoundBands([chartConfig.padding, chartConfig.width - chartConfig.padding], .1)
+ }
+
+ //TODO hanle case r and color are missing
+
+ if (dataTable.metadata.types[chartConfig.yAxis] == 'N') {
+ yScale = d3.scale.linear()
+ .domain([0, d3.max(dataset, function (d) {
+ return d.data[d.config.yAxis];
+ })])
+ .range([chartConfig.height - chartConfig.padding, chartConfig.padding]);
+ //var yScale = d3.scale.linear()
+ // .range([height, 0])
+ // .domain([0, d3.max(dataset, function(d) { return d.data[d.config.yAxis]; })])
+ } else {
+ yScale = d3.scale.ordinal()
+ .rangeRoundBands([0, chartConfig.width], .1)
+ .domain(dataset.map(function (d) {
+ return d.data[chartConfig.yAxis];
+ }))
+ }
+
+
+ //this is used to scale the size of the point, it will value between 0-20
+ var rScale = d3.scale.linear()
+ .domain([0, d3.max(dataset, function (d) {
+ return d.config.pointSize ? d.data[d.config.pointSize] : 20;
+ })])
+ .range([0, 20]);
+
+ //TODO have to handle the case color scale is categorical : Done
+ //http://synthesis.sbecker.net/articles/2012/07/16/learning-d3-part-6-scales-colors
+ // add color to circles see https://www.dashingd3js.com/svg-basic-shapes-and-d3js
+ //add legend http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend
+ if (dataTable.metadata.types[chartConfig.pointColor] == 'N') {
+ colorScale = d3.scale.linear()
+ .domain([-1, d3.max(dataset, function (d) {
+ return d.config.pointColor ? d.data[d.config.pointColor] : 20;
+ })])
+ .range([chartConfig.minColor, chartConfig.maxColor]);
+ } else {
+ colorScale = d3.scale.category20c();
+ }
+
+ //TODO add legend
+
+
+ return {
+ "xScale": xScale,
+ "yScale": yScale,
+ "rScale": rScale,
+ "colorScale": colorScale
+ }
+ }
+
+
+
+ /*************************************************** Util functions ***************************************************************************************************/
+
+
+ /**
+ * Get the average of a numeric array
+ * @param data
+ * @returns average
+ */
+ function getAvg(data) {
+
+ var sum = 0;
+
+ for (v
<TRUNCATED>