graph-chart.js

/*
 * Copyright (C) Zoomdata, Inc. 2012-2016. All rights reserved.
 */
/* global controller */

//Works with Grouped variables (remove if using UnGrouped)
controller.createAxisLabel({
    picks: 'Multi Group By', // Variable Name
    orientation: 'horizontal',
    position: 'bottom',
    popoverTitle: 'Group'
});


var chartContainer = d3.select(controller.element)
   .append('div')
   .attr('class', 'chart-container')
   .style('width', '100%')
   .style('height', '100%')
   .node();

var textbox = d3.select(controller.element)
   .append('input')
   .attr("align","center") 
   .attr('class', 'chart-container')
   .attr('id', 'identifier1')
   .style('width', '100px')
   .style('height', '20px')
   .node();
   
var button = d3.select(controller.element)
    .append('button')
    .attr('class', 'chart-container')
    .attr('id', 'identifier2')
    .style('width', '35px')
    .style('height', '26px')
    //.on("click", console.log(document.getElementById("identifier1").value))
    .text("Go")
    .node();

// Instantiate the chart in the chart container

var chart = echarts.init(chartContainer);

//console.log(controller.element);
var text = "asdoif73jfdihg";
document.getElementById("identifier2").onclick = on_click; 
    
    //var click = document.getElementById("identifier2").value;
    //
    //console.log("click: "+button);
    if(text.endsWith(",")){
        text = text.substring(0,text.length-1);
        controller.update;
    }

controller.update = function(data, progress) {
    //console.log(data);
    /*document.getElementById("identifier2").onclick = on_click; 
    
    //var click = document.getElementById("identifier2").value;
    //
    //console.log("click: "+button);
    if(text.endsWith(",")){
        text = text.substring(0,text.length-1);
        controller.update;
    }*/
    text = text.replace(/\s/g, '');
    //console.log(text);
    var textArr = text.split(',');
    var i = 0;
    var nodosTotales =[];
    var uniqueNodes = [];
    var uniqueArray =[];
    var links = [];
    var linksTotales = [];
    var uniqueLinks =[];
    var uniqueLinksArray =[];
    data.forEach(function(item){
        var fields = controller.dataAccessors['Multi Group By'].raw(item);
        
        if(fields[0]!==null&&fields[1]!==null&&!fields[1].includes("brightmail")){
            var origin = fields[0];
            var destination = fields[1];
            nodosTotales.push(origin);
            nodosTotales.push(destination);
            linksTotales[i]=origin+destination;
            links[i] = {source : origin, target : destination, weight : 1};
            i++;
        }
    });
    
    for (i=0;i<nodosTotales.length;i++){
        if(uniqueArray.lastIndexOf(nodosTotales[i])===-1){
            var existe = false;
            for(n=0;n<textArr.length;n++){
                existe = nodosTotales[i].includes(textArr[n])||existe;
            }
            
            if(existe){
                uniqueNodes.push({category:2, name:nodosTotales[i], value:1, label:1});
                //uniqueNodes.push({category:2, name:nodosTotales[i], value:1, label:nodosTotales[i]});
            }
            else {
                uniqueNodes.push({category:1, name:nodosTotales[i], value:1, label:1});
                //uniqueNodes.push({category:1, name:nodosTotales[i], value:1, label:nodosTotales[i]});
            }
            uniqueArray.push(nodosTotales[i]);
        }
        else {
            uniqueNodes[uniqueArray.lastIndexOf(nodosTotales[i])].value++;
            uniqueNodes[uniqueArray.lastIndexOf(nodosTotales[i])].label++;
        }
    }
    for (i=0;i<linksTotales.length;i++){
        if(uniqueLinks.lastIndexOf(linksTotales[i])===-1){
            uniqueLinks.push(links[i]);
            uniqueLinksArray.push(linksTotales[i]);
        }
        else{
            uniqueLinks[uniqueLinks.lastIndexOf(linksTotales[i])].weight++;
        }
    }
    
        
    //console.log("Links: "+uniqueLinks.length,"Nodes: "+uniqueNodes.length);
    chart.setOption( { 
        title : {
        text: '',
        subtext: '',
        x:'right',
        y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        
        legend: {
            x: 'left',
            data:['nodos1','nodos2']
        },
        series : [
            {
                type:'force',
                name : "",
                ribbonType: false,
                categories : [
                    {
                        name: '人物'
                    },
                    {
                        name: 'nodos1'
                    },
                    {
                        name:'nodos2'
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(25,25,25,0.4)',
                            borderWidth : 1.5
                        },
                        linkStyle: {
                            type: 'curve'
                            
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                useWorker: false,
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1+0.02*uniqueNodes.length,
                roam: true,
                linkSymbol: 'arrow',
                large: true,
                nodes: uniqueNodes ,
                links : uniqueLinks
                    
                
            }
        ]
    });
    /*chart.on(echarts.config.EVENT.CLICK, function(param) {
   
    if (param.type === 'click' &&
        param &&
        param.data) {

        var x;
        var y;
        console.log(typeof param.event.changedTouches,typeof param.event.changedTouches==='undefined');
        if (typeof param.event.changedTouches==='undefined') {
            x = param.event.clientX;
            y = param.event.clientY;
        } else {
            x = param.event.changedTouches[0].clientX;
            y = param.event.changedTouches[0].clientY;
        }
        console.log(x,y);
        console.log(param.event);
        controller.menu.show({
            //event: param.event,
            x: x,
            y: y,
           
            data: function() {
                
                
                if(data.length>1){
                    dataRetuen = data[1];
                }
                else {
                    dataRetuen = data[0];
                }
                return dataRetuen;
            }
        });
    }
});*/
};
controller.resize = function(width, height, size) {
    chart.resize();
    // Called when the widget is resized
};


function on_click(){
    text = document.getElementById("identifier1").value;
}