Skip to content

gargantext
gargantext
Commit b8c46253 authored by Mathieu Rodic's avatar Mathieu Rodic
Browse files
Options

[TEST] tried the "highcharts" library

parent 147d96f6
Show whitespace changes
Inline Side-by-side
Showing with 81 additions and 197 deletions
gargantext_web/api.py
View file @ b8c46253
...@@ -247,7 +247,7 @@ class CorpusController: ...@@ -247,7 +247,7 @@ class CorpusController:
suffix = key.split('_')[-1] suffix = key.split('_')[-1]
dimensions.append({ dimensions.append({
'key': key, 'key': key,
'type': 'date' if suffix == 'date' else 'numeric' 'type': 'datetime' if suffix == 'date' else 'numeric'
}) })
return JsonHttpResponse({ return JsonHttpResponse({
"collection": [ "collection": [
......
static/js/graph-it.js
View file @ b8c46253
...@@ -32,210 +32,94 @@ ...@@ -32,210 +32,94 @@
container.css('background', '#FFF'); container.css('background', '#FFF');
$.get('/api/corpus/13410/data?mesured=ngrams.count&parameters[]=metadata.publication_date&filters[]=ngram.terms|bee,bees&format=json', function(data) {
var dateFormat = d3.time.format('%Y-%m-%d %H:%M:%S'); // http://dygraphs.com/tutorial.html
var numberFormat = d3.format('.2f'); // http://dygraphs.com/data.html
// http://dygraphs.com/tests/callback.html
// http://dygraphs.com/legal.html
var unit = 'month';
var corpusId = 13410;
var series = [];
var keywordsList = ['bee,bees', 'brain,virus'];
var dimensions;
// create the series for future plotting
for (var i=0; i<keywordsList.length; i++) {
keywords = keywordsList[i];
// get data from server
var data;
$.ajax('/api/corpus/' + corpusId + '/data', {
async: false,
success: function(response) {data = response;},
data: {
mesured: 'documents.count',
parameters: ['metadata.publication_date'],
filters: ['ngram.terms|' + keywords],
format: 'json',
},
});
dimensions = data.dimensions;
// format all data // format all data
for (var i=0; i<data.dimensions.length; i++) { for (var j=0; j<data.dimensions.length; j++) {
var dimension = data.dimensions[i]; var dimension = data.dimensions[j];
var key = dimension.key; var key = dimension.key;
var otherKey; var n = data.collection.length;
if (dimension.type == 'date') { for (k=0; k<n; k++) {
otherKey = key.replace(/_date$/, '_' + unit); var value = data.list[k][j];
}
data.collection.forEach(function(element) {
switch (dimension.type) { switch (dimension.type) {
case 'date': case 'datetime':
element[key] = dateFormat.parse(element[key]); value = Date(value.replace(' ', 'T'));
break; break;
case 'numeric': case 'numeric':
element[key] = +element[key]; value = +value;
break; break;
} }
}); data.list[k][j] = value;
data.collection[k][key] = value;
} }
// organize data
var ndx = crossfilter(data.collection);
var all = ndx.groupAll();
// define accessors for every dimension
for (var i=0; i<data.dimensions.length; i++) {
var dimension = data.dimensions[i];
dimension.accessor = ndx.dimension(function(element) {
return element[otherKey];
});
} }
// add to the series
var monthlyMoveGroup = data.dimensions[0].accessor.group().reduceSum(function (d) { series.push({
return d.volume; name: keywords,
//return Math.abs(+d.close - +d.open); data: data.list,
}); });
}
var volumeByMonthGroup = data.dimensions[0].accessor.group().reduceSum(function (d) { // debugging only
return d.volume / 500000; dbg = series;
}); console.log(series);
var indexAvgByMonthGroup = data.dimensions[0].accessor.group().reduce( container.highcharts({
function(p, v) { chart: {
++p.days; type: 'spline'
p.total += (+v.open + +v.close) / 2;
p.avg = Math.round(p.total / p.days);
return p;
}, },
function(p, v) { title: {
--p.days; text: 'Evolution of documents count over time'
p.total -= (+v.open + +v.close) / 2;
p.avg = p.days == 0 ? 0 : Math.round(p.total / p.days);
return p;
}, },
function() { subtitle: {
return {days: 0, total: 0, avg: 0}; text: 'the results are filtered by ngrams'
},
xAxis: {
type: dimensions[0].type,
// dateTimeLabelFormats: { // don't display the dummy year
// month: '%e. %b',
// year: '%b'
// },
title: {
text: 'Date'
} }
); },
yAxis: {
var moveChart = dc.compositeChart(".graphit-container"); title: {
moveChart.width(800) text: 'Documents count'
.height(150) },
.transitionDuration(1000) min: 0
.margins({top: 10, right: 50, bottom: 25, left: 40}) },
.dimension(data.dimensions[0].accessor) tooltip: {
.group(indexAvgByMonthGroup) headerFormat: '<b>{series.name}</b><br>',
.valueAccessor(function (d) { pointFormat: '{point.x:%e. %b}: {point.y:%d} m'
return d.value.avg; },
}) series: series
.x(d3.time.scale().domain([new Date(1950,01,01), new Date(2014,12,31)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.brushOn(false)
.compose([
dc.lineChart(moveChart)
.group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.renderArea(true)
.stack(monthlyMoveGroup, function (d) {
return d.value;
})
.title(function (d) {
var value = d.value.avg ? d.value.avg : d.value;
if (isNaN(value)) value = 0;
return dateFormat(d.key) + "\n" + numberFormat(value);
})
])
.xAxis();
var volumeChart = dc.barChart(".graphit-container-2");
volumeChart
.width(800)
.height(100)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(data.dimensions[0].accessor)
.group(volumeByMonthGroup)
.centerBar(true)
.gap(0)
.x(d3.time.scale().domain([new Date(1950,01,01), new Date(2014,12,31)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.renderlet(function (chart) {
chart.select("g.y").style("display", "none");
moveChart.filter(chart.filter());
})
.on("filtered", function (chart) {
dc.events.trigger(function () {
moveChart.focus(chart.filter());
});
});
dc.renderAll();
});
return;
// d3.csv('/static/tests/morley.csv', function(error, experiments) {
d3.csv('/api/corpus/13410/data?mesured=ngrams.count&parameters[]=metadata.publication_year&filters[]=ngram.terms|bee,bees&format=csv', function(error, data) {
// DATA PARSING
data.forEach(function(x) {
x.publication_year = +x.publication_year;
x.count = +x.count;
});
var ndx = crossfilter(data),
x = ndx.dimension(function(d) {return +d['metadata.publication_year'];}),
y = [
x.group().reduceSum(function(d) {return +d['ngrams.count'];}),
x.group().reduceSum(function(d) {return +d['ngrams.count'] * 2;})
]
// WHAT'S UNDER THE GRAPH?
// dcVolumeChart = dc.barChart('.graphit-container-2');
// THAT'S THE GRAPH!
dcChart = dc.lineChart('.graphit-container');
// dcChart = dc.barChart('.graphit-container');
dcChart
.width(_width)
.height(_height)
.x(d3.scale.linear())
.elasticX(true)
.elasticY(true)
.renderArea(true)
// .brushOn(false)
// .rangeChart(dcVolumeChart)
.legend(dc.legend().x(.75 * _width).y(.125 * _height).itemHeight(13).gap(5))
// .title(function (d) {
// var value = d.value.avg ? d.value.avg : d.value;
// if (isNaN(value)) value = 0;
// return d.key + "\n" + value;
// })
.renderVerticalGridLines(true)
.renderHorizontalGridLines(true)
// .mouseZoomable(true)
.dimension(x)
.group(y[0], 'Test 1')
.stack(y[1], 'Test 2')
// .renderlet(function(chart) {
// dcChart.selectAll('rect').on("click", function(d) {
// alert('Boo!');
// });
// });
// SERIOUSLY, WHAT'S UNDER THE GRAPH?
// dcVolumeChart
// .width(width)
// .height(.25 * height)
// .dimension(x)
// .group(y[0])
// .stack(y[1])
// .centerBar(true)
// // .gap(1)
// .x(d3.scale.linear())
// // .x(d3.time.scale());
dcChart.render();
}); });
return container; return container;
......
templates/graph-it.html
View file @ b8c46253
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</div> </div>
</div> </div>
<div class="container graph-it"></div> <div class="container graph-it"></div>
<script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script> <script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
<script type="text/javascript" src="{% static "js/graph-it.js" %}"></script> <script type="text/javascript" src="{% static "js/graph-it.js" %}"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment