trackingLine textMethod returns NULL

heinemannj commented 2 years ago

Var output is not properly initialized:

<!doctype html>
<html>
    <body>
        <div id="graph"></div>
    </body>
    <script type="module">
import Graph from '../../../src/graph.js';

const domGraph = 'graph';

var graph = new Graph( domGraph, {} );

graph.resize( 700, 300 ); // Resizes the graph
      graph.getYAxis().secondaryGridOff();
      graph.getXAxis().secondaryGridOff();

      graph.getYAxis().setPrimaryGridColor("#f0f0f0");
      graph.getXAxis().setSecondaryGridColor("#f0f0f0");

    const xy1 = [["2014",17944.255],["2013",18881.823],["2012",19263.158],["2011",18744.067],["2010",18978.981],["2009",17351.28],["2008",18961.826],["2007",19532.855],["2006",19707.00899],["2005",19013.11703],["2004",19251.20903],["2003",19595.836],["2002",19446.04],["2001",19764.973]];
    const x1 = xy1.map( el => el[ 0 ] );
    const y1 = xy1.map( el => el[ 1 ] );

  const xy2 = [["2014",878.434],["2013",915.246],["2012",1183.112],["2011",1539.699],["2010",1542.78],["2009",1521.939],["2008",1723.062],["2007",1752.384],["2006",1710.887],["2005",1676.522],["2004",1731.218],["2003",1727.233],["2002",1821.618],["2001",1739.07]];
  const x2 = xy2.map( el => el[ 0 ] );
    const y2 = xy2.map( el => el[ 1 ] );

      var colorado = Graph.newWaveform().setData( y1, x1 );
      var california = Graph.newWaveform().setData( y2, x2 );
      var serie = graph.newSerie('CA').setLineColor("#2B65EC").setLineWidth( 2 );
      serie.setWaveform( california );
      serie.autoAxis();

      var serie = graph.newSerie('CO').setLineColor("#E42217").setLineWidth( 2 );
      serie.setWaveform( colorado );
      serie.autoAxis();

      graph.trackingLine( {

          mode: "common", // Defines the mode, individual or common
          snapToSerie: graph.getSerie("CA"), // In the common mode, choses the serie onto which the tracking line will snap
        legend: true,
          textMethod: function( output ) { // Method that should return the content of the text box
            var txt = "test<br>";
            console.log(output);
            if( output[ "CA" ] ) {
              txt += "California: " + Math.round( output[ "CA" ].yValue ) + " ktons<br />";
            }
            if( output[ "CO" ] ) {
              txt += "Colorado: " + Math.round( output[ "CO" ].yValue ) + " ktons";
            }

            return txt;
          },

          trackingLineShapeOptions: { // Parameters of the tracking line
            strokeColor: '#c0c0c0'
          },

          series: [ // A list of series that can be tracked
            {
              serie: graph.getSerie("CA")
            },

            {
              serie: graph.getSerie("CO"),
              withinPx: 10 // Allows to be within a 10px range
            } 
          ]
        }
    );

      graph.draw();

        </script>
</html>

NPellet commented 2 years ago

Can you try with d8c805d and let me know ?

heinemannj commented 2 years ago

Could you please provide support how to setup the build and how to use the new module in my browser?

I've downloaded the latest dev-v3 version and run in the unzipped jsgraph folder

npm install
npm run build

In the dist folder jsGraph.js was created. Copied the "jsGraph.js" file to my web server and try to load in index.html via:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.2/dist/jsgraph.min.js"></script> -->
<!--    <script src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.12/dist/jsgraph.min.js"</script> -->
<!--    <script type="module" src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.12/dist/jsgraph.js"</script> -->
<!--    <script type="module" src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.12/dist/jsgraph-es6.min.js"></script> -->
<script type="module" src="./jsGraph.js"></script>
<script src="./common-spectrum.js"></script>

NPellet commented 2 years ago

How about something of the sort ?

<script type="module">
import Graph from './jsGraph.js'
</script>

heinemannj commented 2 years ago

Tested again with 2.13 - Not working: <script type="module" src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.13/dist/jsgraph-es6.min.js"></script>

<!doctype html>
<html>
  <body>
    <div id="graph"></div>
  </body>

  <script type="module" src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.13/dist/jsgraph-es6.min.js"></script>

  <script type="module">
    const domGraph = 'graph';

    var graph = new Graph( domGraph, {} );

    graph.resize( 700, 300 ); // Resizes the graph

    graph.getYAxis().secondaryGridOff();
    graph.getXAxis().secondaryGridOff();

    graph.getYAxis().setPrimaryGridColor("#f0f0f0");
    graph.getXAxis().setSecondaryGridColor("#f0f0f0");

    const xy1 = [["2014",17944.255],["2013",18881.823],["2012",19263.158],["2011",18744.067],["2010",18978.981],["2009",17351.28],["2008",18961.826],["2007",19532.855],["2006",19707.00899],["2005",19013.11703],["2004",19251.20903],["2003",19595.836],["2002",19446.04],["2001",19764.973]];
    const x1 = xy1.map( el => el[ 0 ] );
    const y1 = xy1.map( el => el[ 1 ] );

    const xy2 = [["2014",878.434],["2013",915.246],["2012",1183.112],["2011",1539.699],["2010",1542.78],["2009",1521.939],["2008",1723.062],["2007",1752.384],["2006",1710.887],["2005",1676.522],["2004",1731.218],["2003",1727.233],["2002",1821.618],["2001",1739.07]];
    const x2 = xy2.map( el => el[ 0 ] );
    const y2 = xy2.map( el => el[ 1 ] );

    var colorado = Graph.newWaveform().setData( y1, x1 );
    var california = Graph.newWaveform().setData( y2, x2 );
    var serie = graph.newSerie('CA').setLineColor("#2B65EC").setLineWidth( 2 );
    serie.setWaveform( california );
    serie.autoAxis();

    var serie = graph.newSerie('CO').setLineColor("#E42217").setLineWidth( 2 );
    serie.setWaveform( colorado );
    serie.autoAxis();

    graph.trackingLine( {
      mode: "common", // Defines the mode, individual or common
      snapToSerie: graph.getSerie("CA"), // In the common mode, choses the serie onto which the tracking line will snap
      legend: true,
      textMethod: function( output ) { // Method that should return the content of the text box
        var txt = "";

        console.log("trackingLineOutput", output);

        if( output[ "CA" ] ) {
          txt += "California: " + Math.round( output[ "CA" ].yValue ) + " ktons<br />";
        }
        if( output[ "CO" ] ) {
          txt += "Colorado: " + Math.round( output[ "CO" ].yValue ) + " ktons";
        }

        return txt;
      },

      trackingLineShapeOptions: { // Parameters of the tracking line
        strokeColor: '#c0c0c0'
      },
      series: [ // A list of series that can be tracked
        {
          serie: graph.getSerie("CA")
        },
        {
          serie: graph.getSerie("CO"),
          withinPx: 10 // Allows to be within a 10px range
        } 
      ]
    } );

    graph.draw();
  </script>
</html>

NPellet / jsGraph

trackingLine textMethod returns NULL #295