Jquery+ajax+json+highcharts Visualization Data Combat-real-time temperature curve combat

Because the project needs to intend to do the original game of things, migrate to angular JS above, but found to be familiar with the use of it will take some time, the old frame is the existing jquery+json+highcharts+ajax.

The data format is shown in JSON as follows:

{
title: "From Android",
Led:true,
temperature:24, more
: "June 23, 2013 14:24:31",
humidity:142,
Smoke:8,
infrared:false,
tel:false,
msg:false
}

Highcharts

Highcharts is a pure JavaScript library for charting, with the following features: Compatibility: Compatible with all current browsers, including iphones, IE and Firefox, and free to individual users; Pure JS, no BS; support most chart types: Straight line graphs, graphs, Area chart, area graph, histogram, pie chart, scatter chart; Cross-language: It is available in PHP, ASP.net, or Java, and it only needs three files: One is Highcharts's core file highcharts.js, and a canvas emulator For IE and jquery class libraries or mootools class libraries; hint function: The mouse moves to a point on the chart to have the information; zoom in: Select the chart part to enlarge, close-up observation chart; Ease of use: no special development skills, only need to set the option to make the appropriate chart; Timeline: can be accurate to milliseconds;
But because of the project reason, so may not use this again, only is free for the individual, now the consideration is based on D3 to make a new.
Highcharts supports the direct export of charts, the above figure is the temperature trend of the export, the visual is between 24~25.
jQuery Ajax uses the basic usage visible square net, as shown below

$.ajax ({
  dataType: "JSON",
  Url:url,
  data:data,
  success:success
});

Note: The difference between JSON and JSONP is that Ajax does not support cross stations, and JSONP is created so that you need to add a callback to cross the station. I didn't notice the problem at first, so I put the API in different places to listen ... Finally had to transfer back, because relatively simple.
Highcharts Use

$ (function () {$ (' #container '). Highcharts ({title: {text: ' Monthly Average Temperatu Re ', x: -20//center}, subtitle: {text: ' Source:WorldClimate.co M ', x: -20}, Xaxis: {categories: [' Out of the ', ' Feb ', ' Mar ', ' Apr ', ' M
                Ay ', ' June ', ' o ', ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec '}, YAxis: {
                    Title: {text: ' Temperature (°c) '}, plotlines: [{
            value:0, width:1, color: ' #808080 '}]}, ToolTip: {valuesuffix: ' °c '}, Legend: {layout: ' vertical '
            , align: ' right ', verticalalign: ' Middle ', borderwidth:0},
  Series: [{              Name: ' Tokyo ', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] {name: ' New York ', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1  , 14.1, 8.6, 2.5]}, {name: ' Berlin ', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, {name: ' London ', data: [3.9, 4.2, 5.7, 8
    .5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}};
     });

The official website example gives the person to look is simple and understandable, next we need to combine the three.
Highcharts+ajaxHighcharts's series direct data is an array, and we just need to push the array of temperatures obtained by JSON into a new array to get the job done.

    var zero = [];
    $.getjson ('/api/v1/?format=json ', function (JSON) {
        $.each (JSON, function (key, Val) {
            Zero.push ( val.temperature);
        };

To start by defining an empty array of zero, if you get the '/api/v1/?format=json ' this JSON data to succeed, the variable JSON is the one that stores the JSON data each of the key corresponds to the key,val corresponding to the value, The temperature value is stored in zero and then placed in the above data. A simple contrast (reprinted from Phodal ' s Blog)

           Series: [{
                name: ' This month ',
                Data:zero
            }, {
                name: ' Contrast ',
                data: [26.0]
            }]

Real-time RefreshLet's say we write the drawtemp () function, 5000ms refresh, and that is:

$ (document). Ready (function () {
     
      setinterval ("drawtemp ();", 5000);
});

The effect is as shown in the figure
Plus jquery Mobile is super bull power.