Develop Reference

Converting JSON file to GEXF file

Is there anyway to convert JSON file to GEXF file?
I'm currently using this echarts circular layout graph (https://echarts.apache.org/examples/en/editor.html?c=graph-circular-layout).
However, the JSON file has to be converted to GEXF file format for it to be used in the graph.
Note: My codes are in Javascript.
Thank you!
Updated with codes
Below is the sample codes of using the circular layout graph. It's getting the data from gexf file. However my input data for the graph is in JSON file.
myChart.showLoading();
$.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
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = node.symbolSize;
node.symbolSize /= 1.5;
node.label = {
normal: {
show: node.symbolSize > 10
}
};
node.category = node.attributes.modularity_class;
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Circular layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
data: categories.map(function (a) {
return a.name;
})
}],
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'Les Miserables',
type: 'graph',
layout: 'circular',
circular: {
rotateLabel: true
},
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
}
}
]
};
myChart.setOption(option);
}, 'xml');
Github Sample Codes
The github of this graph has the source code for the JSON file (codes) that it uses to populate the graph -> https://github.com/hecore/echart_demo/blob/master/data/hecore.json
I'm not sure how did the codes transform to this -> https://github.com/hecore/echart_demo/blob/master/data/les-miserables.json
Lastly, this is the file that they used to populate in the echarts circular layout graph in .gexf format -> https://github.com/hecore/echart_demo/blob/master/data/les-miserables.gexf

You could install Gephi (https://gephi.org/users/install/), then the JSON Exporter plugin for Gephi (https://gephi.org/plugins/#/plugin/jsonexporter-plugin). Then open the gexf file in Gephi and go to file>export>graph file>json graph. I'm not sure if it's exactly the format you need, but could be a starting point.

How to combine two Highcharts chart types?

Right now I have a simple column chart with following code using Highcharts:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
//some code
},
xAxis: {
categories: []
},
yAxis: {
//some code
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
//some code
},
series: []
};
$.getJSON("data/column.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
I now want to add a line chart to the same container, using exactly the same options (despite of the chart type). The date is also served via JSON.
How can I achieve this?
What I did so far:
I created a second variable "options2" with values chart and series.
Then I called
$.getJSON("data/line.php", function(json) {
options.xAxis.categories = json[0]['data'];
options2.series[1] = json[1];
chart = new Highcharts.Chart(options2);
});
But that only shows the first column chart.

Probably you should try use $.merge to prevent object edition.
Try this
$.getJSON("data/column.php", function(json) {
// Merge objects
var newOptions = $.extend({}, options);
// Edit new object instead of old
newOptions.xAxis.categories = json[0]['data'];
newOptions.series[0] = json[1];
chart = new Highcharts.Chart( newOptions );
});

Solved it by passing the series option (chart type) directly via JSON.
I added the "type:line" to the data array, which then overrides previously set options within the script tag.

How to implement Highcharts column-drilldown chart in Rails application?

I'm trying to implement a Highcharts Column-Drilldown Chart in my Rails application using lazy_high_charts. I want to display data that's being pulled from my database and stored in four arrays (areas, areaScores, departments, and deptScores). I'm having trouble converting the JS from the example (JSFiddle) listed on the highchart site into ruby. I have not been able to find any resources on creating a column-drilldown chart in ruby. Any help on how to integrate the drilldown chart into my ruby application would be highly appreciated.
I have included the sample JavaScript shown on the Highcharts demo page and my controller method that populates the four arrays with data and builds the highchart.
Highcharts Column-Drilldown Chart Example (Javascript)
$(function () {
Highcharts.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: '\t',
parsed: function (columns) {
var brands = {},
brandsData = [],
versions = {},
drilldownSeries = [];
// Parse percentage strings
columns[1] = $.map(columns[1], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
$.each(columns[0], function (i, name) {
var brand,
version;
if (i > 0) {
// Remove special edition notes
name = name.split(' -')[0];
// Split into brand and version
version = name.match(/([0-9]+[\.0-9x]*)/);
if (version) {
version = version[0];
}
brand = name.replace(version, '');
// Create the main data
if (!brands[brand]) {
brands[brand] = columns[1][i];
} else {
brands[brand] += columns[1][i];
}
// Create the version data
if (version !== null) {
if (!versions[brand]) {
versions[brand] = [];
}
versions[brand].push(['v' + version, columns[1][i]]);
}
}
});
$.each(brands, function (name, y) {
brandsData.push({
name: name,
y: y,
drilldown: versions[name] ? name : null
});
});
$.each(versions, function (key, value) {
drilldownSeries.push({
name: key,
id: key,
data: value
});
});
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. November, 2013'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
})
}
});
});
My Controller:
def generateOrgBreakdownReport
# First, query the database for the data you need for the report
#jsonanswerBRKD = queryDatabaseForOrgProgressReport()
# Second, process and combine data as needed for the report
#areaBreakdown, #deptBreakdown, #employBreakdown = computeAreaAndDeptPrepareScore(#jsonanswerBRKD)
# Third, you'll need to put the processed data into a format
# Highcharts will understand for the data series it uses
# for the graph.
#THESE ARRAYS HOLD THE NAMES AND SCORES OF AREAS AND DEPARTMENTS
#deptScores, #departments, #areaScores, #areas = cycleThroughProcessedDataAndCreateHighChartsDataSetsBreakdown(#areaBreakdown, #deptBreakdown, #employBreakdown)
# Last, we put the newly made data sets for Highcharts to work its magic.
#DONT KNOW HOW TO IMPLEMENT DRILLDOWN FOR RUBY
#orgBreakdown = LazyHighCharts::HighChart.new('column') do |f|
f.chart( type: 'column' )
f.xAxis(
title: { text: "Areas" },
type: 'category'
)
f.yAxis(
title: { text: "Preparedness Score (%)"},
)
f.series(
name: "Department Score",
colorByPoint: true,
data: #deptScores
)
f.series(
name: "Area Score",
data: #areaScores
)
f.title(
text: "Organizational Breakdown"
)
f.options[:xAxis][:categories] = #areas
f.drilldown({:series=>{
name:"Dept. Score",
data: #deptScore
}
})
end
end
Thanks,
Matt

I haven't used Lazy Highcharts, but assuming it mirrors the JSON from the JavaScript API you need to add the sub-series by name, e.g.
f.series(
name: "Department Score",
colorByPoint: true,
data: #deptScores,
drilldown: "subdept" #add this
)
Then you'll need to add drilldown data, and if Lazy Highcharts supports it, it might look something like this:
f.drilldown(
series: {
id: "subdept",
data: [
["One", 1],
["Two", 2],
["Three", 3]
]
}
)
See this basic drilldown fiddle to see how the resulting Javascript should look.

To get drilldown to work in Rails you have to make sure you include the drilldown module in your JavaScript manifest file (application.js).
I also had to download the file as it was not my highcharts module catalogue. You can find the file here: http://code.highcharts.com/modules/drilldown.js
Add this to application.js:
//= require highcharts/modules/drilldown
Outside of Rails you can include the drilldown module like this:
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

Displaying a json file with highstock

I have some difficulties displaying a graph with Highstock. It seems like I can't have access to the x-axis part where the graph should be displayed. I am new with Highstocks so my code could seem like a mess but my idea was the following:
First access the json file from the server. Convert it in the right format [[datestamp, value], ....]. Then display the graph.
Here is my Json file (file.json):
[{"date":"2013-10-04T22:31:12.000Z","value":30000},{"date":"2013-10-04T22:31:58.000Z","value":35000},{"date":"2013-10-04T22:32:05.000Z","value":60000},{"date":"2013-10-04T22:32:12.000Z","value":45000}]
My code is the following:
$(function() {
chartOjb = new Object();
var mydata = [];
$.getJSON('file.json', function(data) {
$.each(data, function (index, item) {
chartOjb.name = getTimestamp(item.date);
chartOjb.data = item.value;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
});
$('#container').highcharts('StockChart', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
xAxis: {
type: 'datetime',
title: 'Time',
//minRange: 3600 * 1000/15 // one hour
},
rangeSelector : {
selected : 1
},
title : {
text : value
},
series : [{
name : 'Capacité',
data : data,
tooltip: {
valueDecimals: 2
}
}] }); });
});
Thank you very much for your help

Could you add your function getTimestamp()? Maybe there is something wrong.
Keep in mind that:
x-value should be timestamp,
when using a lot of objects { x: x, y: y }, set turboThreshold

Problem showing data from a csv file for highcharts

I am trying to create a highchart line graph using data from a .csv file. But my webpage is just showing the titles of x and y axis, but no data. The code is as follows:
$(document).ready(function() {
var c = [];
var d = [];
$.get('data.csv', function(data) {
alert("data in the file: " + data);
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line'
},
title: {
text: 'Weight Monitor'
},
xAxis: {
title: {
text: 'Date Measured'
},
categories: c
},
yAxis: {
title: {
text: 'Weight (in Lbs)'
}
},
series: [{
data: d
}]
};
var chart = new Highcharts.Chart(options);
});
i tried to print the data read from file on screen just to check if the file was read properly and i got the proper data, but still my graph is not showing anything.
following is the data in my csv file:
2011-08-01 00:00:00,155
2011-08-02 00:00:00,156
2011-08-03 00:00:00,157
2011-08-03 00:00:00,160
where left value is date to be shown in x axis and right value is reading points for graph.
any help will be thankful.

Your code works perfect.
<script type="text/javascript">
$(document).ready(function() {
var c = [];
var d = [];
$.get('data.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'chart',
defaultSeriesType: 'line'
},
title: {
text: 'reading'
},
xAxis: {
title: {
text: 'Date Measurement'
},
categories: c
},
yAxis: {
title: {
text: 'reading'
}
},
series: [{
data: d
}]
};
var chart = new Highcharts.Chart(options);
});
</script>
Copy this whole code and save it as .html file in a directory and create the data.csv file in the same directory and make sure that there no empty lines, no spaces where they are not needed and no line-break at the end.
And then open the .html file, the chart should show up with the right data.

Add the chart within $.get.
Note that we can't create the chart outside the Ajax callback, as we have to wait for the data to be returned from the server. See this.
$.get('data.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
c.push(items[0]);
d.push(parseInt(items[1]));
});
var chart = new Highcharts.Chart(options);
},'Text');
Also mention explicitly the data return type to "Text" which might be a problem some time.

You must read the documentation properly. See http://www.highcharts.com/documentation/how-to-use#preprocessing
They already have a demo of the csv http://highcharts.com/studies/data-from-csv.htm .
Please go through the docs and familiarise yourself ! .