[javascript] graphique (resolu)

[AchilleFraisse]

Bonjour,
J'ai trouvé ce code pour afficher des graphiques : https://jsfiddle.net/f1q4d5th/#&togetherjs=GrbdjgkcCC

Du coup je me suis fais 3 fichier :
stats.php :

Code : Tout sélectionner

<script src='graph.js'></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js'></script>
<link rel='stylesheet' href='./css/style.css' />

<div id="container"></div>

graph.js :

Code : Tout sélectionner

/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/

$(function() {

  /**
   * In order to synchronize tooltips and crosshairs, override the
   * built-in events with handlers defined on the parent element.
   */
  $('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
      point = chart.series[0].searchPoint(event, true); // Get the hovered point

      if (point) {
        point.highlight(e);
      }
    }
  });
  /**
   * Override the reset function, we don't need to hide the tooltips and crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  Highcharts.Point.prototype.highlight = function(event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  /**
   * Synchronize zooming through the setExtremes event handler.
   */
  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes'
            });
          }
        }
      });
    }
  }

  // Get the data. The contents of the data file can be viewed at
  // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
    $.each(activity.datasets, function(i, dataset) {

      // Add X values
      dataset.data = Highcharts.map(dataset.data, function(val, j) {
        return [activity.xData[j], val];
      });

      $('<div class="chart">')
        .appendTo('#container')
        .highcharts({
          chart: {
            marginLeft: 40, // Keep all charts left aligned
            spacingTop: 20,
            spacingBottom: 20
          },
          title: {
            text: dataset.name,
            align: 'left',
            margin: 0,
            x: 30
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false
          },
          xAxis: {
            crosshair: true,
            events: {
              setExtremes: syncExtremes
            },
            labels: {
              format: '{value} km'
            }
          },
          yAxis: {
            title: {
              text: null
            }
          },
          tooltip: {
            positioner: function() {
              return {
                x: this.chart.chartWidth - this.label.width, // right aligned
                y: -1 // align to title
              };
            },
            borderWidth: 0,
            backgroundColor: 'none',
            pointFormat: '{point.y}',
            headerFormat: '',
            shadow: false,
            style: {
              fontSize: '18px'
            },
            valueDecimals: dataset.valueDecimals
          },
          series: [{
            data: dataset.data,
            name: dataset.name,
            type: dataset.type,
            color: Highcharts.getOptions().colors[i],
            fillOpacity: 0.3,
            tooltip: {
              valueSuffix: ' ' + dataset.unit
            }
          }]
        });
    });
  });
});

et style.css :

Code : Tout sélectionner

.chart {
  min-width: 320px;
  max-width: 800px;
  height: 220px;
  margin: 0 auto;
}

Mais quand j'ouvre stats.php dans mon navigateur, il m'affiche une page blanche.
Dans la console il y a écrit : graph.js : 7 : Uncaught ReferenceError: $ is not defined

[benjarobin]

Bonjour, Plein de choses qui ne vont pas...
Du code html dans une page php, sans code php ? Étrange comme façon de faire...
Mélanger prototype.js et jquery est une mauvaise idée, c'est possible si nécessaire mais non recommandé.
Ton code html ne respecte en rien le format d'une page html.
Et pour finir l'ordre d'inclusion des fichiers javascript à une importance

[AchilleFraisse]

J'ai modifié mon fichier stats.html, mais j'ai toujours la même erreur :

Code : Tout sélectionner

<!DOCTYPE html>

<html>
    <head>
        <meta charset='utf-8' />
        <title>Statistiques</title>
        <script src='graph.js'></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <link rel='stylesheet' href='style.css' />
    </head>

    <body>
        <div id="container"></div>
    </body>
</html>

[benjarobin]

l'ordre d'inclusion des fichiers javascript à une importance

[AchilleFraisse]

Effectivement, si j'inclus jquery après la déclaration de mon $ qui pose problème, ca ne vas pas !
Merci beaucoup !