Creating ECharts with Graph model

Before Started

Wanted

I want to make this graph

Question

How to make it … ?

Answer

Download HTML Code from ECharts Website (Press download button)

After successful download, open the file and change this code

$.get(ROOT_PATH + 'data/asset/data/les-miserables.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    var categories = [];
    for (var i = 0; i < 9; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }

with

$.get('data.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    var categories = [];
    for (var i = 0; i < 2; i++) {
        categories[i] = {
            name: 'Legend ' + i
        };
    }

Create gexf File

Create a data.gexf filename and insert this code:

<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.2" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd">
<meta lastmodifieddate="2014-01-30">
<creator>Gephi 0.8.1</creator>
<description/>
</meta>
<graph defaultedgetype="undirected" mode="static">
<attributes class="node" mode="static">
<attribute id="modularity_class" title="Modularity Class" type="integer"/>
</attributes>
<nodes>
<node id="0" label="Jakarta">
<attvalues>
<attvalue for="modularity_class" value="0"/>
</attvalues>
<viz:size value="50"/>
<viz:position x="-291" y="-75" z="0.0"/>
<viz:color r="235" g="81" b="72"/>
</node>
<node id="1" label="Bogor">
<attvalues>
<attvalue for="modularity_class" value="0"/>
</attvalues>
<viz:size value="90"/>
<viz:position x="-292" y="-75" z="0.0"/>
<viz:color r="-240" g="81" b="72"/>
</node>
<node id="2" label="Bandung">
<attvalues>
<attvalue for="modularity_class" value="1"/>
</attvalues>
<viz:size value="70"/>
<viz:position x="-293" y="-75" z="0.0"/>
<viz:color r="236" g="81" b="72"/>
</node>
</nodes>
<edges>
<edge id="0" source="1" target="0">
</edge>
<edge id="2" source="2" target="1" weight="10.0">
</edge>
</edges>
</graph>
</gexf>

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *