Direct data input from Django for a D3 graph - javascript

It seems all the D3 example graphs take an external .csv or .tsv file as input data. Is there any way to modify the code to take data from a variable in Django. Suppose {{ data }} is in JSON format, how do you implement this in a graph such as http://bl.ocks.org/3885304 or http://bl.ocks.org/3887051 ? I'm trying to avoid always writing a .csv file.

You can always make a view which will serve dynamic csv file which will be consumed by D3. This way will also allow users to download the data in case they need the raw data instead of a graph.
def foo(request, ...):
model = get_object_or_404(Foo, ...)
data = model.get_data() # should return csv formatted string
return HttpResponse(data, content_type='text/csv')

Instead of loading data asynchronously (ajax-style), you can use correctly formatted JSON in a string passed to your template tag variable and |safed.
Check out the working example http://bl.ocks.org/4040034 which is based on http://bl.ocks.org/3885304
You should also check out the related questions on SO, there are tons on the subject.

Related

Parse csv with line breaks in a single cell in google app script

I am trying to load some csv data onto spreadsheet. Unfortunately, I keep getting this error when I try to feed my csv data onto Utilities.parseCsv():
Exception: Could not parse text.
The payload for parseCsv looks something like this:
"\"colName1\", \"colName2\"\n, \"<some html>\n<more html>\", \"colVal2\"\n"
Initially, I thought it might be because there are some html stuff inside the csv data. However, after doing some more testing, I realized it's the \n that's screwing things up. That's because when I take out the \n<more html>\" part from that csv string, it's now able to parse my csv data. Is there a way to get around this without removing that portion of the payload?
My code is pretty simple but it looks like this:
const response = UrlFetchApp.fetch(csvLink);
const csvData = response.getContentText();
const parsedCsvData = Utilities.parseCsv(csvData);
where csvLink is a url to the csv that allows users to grab the csv file/contents.
Essentially, I want to be able to parse my csv whilst being able to keep the line breaks present in a single cell.
Instead of using parseCsv(), I had to approach this problem in a different way since I couldn't just replace all \n with a different character. I ended up using batchUpdate() instead. This way, I was able to paste my csv data directly onto google spreadsheet in a more efficient manner.
Here is a pretty good github post that talks about different possible ways to write csv data onto google spreadsheet :
https://gist.github.com/tanaikech/030203c695b308606041587e6da269e7

Display list content from other URL In HTML using JS

I am trying to do a simple task; retrieve JSON using Jquery and display the name to a simple HTML list, usually, the JSON file I deal with is quite straightforward with a format of
[ {a:1,b:2},{a:3,b:4}]
, but this time, the file (hosted on a different website) has a format similar to
[
["John",21,5,"description","some-link"],["Doe",3,6,"description","some-link"],]
with another 100k entries. My goal is to simply display all the names of this file in an HTML list.
Is there a way to retrieve the list and display content such as the name and description in simple HTML ul?
the actual file link is here: https://www.dropbox.com/s/104iutbz95o7wtw/test.json?dl=0 (consider it is actually hosted on a website for example: https://sample.com/test.json)
You need a regex to return a list of the data.
Have a look at this one I made for you: https://regex101.com/r/aDRp6A/1
It would help to know if the data has a strict structure or if it's variable.
EDIT:
Given your sample data I can see yours is just a list of lists. No curly brackets. That's good!
Once you have your json as a string try to split it:
myList = yourJsonObject;
And then you can access the data with:
myList[0][0]
hello you need to build your own parser or use regex, because the format that you mention is not JSON

Converting Excel Data to a Chart in HTML dynamically

Is it possible to be able to upload an excel document with varying ranges of data, and have that data dynamically displayed in a basic form of chart(bar, pie, etc.) on our company website.
After doing some research I figured the only two possible ways to maybe do something like this is to use a very complicated macro in VBA or a Javascript parser to read the data and display it then. The data that will eventually go in here will have sensitive information so I cannot use google charts or anything like that.
This problem has to be divided into two parts.
One -part is to gather and process the information needed to display the chart.
Second - This is the easiest, a way to display a chart in HTML. For this, you can use www.c3js.org javascript library to display the chart in HTML.
Regarding part one, it depends in which technology is built your website.
For example, If it is in php, you will need to find a library in php, which can read and parse excel files.
Then you have to create a service in your website, where the data is going to be provided. For example,
www.yourcompany.com/provideChartData.php
You can format the response as json format.
Once you have solved that, you only have to call the service from your page, and the data will be dynamically displayed. You can call it using jquery library for javascript ($.post("www.yourcompany.com/provideChartData.php",function (data) { code to display chart ....}))
There is no real easy way to do this that I have found. I have had to manually parse these things in the past but there are some libraries out there for node that might help you.
https://www.npmjs.com/package/node-xlsx
You can also export form excel as CSV. When you do this, me sure to set the custom separator to something other than ',' and you should be fine to import it into a large array and get the data/charts you need.
https://github.com/wdavidw/node-csv
Hope that helps.

Text file data into a webpage for graphing

I am new to web dev and I have a text file that I created using C# to collect some data from a website. Now I want to use that data to make graphs or some way to show the info on a website. Is it possible to use I/O in javascript or what is my best option here? Thanks in advance.
You have several options at your disposal:
Use a server-side technology (like ASP.Net, Node.js etc) to load, parse and display the file contents as HTML
Put the file on a web server and use AJAX to load and parse it. As #Quantastical suggested in his comment, convert the file to JSON forma for easir handling in Javascript.
Have the original program save the file in HTML format instead of text, and serve that page. You could just serve the txt file as is, but the user experience would be horrible.
Probably option 1 makes the most sense, with a combination of 1 + 2 to achieve some dynamic behavior the most recommended.
If you are working in C# and ASP then one option is to render the html from the server without need for javascript.
In C# the System.IO namespace gives access to the File object.
String thetext = File.ReadAllText(fileName);
or
String[] thetextLines = File.ReadAllLines(fileName);
or
If you have JSON or Xml in the file then you can also read and deserialize into an object for easier use.
When you have the text you can create the ASP/HTML elements with the data. A crude example would be:
HtmlGenericControl label = new HtmlGenericControl("div");
label.InnerHTML = theText;
Page.Controls.Add(label);
There are also HTMLEncode and HTMLDecode methods if you need them.
Of course that is a really crude example of loading the text at server and then adding Html to the Asp Page. Your question doesn't say where you want this processing to happen. Javascript might be better or a combination or C# and javascript.
Lastly to resolve a physical file path from a virtual path you can use HttpContext.Current.Server.MapPath(virtualPath). A physical path is required to use the File methods shown above.

Pass data to Javascript from ProMotion WebScreen

I am building an iOS app using the wonderful RubyMotion framework and ProMotion gem stack.
I want to display a chart in a PM::WebScreen on my iPhone. I reference an HTML file in the content method, and have (1) the HTML file, (2) my custom JS methods file, (3) my JS chart library (HighCharts), and (4) jQuery in my resources folder. All this renders fine.
I am able to create the data array for the chart in my PM::WebScreen file (I get the data from an API call to an external source.) The chart renders fine with static data typed in.
The Problem
I want to pass my the data array to my custom JS file to get it to draw the chart with dynamic data. How can I do that?
I would prefer not to make an ajax call from my JS because I may want to use that array elsewhere in my RubyMotion/ProMotion code.
If I can pass the data to the HTML file, I suppose I could extract it to JS from there using jQuery.
Please advise. Thanks!
You can use the webview method stringByEvaluatingJavaScriptFromString. For example, if you have a JS function included in your html called loadData that take data as an argument, you can do
In your JS:
function loadData(data) {
// do something with your data
$("#chart").show();
}
In RM:
data = dataFromSource
webView.stringByEvaluatingJavaScriptFromString('loadData(' + data +')')

Categories