web-dev-qa-db-fra.com

Comment rafraîchir le graphique à barres JQPLOT sans redessiner le graphique

J'ai un tableau de barres JQplot et je souhaite que les données de graphique soient modifiées lorsque l'utilisateur modifie la valeur dans une liste déroulante. Cela fonctionne, mais le problème est le graphique à barres redessinant, une sur une autre, chaque fois que l'utilisateur modifie les valeurs.

Comment puis-je mettre à jour ou recharger les barres sans plus de tirer le tout? Y a-t-il une valeur de propriété à définir?

Tableau des données change en fonction d'un appel AJAX:

$.ajax({
    url: '/Home/ChartData',
    type: 'GET',
    data: { Id: Id },
    dataType: 'json',
    success: function (data) {
        $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
}});

function CreateBarChartOptions(xAxis) {
    var optionsObj = {
        title: 'Stat',
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: xAxis
            },
            yaxis: { min: 0 }
        },
        series: [{ label: 'A' }, { label: 'B'}],

        seriesDefaults: {
            shadow: true,
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 8,
                barMargin: 10
            }
        },

    };
    return optionsObj;
}

Une réponse serait très appréciée. Merci.

jquery-pluginsrefreshreloadbar-chartjqplot
19
Umesha Gunasinghe

Ce que vous voulez faire, c'est appeler la méthode de la version de JQPlot () lorsque vous dessinez la nouvelle carte. Changez votre appel Ajax pour ressembler à ceci:

$.ajax({
        url: '/Home/ChartData',
        type: 'GET',
        data: { Id: Id },
        dataType: 'json',
        success: function (data) {

            $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot();
        }});
26
stantonk

Essayez d'avoir votre objet graphique en tant que variable globale dans votre script comme suit:

var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));

Ensuite, sur le succès, réinitialisez les données, axesscale et repliez comme suit:

var newData = [['a',1],['b',2],['c',3]]; 
plot1.series[0].data = newData; 
plot1.resetAxesScale(); 
plot1.replot();

Réf: https://groups.google.com/group/jqplot-utilisateurs/browse_thread/thread/59df82899617242b?pli=1

13
Luis

Chaque fois avant de redéfinir le graphique, détruisez simplement l'existant1.

$.ajax({
    url: '/Home/ChartData',
    type: 'GET',
    data: { Id: Id },
    dataType: 'json',
    success: function (data) {
        if(plot)
        {
           plot.destroy();
         }
        var plot=$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
}});
8
Shivanand Darur

Voici un exemple complet de la mise à jour de manière dynamique de la parcelle avec de nouvelles données sans recharger la page:

    <div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
    <button>New data point</button>

    <script type="text/javascript">
    var storedData = [3, 7];

    var plot1;
    renderGraph();

    $('button').click( function() {
        doUpdate();
    });

    function renderGraph() {
        if (plot1) {
            plot1.destroy();
        }
        plot1 = $.jqplot('chart1', [storedData]);
    }

    function doUpdate() {
        var newVal = Math.random();
        storedData.Push(newVal);
        renderGraph();
    }
    </script>

C'est une version simplifiée de la poste de ce type: Tableau de rafraîchissement automatique JQPLOT avec Données AJAX dynamiques

2
pkout

M'a pris un certain temps pour trouver une réponse pour les données générées du script, alors je vais publier ici ici. J'ai utilisé une combinaison du code ci-dessus.

J'ai créé un Var global, nommé tracé3 dans mon fichier de script. Puis créé la fonction ci-dessous. Lorsque cela s'appelle avec une redraw booléen, elle détermine si je dois détruire et redessiner ou dessiner pour la première fois.

Le premier bit de code obtient des données de mon JQGrid (qui est mise à jour dans une fonction différente) et met à jour les tableaux. Le deuxième bit, détermine mes tiques d'intervalle, sur l'axe des x dépendant de ma longueur de données.

function DrawGraph(bRedraw){
      var testTimes = [];
      testTimes = $('#polarizationTable').jqGrid('getCol', 'TestTime', testTimes, false);
      var RdgA = $('#polarizationTable').jqGrid('getCol', 'RdgA', RdgA, false);
      var RdgB = $('#polarizationTable').jqGrid('getCol', 'RdgB', RdgB, false); 

      var readingLineA = []; 
      for (var i=0; i<testTimes.length; i++){ 
         readingLineA.Push([testTimes[i], RdgA[i]]); 
      }

      var readingLineB = []; 
      for (var i=0; i<testTimes.length; i++){ 
         readingLineB.Push([testTimes[i], RdgB[i]]); 
      }

     var maxX = $("#testLength").val();
     var lengthX = testTimes.length;
     var tickIntervalX = Math.round(maxX/10);
     if(bRedraw == true)
     {
         plot3.destroy();
         bRedraw = false;
     }
     if(bRedraw == false)
     {
         plot3 = $.jqplot('chart3', [readingLineA, readingLineB], 
         { 
          title:'Graph',
          series:[{label:'Reading - A'}, {label:'Reading - B'}  ],
          legend:{show:true, location:'se'},
          // You can specify options for all axes on the plot at once with
          // the axesDefaults object.  Here, we're using a canvas renderer
          // to draw the axis label which allows rotated text.
          axes:{
            xaxis:{
              label:'Minutes',
              syncTicks: true,
              min: 0,
              numberTicks: 10,
              tickInterval: tickIntervalX,
              max: maxX*1.1,
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                fontSize: '12pt'
              },
            },
            yaxis:{
              label:'Data',
              min: 0,
              numberTicks: 10,
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                fontSize: '12pt'
              }
            },
          }
      });
     }
}
2
MTAG11

$ ('# graphique) .html (' ');

le graphique est le DIV où la carte est créée.

cela fait l'affaire, rien de fantaisie en efficace.

2
Hemant.Gupta

Peut-être que cela aidera. D'autre part, j'ai un problème d'obtention du remplissage du tout, mais je suis à l'aide d'un datarender.

$.ajax({
    url: '/Home/ChartData',
    type: 'GET',
    data: { Id: Id },
    dataType: 'json',
    success: function (data) {

        $('chartDiv').empty();
        $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
    }});
1
Mikael

j'espère que cela t'aides

jQuery(document).ready(function(){
   jQuery.ajax({
    url: '/review_graphs/show',
    type: 'GET',

    success: function (data) {

        var plot1 = jQuery.jqplot('chartDiv', [data,data],
  {
    title: 'Bianual Reviews percentage',
    series:[
      {
        renderer:jQuery.jqplot.BarRenderer,
        label:'Average',
        stackSeries: true,
        dragable: {color: '#ff3366',constrainTo: 'x'},
        trendline:{show: false}
      },
      {
        label:'Trend Line',trendline:{show: false}}
      ],
    legend: {
            show: true,
            placement: 'outsideGrid'
        },
    axesDefaults: {
        tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -30,
          fontSize: '10pt'
        }
    },
    axes: {
      xaxis: {
        renderer: jQuery.jqplot.CategoryAxisRenderer
      }
    }
  });
    }});

  });
1
Hira