Skip to content
This repository has been archived by the owner on Mar 13, 2019. It is now read-only.

Commit

Permalink
Added barchart
Browse files Browse the repository at this point in the history
  • Loading branch information
@josecolella
josecolella committed Jun 15, 2014
1 parent 9289ce8 commit bc20463
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 203 deletions.
4 changes: 4 additions & 0 deletions Final_Project/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,3 +111,7 @@
os.path.join(BASE_DIR, 'visualization/templates')
)

import mimetypes

mimetypes.add_type("image/svg+xml", ".svg", True)
mimetypes.add_type("image/svg+xml", ".svgz", True)
124 changes: 82 additions & 42 deletions visualization/static/visualization/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,13 +573,13 @@ $(function() {
d3.json(url, function(error, data) {
if (!error) {
console.log(data);
// visualize.inputData = data;
// var columnNames = Object.keys(data[0]);
// visualize.cf = crossfilter(inputData);
// $('#dataTable').handsontable({
// data: visualize.inputData,
// colHeaders: columnNames
// });
visualize.inputData = data;
var columnNames = Object.keys(data[0]);
visualize.cf = crossfilter(visualize.inputData);
$('#dataTable').handsontable({
data: visualize.inputData,
colHeaders: columnNames
});
}


Expand Down Expand Up @@ -607,6 +607,7 @@ $(function() {
break;
}

$("#dataTable").focus();



Expand All @@ -624,32 +625,39 @@ $(function() {
showVisualizationModel();
vex.dialog.open({
message: 'Export as...',
input: "<style>\n .vex-custom-field-wrapper {\n margin: 1em 0;\n }\n .vex-custom-field-wrapper > label {\n display: inline-block;\n margin-bottom: .2em;\n }\n</style>\n<div class=\"vex-custom-field-wrapper\">\n <div class=\"vex-custom-input-wrapper\">\n <select class=\"form-control\" id=\"exportSelect\">\n <option>PDF</option>\n <option>PNG</option>\n <option>SVG</option>\n <option>JPEG</option>\n <option>JPEG</option>\n <option>CSV</option>\n <option>R</option>\n <option>Python</option>\n <option>Excel</option>\n</select>\n </div>\n</div>\n",
input: "<style>\n .vex-custom-field-wrapper {\n margin: 1em 0;\n }\n .vex-custom-field-wrapper > label {\n display: inline-block;\n margin-bottom: .2em;\n }\n</style>\n<div class=\"vex-custom-field-wrapper\">\n <div class=\"vex-custom-input-wrapper\">\n <select class=\"form-control\" id=\"exportSelect\">\n <option>PDF</option>\n <option>PNG</option>\n <option>SVG</option>\n <option>JPEG</option>\n <option>CSV</option>\n <option>R</option>\n <option>Python</option>\n <option>Excel</option>\n</select>\n </div>\n</div>\n",
callback: function(data) {
if (data === false) {
return console.log('Cancelled');
}
var fileType = $("#exportSelect option:selected").text();
switch (fileType) {
case 'PDF':
break;
case 'PNG':
break;
case 'SVG':
break;
case 'JPEG':
break;
case 'CSV':
break;
case 'R':
break;
case 'Python':
break;
case 'Excel':
break;
if ($("#chart > svg").length !== 0) {
var fileType = $("#exportSelect option:selected").text();
switch (fileType) {
case 'PDF':
break;
case 'PNG':
break;
case 'SVG':
sendSVGInfo();
// exportTo('pdf');
console.log('here');
break;
case 'JPEG':
break;
case 'CSV':
break;
case 'R':
break;
case 'Python':
break;
case 'Excel':
break;

}
return console.log();
} else {
vex.dialog.alert('To export, a visualization model must be created first.');
}
return console.log();
}
});
});
Expand Down Expand Up @@ -683,37 +691,69 @@ $(function() {
trigger: 'hover'
});


/**
*
* Click handler for when the user want to add a pie chart to the visualization model
* Click handler for when the user wants to add a visualization model to the workspace
*/
$("#addpie").click(function() {
var chart = $("#addpie").parent().text().toLowerCase();
$(".addbtn").click(function() {
var visualizationModel = $(this);
var chart = visualizationModel.parent().text().toLowerCase();
hideDataGrid();
if (visualize.cf !== null) {
hideDataGrid();
if (visualize.config.x != null && visualize.config.y != null) {
visualize.pieChart(chart);
switch (chart) {
case 'pie': //Generate a pie chart
visualize.pieChart(chart);
break;
case 'bar':
visualize.barChart(chart);
break;
case 'box':
visualize.boxChart(chart);
break;
case 'curve':
visualize.curveChart(chart);
break;
case 'histogram':
visualize.histogram(chart);
break;
case 'line':
visualize.lineChart(chart);
break;
case 'scatter/bubble':
visualize.scatterChart(chart);
break;
case 'stacked area':
visualize.stackedChart(chart);
break;
default :
break;

}
} else {
vex.dialog.alert('An x and y axis must be chosen');
}
} else {
console.log('A dataset must be chosen');
vex.dialog.alert('A dataset must be chosen');
}

});

$("#addline").click(function() {
lineChart();
});

$(document).on('click', '.htCore > thead > tr > th > .btn-group', function() {
//Click handler to set the axis for the visualization model
$(document).on('click', '.htCore > thead > tr > th > .btn-group', function() {
var axisField = $(this);
var field = axisField.prev().text();
console.log(field);
var axis = axisField.find(".active").children("strong").text();
console.log(axis);

if (axis !== "") {
visualize.config[axis] = field;
//The user wants the column as the x and y axis
if (axis.length > 1) {
var cleanAxis = axis.charAt(axis.length - 1);
visualize.config[cleanAxis] = field;
}
if (visualize.config.axis == null) {
visualize.config[axis] = field;
}
}


Expand Down
114 changes: 49 additions & 65 deletions visualization/static/visualization/js/exports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,13 @@
* @return
*
*/
var exportSVG = function(outputFormat) {
var exportTo = function(outputFormat) {
var processUrl;


/**
* This returns the url that will be used to send the input file
* @param outputFormat
*/
var convertSVGToOutput = function(outputFormat) {


Expand Down Expand Up @@ -57,8 +60,8 @@ var exportSVG = function(outputFormat) {
dataType: 'json',
data: {
input: "download",
file: "http://cl.ly/1X310P2q3132/test2.svg",
filename: "test2.svg",
file: "http://cl.ly/0S3P0o3X192J/newfile.svg",
filename: "newfile.svg",
outputformat: outputFormat
},
success: function(data) {
Expand All @@ -85,67 +88,48 @@ var exportSVG = function(outputFormat) {
};


$(document).ready(function() {

$('#exportPng').on('click', function() {
exportSVG("png");
});

$('#exportPdf').on('click', function() {
exportSVG("pdf");
});

$('#exportJpeg').on('click', function() {
exportSVG("jpg");
});

$('#exportExcel').click(function() {

});

var createSVGFileInformation = function() {
var html = d3.select("svg")
.attr("title", "test2")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML.trim();

$('#exportSVG').on('click', function() {

var createSVGFileInformation = function() {
var html = d3.select("svg")
.attr("title", "test2")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML.trim();
return html;
};

return html;
};
var sendSVGInfo = function() {
var svg = createSVGFileInformation();

console.log(svg);

$.ajax({
url: 'createSVG/',
type: 'POST',
dataType: 'html',
headers: {
'X-CSRFToken' : $.cookie('csrftoken')
},
data: {
svg: $.base64.encode(svg)
},
success: function(response) {
console.log(response);
// var url = response.url;

},
error: function() {
console.log("error");
}
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});

var sendSVGInfo = function(svg) {
$.ajax({
url: 'createSVG/',
type: 'POST',
dataType: 'html',
headers: {
'X-CSRFToken' : $.cookie('csrftoken')
},
data: {
svg: $.base64.encode(createSVGFileInformation())
},
success: function(data) {
console.log(data);
},
error: function() {
console.log("error");
}
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});

};

sendSVGInfo();
});
});
};
Loading

0 comments on commit bc20463

Please sign in to comment.