2013-04-07 7 views
7

che sto cercando di utilizzare Chart API di Google: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchartCrea Google Grafico matrice di tabella i dati da due array

Ho due matrici che mi piacerebbe usare per generare ed etichettare la visualizzazione. Tuttavia, non riesco a trovare un modo per combinare e convertire questi array nella struttura dell'oggetto corretta.

mie array sono i seguenti ed i loro contenuti sono accanto a loro:

years; // 2014,2015,2020,2021 
sales; // 100,100,200,100 

devo usare per dinamicamente questi array per formare questo oggetto, che è nel formato API di Google utilizza:

var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales'], 
      ['2014', 100], 
      ['2015', 100], 
      ['2020', 200], 
      ['2021', 100] 
     ]); 

Grazie per qualsiasi aiuto.

risposta

18

È necessario utilizzare addColumn e addRow in un ciclo for per passare attraverso gli array.

Ecco un esempio:

function drawVisualization() { 
    // Create and populate the data table. 
    var years = ['2001', '2002', '2003', '2004', '2005']; 
    var sales = [1, 2, 3, 4, 5]; 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'years'); 
    data.addColumn('number', 'sales'); 

    for(i = 0; i < years.length; i++) 
    data.addRow([years[i], sales[i]]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {}); 
} 
0

seguito è il codice completo di dati riempimento separati.

<?php 

function testing($chartId, $chartFunc, $chartTitle, $xAxisTitle, $chartData, $chartType) 
{ 
$pageMeat =<<<EOD 
<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback($chartFunc); 
function $chartFunc() { 
var data = google.visualization.arrayToDataTable($chartData); 

var options = { 
title: '$chartTitle', 
hAxis: {title: '$xAxisTitle', titleTextStyle: {color: 'red'}} 
}; 
EOD; 

if($chartType == "line") { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.LineChart(document.getElementById('$chartId')); 
EOD; 
} 
else if($chartType == "pie") { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.PieChart(document.getElementById('$chartId')); 
EOD; 
} 
else { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.ColumnChart(document.getElementById('$chartId')); 
EOD; 
} 
$pageMeat .=<<<EOD 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<div id="$chartId" style="width: 900px; height: 500px;"></div> 
</body> 
</html> 
EOD; 
echo $pageMeat; 
} 

$gChartId = "vertColumns"; 
$gChartFn = "columnChart"; 
$gChartTitle = "Company Performance"; 
$gXAxisTitle = "Year"; 

$gChartData[] = array('Year', 'Sales', 'Expenses'); 
$gChartData[] = array('2004', 1000, 400); 
$gChartData[] = array('2005', 1170, 460); 
$gChartData[] = array('2006', 660, 1120); 
$gChartData[] = array('2007', 1030, 540); 

testing($gChartId, $gChartFn, $gChartTitle, $gXAxisTitle, json_encode($gChartData), "column"); 
?>