mardi 4 août 2015

Put a js function inside a jQuery function

I've been working so hard to make a chart render automatically but now I've come to the situation where all the previously prepared data is not being useful.

I'm passing to a js chile some user data in order to render a chart...then I do some extra treatment in javascript to finish with the data preparation. I'm using a template which has a predefined way of showing the chart.

This is what I've done so far:

 if ($('#interactive-chart').length !== 0) {
   var previous = '';         
   var usersData = data['periodicity'];
   var months = [[1,0], [2,0], [3,0], [4,0], [5,0], [6,0], [7,0], [8,0], [9,0], [10,0], [11,0], [12,0], [13,0]];
   var overlapped = months.slice();
   var monthConn = [];

   for (var i = 0; i < usersData.length; i++) {
     var user = usersData[i].vusr_user;
     if (usersData[i].yearly == currentYear) {
       if (user !== previous) {
         previous = user;
         if (i !== 0) {
           monthConn.forEach(function(monthData){
           overlapped[monthData[0]-1][1] = monthData[1];
         });

         var overlapped = months.slice();
         var monthConn = []; 
       }
       monthConn.push([usersData[i].month, usersData[i].count]); 
     }else{
     monthConn.push([usersData[i].month, usersData[i].count]); 
    }
  };                            
 };

Next to that there is this jQuery predefined function:

$.plot($("#interactive-chart"), [{
    data: data1,
    label: "Page Views",
    color: blue,
    lines: {
      show: true,
      fill: false,
      lineWidth: 2
    },
    points: {
      show: true,
      radius: 3,
      fillColor: '#fff'
    },
    shadowSize: 0
  }, {
    data: data2,
    label: 'Visitors',
    color: green,
    lines: {
      show: true,
      fill: false,
      lineWidth: 2
    },
    points: {
      show: true,
      radius: 3,
      fillColor: '#fff'
    },
    shadowSize: 0
  }],

  {
    xaxis: {
      ticks: xLabel,
      tickDecimals: 0,
      tickColor: '#ddd'
    },
    yaxis: {
      ticks: 10,
      tickColor: '#ddd',
      min: 0,
      max: 200
    },
    grid: {
      hoverable: true,
      clickable: true,
      tickColor: "#ddd",
      borderWidth: 1,
      backgroundColor: '#fff',
      borderColor: '#ddd'
    },

    legend: {
      labelBoxBorderColor: '#ddd',
      margin: 10,
      noColumns: 1,
      show: true
    }
  }
);

and I wish to pass the data from my function (the 1st one I wrote) to the second on where it says "data1", "data2"...

How am I suppose to do that?

Aucun commentaire:

Enregistrer un commentaire