Tema: crear un grafico de manera dinamica
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/09/2016, 14:05
matt_1985
 
Fecha de Ingreso: enero-2011
Ubicación: /root
Mensajes: 530
Antigüedad: 13 años, 3 meses
Puntos: 61
crear un grafico de manera dinamica
Intento crear un grafico de forma dinamica con el siguiente ciclo, los div me los crea dinamicamente pero el grafico no, los graficos se cargan segun el id del div creado:

Código Javascript: 
Ver original
  1. var k = 0;
  2.                         var elementoDiv = "";
  3.                         var chart = [];
  4.  
  5.                         $.each(Subtitles, function(index, val)
  6.                         { 
  7.                             elementoDiv += "<div id=layout"+k+" class=F></div>";
  8.  
  9.                             $('div.col-md-8').eq(1).html(elementoDiv);
  10.  
  11.                            AmCharts.makeChart("layout"+k,
  12.                             {
  13.                                 "type": "serial",                                           
  14.                                 "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
  15.                                 "categoryField": "category",
  16.                                 "columnWidth": 0.5 ,
  17.                                 "rotate": false,
  18.                                 "startDuration": 0,
  19.                                 "autoMargins": true,
  20.                                 "marginBottom": 70,
  21.                                 "marginLeft": 50,
  22.                                 "marginRight": 50,
  23.                                 "marginTop": 0,
  24.                                 "colors": [
  25.                                     "#BBD204","#DC606E"
  26.                                 ],
  27.                                 "decimalSeparator": ",",
  28.                                 "categoryAxis": {
  29.                                     "gridPosition": "start",
  30.                                     "autoWrap": true,
  31.                                     "gridColor": "#FFFFFF",
  32.                                     "axisAlpha": 0,
  33.                                     "fontSize": 12,
  34.                                 },
  35.                                 "trendLines": [],
  36.                                 "graphs": [
  37.                                     {
  38.                                         "bullet": "none",   
  39.                                         "balloonText": "[[title]] [[category]]:[[value]]",
  40.                                         "fillAlphas": 1,
  41.                                         "id": "AmGraph-1",
  42.                                         "labelOffset": -20,
  43.                                         "labelPosition": "bottom",
  44.                                         "labelText": "[[value]]",
  45.                                         "minBulletSize": 6,
  46.                                         "title": "6 a 7",
  47.                                         "type": "column",
  48.                                         "valueField": "column-1",   
  49.                                         "fontSize": 14,                                                     
  50.                                     },
  51.                                     {
  52.                                         "bullet": "none",
  53.                                         "balloonText": "[[title]] [[category]]:[[value]]",
  54.                                         "fillAlphas": 1,
  55.                                         "id": "AmGraph-2",
  56.                                         "labelPosition": "bottom",
  57.                                         "labelOffset": -2,
  58.                                         "labelText": "[[value]]",
  59.                                         "title": "1 a 4",
  60.                                         "type": "column",
  61.                                         "valueField": "column-2",
  62.                                         "color": "#FFFFFF",
  63.                                         "fontSize": 14,
  64.                                     },
  65.                                     {
  66.                                         "id": "AmGraph-3","bullet": "round",
  67.                                         "bulletColor": "#003673",
  68.                                         "bulletSize": 10,                                           
  69.                                         "labelText": "[[value]]",
  70.                                         "lineColor": "#088A08",
  71.                                         "title": "Neto",
  72.                                         "valueField": "column-3",
  73.                                         "color": "#FFFFFF",
  74.                                         "fontSize": 14, 
  75.                                         "labelPosition": "bottom",
  76.                                     }
  77.                                 ],
  78.                                 "valueAxes": [
  79.                                     {
  80.                                         "id": "ValueAxis-1",
  81.                                         "stackType": "regular",
  82.                                         "title": "",
  83.                                         "gridColor": "#000000",
  84.                                         "gridAlpha": 0,
  85.                                         "unit": "%",
  86.                                         "gridAlpha": 1,
  87.                                         "gridThickness": 0,
  88.                                         "minorGridAlpha": 1,
  89.                                         "labelFrequency": 1,
  90.                                     }
  91.                                 ],
  92.                                 "balloon": {},
  93.                                 "legend": {
  94.                                     "useGraphSettings": true,
  95.                                     "align": "right",
  96.                                     "position": "top",
  97.                                     "fontSize": 14,
  98.                                 },
  99.                                 "titles": [
  100.                                     {
  101.                                         "id": "Title-1",
  102.                                         "size": 12,
  103.                                         "text": "titulo",   
  104.                                     }
  105.                                 ],
  106.                                 "dataProvider": [
  107.                                         {
  108.                                             "category": "201607 (N°242)", 
  109.                             
  110.                                             "column-1": "38.84",
  111.                                             "column-2": "-42.56",
  112.                                             "column-3": "-3.72"
  113.                                         
  114.                                         },
  115.                                     
  116.                                         {
  117.                                             "category": "201608 (N°8)", 
  118.                             
  119.                                             "column-1": "12.50",
  120.                                             "column-2": "-62.50",
  121.                                             "column-3": "-50.00"
  122.                                         
  123.                                         },
  124.                                 ]
  125.                             }
  126.                         );
  127.  
  128.                            k++;
  129.                         });