WordPress.org

Forums

IPU-Chart
[resolved] Graph Renders with NaN (3 posts)

  1. arsecott
    Member
    Posted 1 year ago #

    Hello!

    I am trying to render a simple line graph using date as my X and numbers as my Y. The data is being fetched from an Oracle database via php, the data is being converted to JSON using json_encode, and then I try to use this object to populate my chart.

    I can see both the X and Y axis lines as well as my x and y labels, however the only data point that is showing is a red "NaN". The JSON data is in the page code, so I'm not sure where the disconnect is.

    Here is my JSON:

      [{"X":"01.01.14","Y":"5716.48"},{"X":"01.02.14","Y":"9197.2"},{"X":"01.03.14","Y":"8626.03"},{"X":"01.04.14","Y":"8584.49"},{"X":"01.05.14","Y":"8823.86"},{"X":"01.06.14","Y":"11267.31"},{"X":"01.07.14","Y":"16840.99"},{"X":"01.08.14","Y":"21822.37"},{"X":"01.09.14","Y":"17236.94"},{"X":"01.10.14","Y":"13153.04"},{"X":"01.11.14","Y":"9934.35"},{"X":"01.12.14","Y":"8040.54"},{"X":"01.13.14","Y":"10475.11"},{"X":"01.14.14","Y":"7728.67"},{"X":"01.15.14","Y":"4925.18"},{"X":"01.16.14","Y":"3143.56"},{"X":"01.17.14","Y":"3112.09"},{"X":"01.18.14","Y":"2734.95"},{"X":"01.19.14","Y":"2318.01"},{"X":"01.20.14","Y":"3247.22"},{"X":"01.21.14","Y":"3360.31"},{"X":"01.22.14","Y":"3291.54"},{"X":"01.23.14","Y":"3193.49"},{"X":"01.24.14","Y":"4404.53"},{"X":"01.25.14","Y":"3854.91"},{"X":"01.26.14","Y":"3203.65"},{"X":"01.27.14","Y":"5464.1"},{"X":"01.28.14","Y":"5895.89"},{"X":"01.29.14","Y":"5728.23"},{"X":"01.30.14","Y":"6510.93"},{"X":"01.31.14","Y":"6321.48"}]

    Here is the page code for the chart:

    <div id="kcal" style="width:90%; font-size:0.8em"></div>
    <script type='text/javascript' encoding='utf-8'>
    				ip4.draw({ "template": ip4.lineChart(), "parentElement": "#kcal", "data": { "reader": ip4.dataReader() .data([{"X":"01.01.14","Y":"5716.48"},{"X":"01.02.14","Y":"9197.2"},{"X":"01.03.14","Y":"8626.03"},{"X":"01.04.14","Y":"8584.49"},{"X":"01.05.14","Y":"8823.86"},{"X":"01.06.14","Y":"11267.31"},{"X":"01.07.14","Y":"16840.99"},{"X":"01.08.14","Y":"21822.37"},{"X":"01.09.14","Y":"17236.94"},{"X":"01.10.14","Y":"13153.04"},{"X":"01.11.14","Y":"9934.35"},{"X":"01.12.14","Y":"8040.54"},{"X":"01.13.14","Y":"10475.11"},{"X":"01.14.14","Y":"7728.67"},{"X":"01.15.14","Y":"4925.18"},{"X":"01.16.14","Y":"3143.56"},{"X":"01.17.14","Y":"3112.09"},{"X":"01.18.14","Y":"2734.95"},{"X":"01.19.14","Y":"2318.01"},{"X":"01.20.14","Y":"3247.22"},{"X":"01.21.14","Y":"3360.31"},{"X":"01.22.14","Y":"3291.54"},{"X":"01.23.14","Y":"3193.49"},{"X":"01.24.14","Y":"4404.53"},{"X":"01.25.14","Y":"3854.91"},{"X":"01.26.14","Y":"3203.65"},{"X":"01.27.14","Y":"5464.1"},{"X":"01.28.14","Y":"5895.89"},{"X":"01.29.14","Y":"5728.23"},{"X":"01.30.14","Y":"6510.93"},{"X":"01.31.14","Y":"6321.48"}]) }, "d3": { "yLabel": "Daily Number", "xLabel": "Date" }});
    			</script>

    Any help or guidance would be great, thank you!

    https://wordpress.org/plugins/ipu-chart/

  2. thmufl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Thanks for this example! I found an error with the help of it. Just pushed an update (1.0.3) and tested it with the example below.

    In order to recognize dates on the x-axis we need an adapter. And we must indicate that x is a time scale. And IPU-Charts attend the data as {x, y} in lower case. But you can leave the data untouched and fix this later in the adapter.

    I'll add the example below to the user guide.

    Hope this helps!

    <div id="kcal" style="width:90%; font-size:0.8em"></div>
    <script type='text/javascript' encoding='utf-8'>
    ip4.draw({
    "template": ip4.lineChart(),
    "parentElement": "#kcal",
    "data": {
    "reader": ip4.dataReader()
    .data([{"X":"01.01.14","Y":"5716.48"},{"X":"01.02.14","Y":"9197.2"},
    {"X":"01.03.14","Y":"8626.03"},{"X":"01.04.14","Y":"8584.49"},
    {"X":"01.05.14","Y":"8823.86"},{"X":"01.06.14","Y":"11267.31"},
    {"X":"01.07.14","Y":"16840.99"},{"X":"01.08.14","Y":"21822.37"},
    {"X":"01.09.14","Y":"17236.94"},{"X":"01.10.14","Y":"13153.04"},
    {"X":"01.11.14","Y":"9934.35"},{"X":"01.12.14","Y":"8040.54"},
    {"X":"01.13.14","Y":"10475.11"},{"X":"01.14.14","Y":"7728.67"},
    {"X":"01.15.14","Y":"4925.18"},{"X":"01.16.14","Y":"3143.56"},
    {"X":"01.17.14","Y":"3112.09"},{"X":"01.18.14","Y":"2734.95"},
    {"X":"01.19.14","Y":"2318.01"},{"X":"01.20.14","Y":"3247.22"},
    {"X":"01.21.14","Y":"3360.31"},{"X":"01.22.14","Y":"3291.54"},
    {"X":"01.23.14","Y":"3193.49"},{"X":"01.24.14","Y":"4404.53"},
    {"X":"01.25.14","Y":"3854.91"},{"X":"01.26.14","Y":"3203.65"},
    {"X":"01.27.14","Y":"5464.1"},{"X":"01.28.14","Y":"5895.89"},
    {"X":"01.29.14","Y":"5728.23"},{"X":"01.30.14","Y":"6510.93"},
    {"X":"01.31.14","Y":"6321.48"}])
    .adapter(function() {
    function MyAdapter() {}
    MyAdapter.prototype.adapt = function(data) {
    data.forEach(function(d) {
    d.x = d3.time.format("%m.%d.%y").parse(d.X);
    d.y = +d.Y });
    return data;
    };
    return new MyAdapter();
    }())
    },
    "d3": {
    "yLabel": "Daily Number",
    "xLabel": "Date",
    "xScale": d3.time.scale(),
    "xAxis": d3.svg.axis().orient("bottom").tickFormat(d3.time.format("%Y-%m-%d")) }});
    </script>

  3. thmufl
    Member
    Plugin Author

    Posted 1 year ago #

    The example is now in the User Guide.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic