Foros del Web » Programando para Internet » Jquery »

crear un grafico de manera dinamica

Estas en el tema de crear un grafico de manera dinamica en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/09/2016, 14:05
 
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.                         });

Etiquetas: dinamica, grafico, manera
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:39.