ColumnChart déplacer mois à l'axe x fourni JSON

Question

considérant

POST ORIGINAL:

J'ai créé un violon pour montrer comment mes données provient de JSON et rend dans un ColumnChart.

https://jsfiddle.net/w4dokdt9/3/

Mon JSON est plus comme ceci:

[{"lPlusScoreID":1,"jan":60.03,"feb":43.57,"mar":48.55}, 
{"lPlusScoreID":2, "jan":89.42,"feb":85.71,"mar":90.46}, 
{"lPlusScoreID":3,"jan":86.22,"feb":90.61,"mar":89.53}] 

Le tableau de la colonne est comme ceci:

Mon objectif est le mois à travers l'axe des x et produit en tant que colonne /bar.

Comment puis-je accomplir ceci? Je préfère un graphique, une méthode ou une option de configuration Google Visualization.

Coder pour transformer les données serait OK si c'est le seul moyen, mais je ne suis pas à la phase de développement.

Merci beaucoup, comme toujours!

ÉDITÉ POST:

J'ai finalement utilisé le code ci-dessous.

1. Créé dataArray_input avec des mois codés en dur et qu'il remplit avec les données de JSON d'origine.

2. Transposée dataArray_input en utilisant la fonction transposeArray() dans dataArray_trans.

   function transposeArray(a) { 
   return Object.keys(a[0]).map(function (c) { 
       return a.map(function (r) { 
        return r[c]; 
       }); 
   }); } 
   

3. Append dataArray_trans en utilisant la fonction appendArray() à la finale dataArray_output qui est ensuite utilisé par l'API Google

   function appendArray(a, b) { 
   for (var i = 0; i < a.length; i++) { 
       b.push(a[i]); 
   } } 
   

est en dessous du code final.

Je voudrais recevoir quelques commentaires pour m'assurer que j'apprends de la bonne façon et dans la bonne direction. Nouveau à ce genre de choses.

Merci également à @WhiteHat pour répondre si rapidement, aussi avec une bonne solution.

// Load the Visualization API and the corechart package. 
 
google.charts.load('current', { 
 
    'packages': ['corechart', 'table', 'gauge', 'controls'] 
 
}); 
 

 
// Set a callback to run when the Google Visualization API is loaded. 
 
google.charts.setOnLoadCallback(gChart0); 
 

 
function gChart0() { 
 
    drawChartXYZ(); 
 
}; 
 

 

 
/*-----------------------------------------------------------------------------*/ 
 
// Remove Duplicates in singleDimensionalArray 
 
//-----------------------------------------------------------------------------*/ 
 
function onlyUnique(value, index, self) { 
 
    return self.indexOf(value) === index; 
 
} 
 

 
/*-----------------------------------------------------------------------------*/ 
 
// Transpose Array 
 
/* Source1: https://jsfiddle.net/w4dokdt9/6/ 
 
    Source2: http://geniuscarrier.com/transpose-in-javascript/ 
 
    Call:  a = array to transpose 
 
-------------------------------------------------------------------------------*/ 
 
function transposeArray(a) { 
 
    return Object.keys(a[0]).map(function (c) { 
 
     return a.map(function (r) { 
 
      return r[c]; 
 
     }); 
 
    }); 
 
} 
 

 
/*-----------------------------------------------------------------------------*/ 
 
// Append Array 
 
/* Source1: https://davidwalsh.name/combining-js-arrays 
 
    Call:  a = source, b = destination "a onto b" 
 
-------------------------------------------------------------------------------*/ 
 
function appendArray(a, b) { 
 
    for (var i = 0; i < a.length; i++) { 
 
     b.push(a[i]); 
 
    } 
 
} 
 

 
/*-----------------------------------------------------------------------------*/ 
 
// Google Function 
 
//-----------------------------------------------------------------------------*/ 
 
function drawChartXYZ() { 
 

 
    //var urlString = '../mps/forecastVols' + urlParameter1 + urlParameter1_Value; 
 
    //var urlString_temp = 'https://jsonplaceholder.typicode.com/users'; 
 
    var urlString_temp = 'https://httpbin.org/get';  //source: https://resttesttest.com/ 
 

 
    $.ajax({ 
 
     type: 'GET', 
 
     dataType: 'json', 
 
     contentType: "application/json", 
 
     //url: urlString, 
 
     url: urlString_temp, 
 
     success: function (result) { 
 

 
      //Manually loaded "result" with JSON that normally comes from "urlString". 
 
      result = [{"name":"Sensor","techName":"GS_SI","p1":305901.00,"p2":343653.00,"p3":414684.00,"p4":324323.00,"p5":366401.00,"p6":369596.00,"p7":273567.00,"p8":407767.00,"p9":396620.00,"p10":434000.00,"p11":392000.00,"p12":336000.00,"p13":420000.00,"p14":378000.00,"p15":434000.00,"p16":420000.00,"p17":420000.00,"p18":434000.00,"p19":336000.00,"p20":434000.00,"p21":406000.00,"p22":0.00,"p23":0.00,"p24":0.00,"p25":358884.00,"p26":335730.00,"p27":358884.00,"p28":347307.00,"p29":358884.00,"p30":347307.00,"p31":361409.00,"p32":361409.00,"p33":349751.00,"p34":361409.00,"p35":349751.00,"p36":361409.00,"p37":0.00,"p38":0.00,"p39":0.00,"p40":0.00,"p41":0.00,"p42":0.00,"p43":0.00,"p44":0.00,"p45":0.00,"p46":0.00,"p47":0.00,"p48":0.00,"id":2,"b1":null,"b2":null}]; \t \t \t 
 
\t \t \t 
 
      //Declare Array Variables 
 
      var dataArray_ID = [];   //ID List 
 
      var dataArray_input = [];  //Input 
 
      var dataArary_trans = [];  //Transpose 
 
      var dataArray_output = [];  //Output 
 

 
      //Unique product ID's from JSON result 
 
      $.each(result, function (j, obj) { 
 
       dataArray_ID.push([ 
 
        obj.id 
 
       ]); 
 
      }); 
 
      dataArray_ID.filter(onlyUnique); 
 

 
      //Loop for each ID: Input, Transpose, Output 
 
      for (var j = 0; j < dataArray_ID.length; ++j) { 
 

 
       dataArray_input = []; 
 
       dataArray_input.push([ 
 
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
 
       ]); 
 

 
       //Input Array 
 
       $.each(result, function (i, obj) { 
 
        if (obj.id == dataArray_ID[j]) { 
 
         dataArray_input.push([ 
 
          //"Line ID", 
 
          obj.id, 
 
          obj.id, obj.id, obj.id, obj.id, obj.id, obj.id, 
 
          obj.id, obj.id, obj.id, obj.id, obj.id 
 
         ]); 
 
         dataArray_input.push([ 
 
          //"Prod CY", 
 
          obj.p1, //JAN_CY 
 
          obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, 
 
          obj.p8, obj.p9, obj.p10, obj.p11, obj.p12 
 
         ]); 
 
         dataArray_input.push([ 
 
          //"BP CY", 
 
          obj.p25, //JAN_CY_BP 
 
          obj.p26, obj.p27, obj.p28, obj.p29, obj.p30, obj.p31, 
 
          obj.p32, obj.p33, obj.p34, obj.p35, obj.p36 
 
         ]); 
 
         dataArray_input.push([ 
 
          //"Prod CY+1", 
 
          obj.p13, //JAN_CYPLUS1 
 
          obj.p14, obj.p15, obj.p16, obj.p17, obj.p18, obj.p19, 
 
          obj.p20, obj.p21, obj.p22, obj.p23, obj.p24 
 
         ]); 
 
         dataArray_input.push([ 
 
          //"BP CY+1", 
 
          obj.p37, //JAN_CYPLUS1_BP 
 
          obj.p38, obj.p39, obj.p40, obj.p41, obj.p42, obj.p43, 
 
          obj.p44, obj.p45, obj.p46, obj.p47, obj.p48 
 
         ]); 
 
        } //END if 
 
       }); //END $.each(result, function (i, obj) { 
 
      }; //END for (var j = 0; j < dataArray_ID.length; ++j) { 
 

 
      //Transpose Array 
 
      dataArray_trans = transposeArray(dataArray_input); 
 

 
      //Append Array to Output 
 
      appendArray(dataArray_trans, dataArray_output); 
 

 
      //Create DataTable 
 
      var data = new google.visualization.DataTable(); 
 

 
      //Add Columns 
 
      data.addColumn('string', 'Month');//0 
 
      data.addColumn('number', 'Line ID');//1 
 
      data.addColumn('number', 'Prod CY');//2 
 
      data.addColumn('number', 'BP CY');//3 
 
      data.addColumn('number', 'Prod CY+1');//4 
 
      data.addColumn('number', 'BP CY+1');//5 
 

 
      data.addRows(dataArray_output); 
 

 
      //Create Data View 
 
      var viewFilter = new google.visualization.DataView(data); 
 
      viewFilter.setColumns([0, 1, 2, 3, 4, 5]); 
 
      viewFilter.setRows(viewFilter.getFilteredRows([{ column: 1, value: 2 }])); 
 
    
 
      var viewTable = new google.visualization.DataView(viewFilter); 
 
      viewTable.setColumns([0, 2, 3, 4, 5]); 
 

 
      var viewChart1 = new google.visualization.DataView(viewFilter); 
 
      viewChart1.setColumns([0, 2, 3]); 
 
\t \t 
 
      //Options 
 
      var optionsTable = { 
 
      }; 
 

 
      var optionsChart1 = { 
 
       title: 'Volume Development - CY', 
 
       vAxis: { 
 
        title: 'Volume', 
 
        minValue: '0' 
 
       }, 
 
       series: { 
 
        0: { type: 'bars' }, //Prod CY 
 
        1: { type: 'line' }, //BP CY 
 
       } 
 
      }; 
 

 
      //Instantiate and draw chart, passing in options. 
 
      var table = new google.visualization.Table(document.getElementById('table_div')); 
 
      table.draw(viewTable, optionsTable); 
 

 
      var chart1 = new google.visualization.ComboChart(document.getElementById('div_chart1')); 
 
      chart1.draw(viewChart1, optionsChart1); 
 

 
     } //END success: function (result) { 
 
    }); //END $.ajax({ 
 
} //END function drawChart()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div id="table_div"></div> 
 
<hr /> 
 
<div id="div_chart1"></div>

Answer 1

avec des cartes Google, il est dans la façon dont les données sont transmises au tableau

il y a data manipulation methods pour group() et join()
mais pas pivoter des colonnes à des lignes , etc ...

pour le graphique demandé, les données devront être structurées comme suit ...

['month', 'Product1', 'Product2'] 
['jan', 60.03, 89.42] 
['feb', 43.57, 85.71] 

voir ci-dessous extrait de travail ...

la table de données est créée avec une seule colonne pour le mois
une nouvelle colonne est ajoutée pour chaque "lPlusScoreID"

méthode de la table de données getFilteredRows est utilisé pour voir si le mois a déjà été ajouté en tant que ligne
si c'est le cas, la ligne est mise à jour
sinon, une nouvelle ligne est ajoutée

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var jsonData = [ 
 
    {"lPlusScoreID":1, "jan":60.03, "feb":43.57, "mar":48.55}, 
 
    {"lPlusScoreID":2, "jan":89.42, "feb":85.71, "mar":90.46}, 
 
    {"lPlusScoreID":3, "jan":86.22, "feb":90.61, "mar":89.53} 
 
    ]; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Month'); 
 

 
    // build data 
 
    jsonData.forEach(function (row) { 
 
    var colIndex; 
 
    var rowIndex; 
 

 
    // process each key in the row object 
 
    Object.keys(row).forEach(function (key) { 
 
     // add column for ID 
 
     if (key === 'lPlusScoreID') { 
 
     colIndex = data.addColumn('number', 'Product' + row.lPlusScoreID.toString()); 
 
     return; 
 
     } 
 

 
     // find/add row for month 
 
     rowIndex = getRowIndex(key); 
 
     if (rowIndex === null) { 
 
     rowIndex = data.addRow(); 
 
     data.setValue(rowIndex, 0, key); 
 
     } 
 
     data.setValue(rowIndex, colIndex, row[key]); 
 
    }); 
 
    }); 
 

 
    function getRowIndex(rowMonth) { 
 
    var rowIndex = data.getFilteredRows([{ 
 
     column: 0, 
 
     value: rowMonth 
 
    }]); 
 
    if (rowIndex.length > 0) { 
 
     return rowIndex[0]; 
 
    } 
 
    return null; 
 
    } 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>