Short review javascript libraries for plotting

Highcharts

Highcharts is a pure HTML5/JavaScript charting library that offers intuitive interactive charts for your website or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Google Charts

Google Charts - Offers a variety of charts designed for data visualization solutions. These charts are based on pure HTML5/SVG technology (accepting VML for older versions of IE) so no plugins are required. All of them are interactive and many of them are pannable and scalable. Adding these charts to a page can be done in a few easy steps.

CanvasJS

CanvasJS - easy to use HTML5 and JavaScript library Charting, built on the element Canvas. Graphs can be displayed on various devices, including mobile devices, iPad, Android, Windows phone, Microsoft Surface, on the desktop computers etc. This allows you to create functional graphics that work on all devices without compromising the maintainability or functionality of your web application. CanvasJS comes with beautiful themes and loads 10 times faster than regular flash and SVG Graph- resulting in graphics that are light and beautiful.

ChartJS

Chart JS - Lightweight, object-oriented client-side charting library.

RGraph

RGraph is an HTML5 canvas based and JavaScript library for building web charts with support for over twenty various types visualization. RGraph creates HTML5 charts inside a web browser using JavaScript and a tag canvas.

Usage graphs and charts has a very wide application. With their help, you can show a lot of information in a convenient and understandable way, and, accordingly, understand and understand it faster.

There are several ways to add a graph or chart to a web page. The first one, which you probably already thought of, is to draw it in any graphics editor. But this is not the most convenient and fastest option. It is much easier and faster to make a graph in JavaScript, where all you have to do is set the necessary parameters, view and place it on the page.

In this article, we will tell you about 10 services and tools, which will help in creating graphs and charts in JavaScript. You will find other ways to create in the heading "".

Bluff
To draw a line graph using this service, you just need to copy a few lines of code, set the desired parameters and add text. The code is so simple and clear that you can understand it in just a few seconds.

With PlotKit, you can build charts and graphs that will display correctly in all browsers. On the site you will find documentation, examples of chart types and quick guide(with a description of all parameters and settings) to quickly get started.

This service allows you to make great visual features. Enter the equation, for example 2*sin(4*x)^(x+4), press "Enter" and the function is ready. After that, you just have to copy the url and paste it on your page.

The most powerful tool for building tables, graphs and charts on jQuery. On the site you will find examples of all types of charts, as well as detailed description parameters and setup steps.

fleet
jQuery charting library from Google. You can write nothing more on this, everything is already clear (: But still, we note that the service offers great amount beautiful examples with flexible and easy customization.

Allows you to create charts and tables of data histograms. To build, you need to enter the necessary data and click on the "Calculate" button. Next, copy the code and download a small script. If desired, all data can be entered in the code itself.

The service provides 6 types of charts ( pie chart, line chart, dynamic chart and 3 kinds of histograms). There is a description of the settings, parameters and detailed examples all kinds of diagrams.

Raphael
Raphaël is a small JavaScript library that greatly simplifies the work of creating graphs and charts. This is the most powerful tool of all presented in this review. It will be easier for you to see the capabilities of the library yourself than to read the description about its capabilities.

plotr
Library for building charts on Mootools. A great tool that presents information in a beautiful and understandable way. And to configure it, you only need to change or add values.

The capabilities of this service allow you to build 3D graphics. From the functionality, it is worth highlighting a simple setting, fast work script and the ability to plot cosine and sine graphs.

In terms of interoperability, Fleet will definitely bring you as close to Flash graphics as possible to jQuery. While the plot output is pretty slick and great looking, you can also interact with the data points. I mean you can be able to hover over a data point and get a visual feedback from the value of this point on the graph.

The fleet version of trunk supports pie charts.

Ability to scale the fleet.

In addition, you also have the option to select a section of the graph to return data for a specific "zone". As an added feature for this "zoning" you can also select an area on the graph and zoom in to see the data points a little closer. Very cool.

Sparklines

Restrictions: Pie, Line, Bar, Combination

Sparklines is my favorite mini graphics tool. Really great for toolbar style charts (think toolbar Google Analytics next time you log in). Because they're so tiny, they can be included in a string (as in the example above). Another nice idea that can be used in all graphics plugins is self-updating capabilities. Their Mouse-Speed ​​demo shows you the power of live charting at its best.

Query chart 0.21

Constraints: Area, Line, Bar and combinations of these

jQuery Chart 0.21 is not the prettiest chart plugin, it should be listed there. Its pretty basic in functionality when it comes to the charts it can handle, however it can be flexible if you can put some time and effort into it.

Adding values ​​to a chart is relatively simple:

ChartAdd(( "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44"," 123","23","99"] ));

jQchart

Restrictions: Bar, Line

jQchart is odd, they have built in animation transistors and drag and drop functions to chart, however its a bit clunky - and seemingly pointless. It generates nice charts if you get your CSS set up right, but there's better.

TufteGraph

Constraints: Bar and Stacked Bar

Tuftegraph markets itself as "pretty bar graphs you'll show your mother". It gets closer, the Fleet is prettier, but Tufte makes himself very light. Although that's where the restrictions end - there are multiple options to choose from so you get what you specified. Look at the quick win card.

Graphs are a great visual aid when presenting data. Without them, it is impossible to create a high-quality admin panel. They are not easy to install. However, there is a new library that makes this task easier - xCharts . Today we are going to use this tool along with Bootstrap's Twitter Date Range palette to create a beautiful AJAX chart for your web application that retrieves data from a MySQL table.

HTML

The demo structure of this language is quite simple - we have to add elements on the page to start plotting and to select information. Since we're enabling loading on the page anyway, we can use its styling forms and icons to give this structure a nice look.

index.php

It uses a lot of external resources. In the main section, we have the cascading stylesheet files for xCharts , the number sorter, the download (integrated from the super fast CloudFlare CDN), and our style.css file.

Before we close the table label, we have the JQuery library, d3.js (required by the xcharts program), xcharts , a library with user-friendly interface sugar.js (which requires a plugin in the 'dates' range), a plugin in the 'dates' range, and a script.js file. Next, you'll see how it all works together.

MySQL

As I mentioned in the introduction, the script we are writing will get data from a MySQL table and display it in a chart. You can find the SQL code that will create the table in schema.sql in a compressed file, available for download using the top buttons. The table will look like this:

It has only three columns. The "date" column is assigned a unique index, which means that there cannot be duplicate entries on the same day. The column "sales records" indicates the number of sales during the day. Your database will certainly be different, but as long as you get the correct answer in the format for structuring data into a plain text format used to exchange JSON information from a PHP script, there will be no problems anymore (more on this in the next section).

Note: Don't forget to enter your MySQL connection details in setup.php . Then you will have to create a new base MySQL data and import schema.sql from the PHPMyAdmin system or from the management system of your choice.

PHP

In our PHP script we will select records from the table that correspond to the passed initial and final information, collect all the data in an array, and display them in text format data exchange (JSON):

ajax.php

Header("Content-Type: application/json"); // library setup require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // select results $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // create a new array with data foreach ($results as $key => $value) ( ​​$data[$key]["label"] = $value["date"]; $data[$ key]["value"] = $value["sales_order"]; ) echo json_encode($data); )

Here I am using my favorite library - Idiorm . I've used it in the past for website consultations (and many personal projects). It's only one file (located in the library/folder) and makes working with databases a lot easier. All I do is fetch all results from the database that have a time value between the start and end timestamps consistent with the retrieval request.

The resulting JSON response looks something like this:

[( "label": "2013-01-07", "value": "4" ), ( "label": "2013-01-06", "value": "65" ), ( "label": "2013-01-05", "value": "96")]

The label properties contain the MySQL number values ​​in the corresponding row, and the columns contain the number of sales for that day. It's up to the JavaScript code to properly process this data and reshape it into a format suitable for sharing with the xCharts plugin.

JavaScript

All JS code is contained in assets/js/script.js. The code is a little long, and to make it easier to follow, I will present it to you in parts.

First we will set a few variables and initialize the date range picker plugin. Please note that the dat range I used is an offshoot of the original plugin. I chose to work with this version because the original depends on date.js, a legacy data library that conflicts with xCharts. Instead, sugar.js is used - a great useful library with reliable and up-to-date information.

assets/js/script.js

$(function() ( // set default dates using shugar functions var startDate = Date.create().addDays(-6), // 6 days ago endDate = Date.create(); // today var range = $ ("#range"); // show dates in input order range.val(startDate.format("(MM)/(dd)/(yyyy)") + " - " + endDate.format("(MM)/ (dd)/(yyyy)")); // load chart ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Today": ["today", "today" ], "Yesterday": ["yesterday", "yesterday"], "Last 7 Days": , "Last 30 Days": // You can add more entries here ) ),function(start, end)( ajaxLoadChart(start, end); ));

As you can see, we've successfully applied sugar.js' information and methods to define the initial and end point range. I entered the results of the last 7 days into the script, and updated the range input field.

Now let's create a graph:

// hint when hovering over the chart var tt = $("