2016-03-31 1 views
0

Я пытаюсь создать диаграмму с использованием флюгерных диаграмм, я использую запрос AJAX для получения данных, а ниже - то, как я генерирую диаграмму.Установка набора данных fusioncharts через AJAX

Моя проблема заключается в том, что слияние диаграмм нужно увидеть, например, «значение»: «1», где, как мне нужно, чтобы иметь возможность использовать «0»: «1» из-за моего PHP ниже

Мой PHP сценарий, чтобы получить логины за каждый час вчера и сегодня

$yesterdays_date = new datetime(date('d.m.Y',strtotime("-1 days"))); 

$query = "SELECT DATE(login_date) as date, HOUR(login_date) as hour, COUNT(*) as logins FROM logins WHERE login_date >= '".$yesterdays_date->format('Y-m-d')."' GROUP BY DATE(login_date), HOUR(login_date)"; 

//storing the result of the executed query 
$result = $conn->query($query); 

//initialize the array to store the processed data 
$jsonArray = array(); 


$array = array(
    'today' => array(
    "seriesname" => "Logins Yesterday", 
    "data" => array(
    '0' => 0, 
    '1' => 0, 
    '2' => 0, 
    '3' => 0, 
    '4' => 0, 
    '5' => 0, 
    '6' => 0, 
    '7' => 0, 
    '8' => 0, 
    '9' => 0, 
    '10' => 0, 
    '11' => 0, 
    '12' => 0, 
    '13' => 0, 
    '14' => 0, 
    '15' => 0, 
    '16' => 0, 
    '17' => 0, 
    '18' => 0, 
    '19' => 0, 
    '20' => 0, 
    '21' => 0, 
    '22' => 0, 
    '23' => 0, 
    ), 
    ), 
    'yesterday' => array(
    "seriesname" => "Logins Today", 
    "renderAs" => "line", 
    "showValues" => "0", 
    "data" => array( 
    '0' => 0, 
    '1' => 0, 
    '2' => 0, 
    '3' => 0, 
    '4' => 0, 
    '5' => 0, 
    '6' => 0, 
    '7' => 0, 
    '8' => 0, 
    '9' => 0, 
    '10' => 0, 
    '11' => 0, 
    '12' => 0, 
    '13' => 0, 
    '14' => 0, 
    '15' => 0, 
    '16' => 0, 
    '17' => 0, 
    '18' => 0, 
    '19' => 0, 
    '20' => 0, 
    '21' => 0, 
    '22' => 0, 
    '23' => 0, 
    ), 
    ), 
); 

//check if there is any data returned by the SQL Query 
if ($result->num_rows > 0) { 
    //Converting the results into an associative array 
    while($row = $result->fetch_assoc()) { 

    if($row['date'] == $yesterdays_date->format('Y-m-d')){ 
     //- Yesterdays data 
     $array['yesterday']['data'][$row['hour']] = $row['logins']; 

    }else{ 
     //- Todays data 
     $array['today']['data'][$row['hour']] = $row['logins']; 

    } 


    //$jsonArrayItem = array(); 
    //$jsonArrayItem['date'] = $row['date']; 
    //$jsonArrayItem['hour'] = $row['hour']; 
    //$jsonArrayItem['logins'] = $row['logins']; 

    //append the above created object into the main array. 
    //array_push($jsonArray, $jsonArrayItem); 
    } 
} 




//set the response content type as JSON 
header('Content-type: application/json'); 
//output the return value of json encode using the echo function. 
echo json_encode($array);. 

Мои данные возвращенного из PHP сценария

enter image description here

Мой JQuery, чтобы создать диаграмму сравнения Yesterdays логины с сегодняшнего дня

function getLogins(){  
    $.ajax({ 
     url: '/ajax/getLoginsToday.php', 
     type: 'GET', 
     success: function(data){ 

     var chartProperties = { 
     "caption": "Product-wise quarterly revenue Vs profit in last year", 
     "subCaption": "Harry's SuperMart", 
     "xAxisname": "Quarter", 
     "yAxisName": "Login Total", 
     "paletteColors": "#0075c2,#1aaf5d,#f2c500", 
     "bgColor": "#ffffff", 
     "borderAlpha": "20", 
     "showCanvasBorder": "0", 
     "usePlotGradientColor": "0", 
     "plotBorderAlpha": "10", 
     "legendBorderAlpha": "0", 
     "legendShadow": "0", 
     "legendBgAlpha": "0", 
     "valueFontColor": "#ffffff", 
     "showXAxisLine": "1", 
     "xAxisLineColor": "#999999", 
     "divlineColor": "#999999", 
     "divLineDashed": "1", 
     "showAlternateHGridColor": "0", 
     "subcaptionFontBold": "0", 
     "subcaptionFontSize": "14", 
     "showHoverEffect": "1" 
     }; 
     apiChart = new FusionCharts({ 
     type: 'stackedcolumn2dline', 
     renderAt: 'chartContainer', 
     width: '550', 
     height: '350', 
     dataFormat: 'json', 
     dataSource: { 
      "chart": chartProperties, 
      "categories": [ 
       { 
        "category": [ 
         { 
          "label": "00-01" 
         }, 
         { 
          "label": "01-02" 
         }, 
         { 
          "label": "02-03" 
         }, 
         { 
          "label": "03-04" 
         }, 
         { 
          "label": "04-05" 
         }, 
         { 
          "label": "05-06" 
         }, 
         { 
          "label": "06-07" 
         }, 
         { 
          "label": "07-08" 
         }, 
         { 
          "label": "08-09" 
         }, 
         { 
          "label": "09-10" 
         }, 
         { 
          "label": "10-11" 
         }, 
         { 
          "label": "11-12" 
         }, 
         { 
          "label": "12-13" 
         }, 
         { 
          "label": "13-14" 
         }, 
         { 
          "label": "14-15" 
         }, 
         { 
          "label": "15-16" 
         }, 
         { 
          "label": "16-17" 
         }, 
         { 
          "label": "17-18" 
         }, 
         { 
          "label": "18-19" 
         }, 
         { 
          "label": "19-20" 
         }, 
         { 
          "label": "20-21" 
         }, 
         { 
          "label": "21-22" 
         }, 
         { 
          "label": "22-23" 
         }, 
         { 
          "label": "23-24" 
         }       
        ] 
       } 
      ], 
      "dataset": [ 
       { 
        "seriesname": "Logins Yesterday", 
        "data": data 
       }, 
       { 
        "seriesname": "Logins Today", 
        "renderAs": "line", 
        "showValues": "0", 
        "data": [ 
         { 
          "value": "24000" 
         }, 
         { 
          "value": "45000" 
         }, 
         { 
          "value": "23000" 
         }, 
         { 
          "value": "38000" 
         } 
        ] 
       } 
      ] 
     } 
     }); 
     apiChart.render(); 
     } 
    }); 
    } 

В моем блоке успеха JQuery AJAX выше вы можете видеть, я пытаюсь установить набор данных с помощью данных AJAX, но FusionCharts должен см. «значение»: «1» , тогда как мои данные форматируются как «0»: «1», «23»: «4».

Какое у меня лучшее решение, чтобы получить его в формате, который требуется для фьюжн-карт?

ответ

2

Вы можете попробовать Array.map().

Код выше позволит вам преобразовать это:

[15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10]

к этому:

[{"value":15},{"value":15},{"value":16},{"value":17},{"value":18},{"value":19},{"value":20},{"value":21},{"value":22},{"value":25},{"value":30},{"value":32},{"value":28},{"value":15},{"value":14},{"value":15},{"value":15},{"value":10},{"value":8},{"value":7},{"value":8},{"value":9},{"value":10},{"value":10}] 

Объяснение:

var yesterdayData = [15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10]; 
var yesterday = []; // Declare a new variable to expose the results in the graph. 

yesterdayData.map(function(x) { // x contains the current value. 
    yesterday.push({"value": x}); // For every item in the array, push the current value to the yesterday array variable. 
}); 

Что-то вроде этого:

$(function() { 
 
    function getLogins() { 
 
    $.ajax({ 
 
     url: "http://dfjb.webcindario.com/fusioncharts.php", 
 
     type: "GET", 
 
     success: function(data) { 
 
     var yesterdayData = data.yesterday.data; // Data from the server. 
 
     var yesterday = []; 
 
     var todayData = data.today.data; // Data from the server. 
 
     var today = []; 
 

 
     yesterdayData.map(function(x) { 
 
      yesterday.push({ 
 
      "value": x 
 
      }); 
 
     }); 
 

 
     todayData.map(function(x) { 
 
      today.push({ 
 
      "value": x 
 
      }); 
 
     }); 
 

 
     var chartProperties = { 
 
      "caption": "Product-wise quarterly revenue Vs profit in last year", 
 
      "subCaption": "Harry's SuperMart", 
 
      "xAxisname": "Quarter", 
 
      "yAxisName": "Login Total", 
 
      "paletteColors": "#0075c2,#1aaf5d,#f2c500", 
 
      "bgColor": "#ffffff", 
 
      "borderAlpha": "20", 
 
      "showCanvasBorder": "0", 
 
      "usePlotGradientColor": "0", 
 
      "plotBorderAlpha": "10", 
 
      "legendBorderAlpha": "0", 
 
      "legendShadow": "0", 
 
      "legendBgAlpha": "0", 
 
      "valueFontColor": "#ffffff", 
 
      "showXAxisLine": "1", 
 
      "xAxisLineColor": "#999999", 
 
      "divlineColor": "#999999", 
 
      "divLineDashed": "1", 
 
      "showAlternateHGridColor": "0", 
 
      "subcaptionFontBold": "0", 
 
      "subcaptionFontSize": "14", 
 
      "showHoverEffect": "1" 
 
     }; 
 
     var apiChart = new FusionCharts({ 
 
      type: 'stackedcolumn3dline', 
 
      renderAt: 'chartContainer', 
 
      width: '550', 
 
      height: '350', 
 
      dataFormat: 'json', 
 
      dataSource: { 
 
      "chart": chartProperties, 
 
      "categories": [{ 
 
       "category": [{ 
 
       "label": "00-01" 
 
       }, { 
 
       "label": "01-02" 
 
       }, { 
 
       "label": "02-03" 
 
       }, { 
 
       "label": "03-04" 
 
       }, { 
 
       "label": "04-05" 
 
       }, { 
 
       "label": "05-06" 
 
       }, { 
 
       "label": "06-07" 
 
       }, { 
 
       "label": "07-08" 
 
       }, { 
 
       "label": "08-09" 
 
       }, { 
 
       "label": "09-10" 
 
       }, { 
 
       "label": "10-11" 
 
       }, { 
 
       "label": "11-12" 
 
       }, { 
 
       "label": "12-13" 
 
       }, { 
 
       "label": "13-14" 
 
       }, { 
 
       "label": "14-15" 
 
       }, { 
 
       "label": "15-16" 
 
       }, { 
 
       "label": "16-17" 
 
       }, { 
 
       "label": "17-18" 
 
       }, { 
 
       "label": "18-19" 
 
       }, { 
 
       "label": "19-20" 
 
       }, { 
 
       "label": "20-21" 
 
       }, { 
 
       "label": "21-22" 
 
       }, { 
 
       "label": "22-23" 
 
       }, { 
 
       "label": "23-24" 
 
       }] 
 
      }], 
 
      "dataset": [{ 
 
       "seriesname": "Logins Yesterday", 
 
       "data": today // The required data goes here. 
 
      }, { 
 
       "seriesname": "Logins Today", 
 
       "renderAs": "line", 
 
       "showValues": "0", 
 
       "data": yesterday // The required data goes here. 
 
      }] 
 
      } 
 
     }); 
 
     apiChart.render(); 
 
     } 
 
    }); 
 
    } 
 
    getLogins(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script> 
 
<div id="chartContainer">FusionCharts will render here</div>

Надеется, что это помогает.

+0

Это было прекрасно, сработало впервые, очень хорошо объяснено. Спасибо за вашу помощь. Я не думал, что кто-нибудь поймет мой вопрос, но вы решили мою головную боль, уважение. – Kieron606

+0

Добро пожаловать. Я обновил тип 'stackedcolumn3dline'. –

Смежные вопросы