No y-axis values - Githubissues

heinemannj commented 2 years ago

No y-axis labels/values in current master release v2.4.5. For x-axis everything is fine.

Modified example file based on "examples\output\legend\basic.html":

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

        import Graph from '/src/graph.js'
        const graph = Graph.fromJSON( {
  "axes": {
    "x": {
      "label": "Wavelength",
      "unit": "nm",
      "unitWrapperBefore": "(",
      "unitWrapperAfter": ")",
      "currentAxisMin": 0,
      "currentAxisMax": 6,
      "primaryGrid": true,
      "secondaryGrid": true,
      "primaryGridColor": "#FFAAAA",
      "secondaryGridColor": "#FFDDDD"
    },
    "y": {
      "unitModification": true,
      "label": "Intensity",
      "unit": "counts",
      "unitWrapperBefore": "(",
      "unitWrapperAfter": ")",
      "primaryGrid": true,
      "secondaryGrid": true,
      "primaryGridColor": "#FFAAAA",
      "secondaryGridColor": "#FFDDDD"
    }
  },
  "legend": {
    "position": "bottom",
    "seriesHideable": true,
    "seriesSelectable": true
  },
  "series": [
    {
      "type": "line",
      "data": {
        "x": [1, 2, 3, 4, 5],
        "y": [1, 2, 3, 2, 1]
      },
      "style": {
        "lineColor": "red"
      }
    },
    {
      "type": "line",
      "data": {
        "x": [1, 2, 3, 4, 5],
        "y": [3, 2, 1, 2, 3]
      },
      "style": {
        "lineColor": "blue"
      },
      "excludeFromLegend": true
    }
  ]
}
, "graph", ( eventName, ...params ) => { console.log( eventName, params ); } );
        graph.draw();
        graph.updateLegend();

        </script>
</html>

heinemannj commented 2 years ago

With version 2.4.2 y-axis values (labels) are working well.

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

Is there any possibility to define the interval/steps of labeling numbers and primary/secondary grids of both x and y axes?

For the x-axis as: 100, 200, 300, ... For the y-axis as: 10, 20, 30, ...

NPellet commented 2 years ago

Give it a shot with v2.4.12, use dist/jsGraph.js and be careful, it's an ESM

heinemannj commented 2 years ago

Old working version:

<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>

This versions can't be loaded and used by browser due to errors:

<!--    <script src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.12/dist/jsgraph.min.js"</script> -->
<!--    <script src="https://cdn.jsdelivr.net/npm/node-jsgraph@2.4.12/dist/jsgraph.js"</script> -->

This version can be loaded and used by browser global but is NOT resolving mentioned y-axis values (labels) bug:

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

Cheers Joerg

NPellet commented 2 years ago

Hang on, you're mixing issues I think.

So as far as I understand. 2.4.12 (and now 2.4.13) are now available ? I had some issues with npm those last few days.

This is what legend/basic.html gives me. I'll wait for your confirmation before closing

heinemannj commented 2 years ago

Not working for me (please see below). Could you please share your html file - Maybe I'm using an old example file and I've missed some configuration parameters.

<!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 graph = Graph.fromJSON( {
  "axes": {
    "x": {
      "forcedMin": 0,
      "forcedMax": 10,
      "flipped": true,
      "primaryGrid": true,
      "secondaryGrid": true,
      "primaryGridColor": "#FFAAAA",
      "secondaryGridColor": "#FFDDDD"
    },
    "y": {
      "label": "Produced mass",
      "unit": "g",
      "unitWrapperBefore": "(",
      "unitWrapperAfter": ")",
      "unitDecade": true,
      "logScale": true
    }
  },
  "legend": {
    "position": "bottom",
    "seriesHideable": true,
    "seriesSelectable": true
  },
  "series": [
    {
      "type": "line",
      "data": {
        "x": [1, 2, 3, 4, 5],
        "y": [1, 2, 3, 2, 1]
      },
      "style": {
        "lineColor": "red"
      }
    },
    {
      "type": "line",
      "data": {
        "x": [1, 2, 3, 4, 5],
        "y": [3, 2, 1, 2, 3]
      },
      "style": {
        "lineColor": "blue"
      },
      "excludeFromLegend": true
    }
  ]
}
, "graph", ( eventName, ...params ) => { console.log( eventName, params ); } );
        graph.draw();
        graph.updateLegend();

        </script>
</html>

heinemannj commented 2 years ago

Tested with https://github.com/NPellet/jsGraph/commit/d74f971a677d4e9e6b6ece47fa4c590af56074e8 Y axis labels are now visible again.

But it seems that something in Graph.fromJSON is broken:

line colors should be red and blue and line should be a solid line but not dotted and black

"series": [
{
  "type": "line",
  "data": {
    "x": [1, 2, 3, 4, 5],
    "y": [1, 2, 3, 2, 1]
  },
  "style": {
    "lineColor": "red"
  }
},
{
  "type": "line",
  "data": {
    "x": [1, 2, 3, 4, 5],
    "y": [3, 2, 1, 2, 3]
  },
  "style": {
    "lineColor": "blue"
  },
  "excludeFromLegend": true
}
]

If you set "unitModification": true axis labels will be removed.

heinemannj commented 2 years ago

Tested again with df02fb4

npm run build was OK but jsGraph.js is running into the following error(s):

NPellet / jsGraph

No y-axis values #292