jsGraph
jsGraph copied to clipboard
Published
20 hours ago •
NPellet
NPellet
trackingLine textMethod returns NULL
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>
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/[email protected]/dist/jquery.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsgraph.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsgraph.min.js"</script> -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsgraph.js"</script> -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsgraph-es6.min.js"></script> -->
<script type="module" src="./jsGraph.js"></script>
<script src="./common-spectrum.js"></script>
How about something of the sort ?
<script type="module">
import Graph from './jsGraph.js'
</script>
Tested again with 2.13 - Not working:
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsgraph-es6.min.js"></script>
<!doctype html>
<html>
<body>
<div id="graph"></div>
</body>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/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>