Problème avec Charts rickshaw

Bonjour à tous,

voici mon problème:

J'ai utilisé l'API de Rickshaw (http://code.shutterstock.com/ricksha...roduction.html)

J'ai 2 Arraylist, une contenant les niveaux de batterie (de 0 à 100) et l'autre le timestamp.

J'essai de les insérer dans le var data afin d'afficher un graphe du niveau de batterie avec le niveau de batterie dans l'axe des Y et le temp dans celui des X,
je n'y arrive pas ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<script type="text/javascript">
        var data, graph, i, max, min, point, random, scales, series, _i, _j, _k, _l, _len, _len1, _len2, _ref;
 
        var reg=new RegExp("[,]");
        var tm = ${listeBatterie};
        var ba = ${listeTime};
        var tableauT=tm.toString().split(reg);
        var tableauB=ba.toString().split(reg);
 
        data = [[], []];
 
        for (i = 0; _i < tableauB.length; i = ++_i) {
             data.push([tableauT[i],tableauB[i] ]);
        }
 
        scales = [];
 
        _ref = data[1];
        for (_j = 0, _len = _ref.length; _j < _len; _j++) {
            point = _ref[_j];
            point.y *= point.y;
        }
 
        for (_k = 0, _len1 = data.length; _k < _len1; _k++) {
            series = data[_k];
            min = 0;
            max = 100;
 
            if (_k === 0) {
                scales.push(d3.scale.linear().domain([min, max]).nice());
            } else {
                scales.push(d3.scale.pow().domain([min, max]).nice());
            }
        }
 
        graph = new Rickshaw.Graph({
            element: document.getElementById("chart"),
            renderer: 'line',
            height: 300,
            width: 1000,
            series: [
                {
                    color: 'steelblue',
                    data: data[0],
                    name: 'Series A',
                    scale: scales[0]
                }
            ]
        });
 
        new Rickshaw.Graph.Axis.Y.Scaled({
            element: document.getElementById('axis0'),
            graph: graph,
            orientation: 'left',
            scale: scales[0],
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT
        });
 
        new Rickshaw.Graph.Axis.Y.Scaled({
            element: document.getElementById('axis1'),
            graph: graph,
            grid: false,
            orientation: 'right',
            scale: scales[1],
            tickFormat: Rickshaw.Fixtures.Number.formatKMBT
        });
 
        new Rickshaw.Graph.Axis.Time({
            graph: graph
        });
 
        new Rickshaw.Graph.HoverDetail({
            graph: graph
        });
 
        graph.render();
    </script>

Exemple de ce chart sur leur site

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<script type="text/javascript">
var data, graph, i, max, min, point, random, scales, series, _i, _j, _k, _l, _len, _len1, _len2, _ref;
 
data = [[], []];
 
random = new Rickshaw.Fixtures.RandomData(12 * 60 * 60);
 
for (i = _i = 0; _i < 100; i = ++_i) {
  random.addData(data);
}
 
scales = [];
 
_ref = data[1];
for (_j = 0, _len = _ref.length; _j < _len; _j++) {
  point = _ref[_j];
  point.y *= point.y;
}
 
for (_k = 0, _len1 = data.length; _k < _len1; _k++) {
  series = data[_k];
  min = Number.MAX_VALUE;
  max = Number.MIN_VALUE;
  for (_l = 0, _len2 = series.length; _l < _len2; _l++) {
    point = series[_l];
    min = Math.min(min, point.y);
    max = Math.max(max, point.y);
  }
  if (_k === 0) {
    scales.push(d3.scale.linear().domain([min, max]).nice());
  } else {
    scales.push(d3.scale.pow().domain([min, max]).nice());
  }
}
 
graph = new Rickshaw.Graph({
  element: document.getElementById("chart"),
  renderer: 'line',
  series: [
    {
      color: 'steelblue',
      data: data[0],
      name: 'Series A',
      scale: scales[0]
    }, {
      color: 'lightblue',
      data: data[1],
      name: 'Series B',
      scale: scales[1]
    }
  ]
});
 
new Rickshaw.Graph.Axis.Y.Scaled({
  element: document.getElementById('axis0'),
  graph: graph,
  orientation: 'left',
  scale: scales[0],
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
 
new Rickshaw.Graph.Axis.Y.Scaled({
  element: document.getElementById('axis1'),
  graph: graph,
  grid: false,
  orientation: 'right',
  scale: scales[1],
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
 
new Rickshaw.Graph.Axis.Time({
  graph: graph
});
 
new Rickshaw.Graph.HoverDetail({
  graph: graph
});
 
graph.render();
</script>

la console m'affiche

Code:

1
2
3
 
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create d3.min.js:1
Valeur translate(undefined, NaN) inattendue lors de l'analyse de l'attribut transform.