I'm new to javascript jQuery and JSON and I'm starting a project where I'd like to do some graphs in a browser. Digging through tutorials and examples I'd like to create a graph with some data gathered with JSON and then work with the graph as shown in the examples (adding axes... ).
So I'm pretty sure the problem is that creating the graph with var ajaxGraph = new Rickshaw.Graph.Ajax doesn't return the same object as var graph = new Rickshaw.Graph. The Rickshaw.Class.create function used for var ajaxGraph = new Rickshaw.Graph.Ajax is too complicated for me to comprehend with my current skills. Can I somehow get the proper graph object from Rickshaw.Graph.Ajax? Or should I try to use JSON separately and then call var graph = new Rickshaw.Graph somehow?
Thanks for any hints.
I would definitely consider rather doing the JSON stuff separately, getting the data into the correct format and then binding Rickshaw to it.
Doing that might not be as hard as you think and will be useful later on for different work. Using Rickshaw's ajax abstraction doesn't really save you from complexity in my opinion.
Here's a screencast that I created that goes through exactly what you need: http://tagtree.tv/d3-with-rickshaw-and-angular. It might be a bit more complex because it plonks a Rickshaw graph into an Angularjs app, which has it's own challenges. But what it does show you, is how to massage the data you get from the server into the correct format to give to Rickshaw.
Getting the data from the server with jQuery is quite easy. You can use the shorthand ajax methods:
http://api.jquery.com/category/ajax/shorthand-methods/
Or even get to know the ajax call (I think it's better to start here):
http://api.jquery.com/jQuery.ajax/
Then massaging the data so that Rickshaw can bind to it, I would recommend using underscore:
http://underscorejs.org/
Related
I have a MySQL database and retrieve data using php on a website where I would like to visualize the data in different ways. For this I also need to transform the data (e.g. creating sums, filtering etc.).
My question is now at which step of the data flow this kind of transformation makes most sense, especially regarding performance and flexibility. I am not a very experienced programmer, but I think these are the options I have:
1.) Prepare views in the database which are already providing the desired transformed data.
2.) Use a PHP script that SELECT's the data in the transformed way.
3.) Just have a SELECT * FROM table statement in PHP and load everything in a json, read it in js and transform the data to a desired version.
What is best practice to transform the data?
It all depends in the architectural design of your application.
At this time SOA (Service Oriented Architecture) is a very used approach. If you use It, logic use to be in the services. Database is used as a data repository, and UI manage final data in light weight format, only really needed information.
So in this case, e.g. your option number 2 is most appropriated.
I'm trying to make pull XML or Csv data into a HTML file then I want to use math to add up the values and show the result on the page ( I'm basically trying to display invoices on a web browser)
My skill set is HTML/CSS and I understand a little JavaScript
I've managed to pull XML data into HTML using http request and style that information using xslt
Really what I'm asking is what is the best solution to my needs is it using the above method then using xquiry to add up values or would I need to learn a bit of Ajax, Json and calculate the values with JavaScript?
You really should learn AJAX in order to fetch and manipulate data instead of fetching presentation parts. That's the way everyone follows as it allows more responsive interactions with the user and a cleaner architecture in case of complex interactions.
But that doesn't mean you must abandon XML : originally AJAX was built on XML (the X in AJAX) and not JSON.
Personally I prefer JSON, and I think it will be easier to manage in the long term, but if the server side is hard to change, you can fetch the XML (look for example at jquery's ajax function), build javascript objects using it, and then change your screen using those data. If later you decide to use JSON instead of XML, you'll just have to change the "parsing" part of the client code.
"I'm trying to make pull XML or Csv data into a HTML file then I want to use math to add up the values and show the result on the page"
You can do this with either XSLT or javascript. However, with XSLT things can become pretty complicated, depending on what version you're using. XSLT 1.0 has pretty limited set of functions for aggregating results. For all XSLT, you can't reassign variables you'll have to solve many of these things with recursion. In my opinion, not really a comfortable method.
Regardless of the choice between XSLT and Javascript, I would also question the architecture that would put this kind of logic in the presentation layer in the browser. I think it would be better if the server side would perform all the calculations that are required, and limit the browser's tasks to styling the output.
I would like to plot an array of numbers (int/float/binary/..) as an image using Javascript and I don't know exactly how to do it..
The system is composed of a CORE part done in C++ and a GUI part done in jQuery, and I have to show results calculated by the CORE in the GUI side. I can pass them in any format such as binary files, XML files,... but I don't know how the GUI might plot an array of numbers and show them as an image to the user.. Also It may be useful to have an scale of colours..
any suggestion on doing that? any available library for that purpose? every idea is welcome!
thanks in advance!
cheers
Have a look at d3.js. This library provides plenty of possible visualizations and is quite easy to customize.
Here is a list of plot libs in js:
http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/
You need to format your data in json to get it work. if the data set is very big, better to plot is on server side and send a image file to client.
I have a REST api which dumps some json data (user info, etc). Now I need to use that data to:
construct html tables,
plat graphs using some js graphing lib,
Do some calculations over some fields and again display them.
So, essentially I need to do some processing on that data and then display the refined form.
I am new to javascript and trying to understand what is the best practice to construct the html?
I am using jquery to make the ajax call and the success part looks something like this:
success:function(data){
$('#show_data_here').empty();
generated_html = construct_html(data);
$('#show_data_here').html(generated_html);
}
Now, the construct_html(data) function is getting really ugly since the json I am receiving is huge (800 lines) and I have alot (~10) graphs to display on one page. Is there a better way to approach this problem?
as a start try breaking them down into functions that perform each task.
Then within each task, you may have sub-tasks. break them down again.
success:function(data){
constructTable(data.tableData);
grabLib.create(data.graphData);
updateCalculations(data.tableData);
}
function constructTable(data)
{
var html = '';
// foreach
$('table tbody').empty().html(html);
}
// etc
Idealy you would want to be dealing with objects that could perform the tasks for you, but your first steps would be breaking down the functionality. into smaller chunks.
Depending on the type of html you are constructing you may want to consider using a templating framework like JsRender.
if the html you are constructing follows a definite pattern, this might be the way to go.
We are moving more and more to restful resources and have found it a little painful in the data formatting sense. Dates for example come back in nasty full format and then require javascript or other code to do the formatting.
Relationships either aren't included or come back as id's unless you alter the as_json defaults to include the relationships. My initial thought is to flatten the data by duplicating it on the table row but that doesn't work well for has_many.
Are there any articles or podcasts that cover the "right" way to approach this?
Your presentation layer should format values for display - you should store your data in the most neutral format possible. The display of data is a concern of your UI - by formatting the data there you are allowing for multiple different UIs that could format the data different ways.
A good approach for me was to move the format of rendered JSON data to the view layer, using the rabl gem.
It allows to write templates that describe how your JSON data is rendered, selecting which attributes and associations you want to include, along with nice other functions: partials, custom nodes, template inheritance, etc.