gauravkumar13337 / flot

Automatically exported from code.google.com/p/flot
MIT License
0 stars 0 forks source link

Years can not be seen on x axis if small dataset is rended #574

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
if the dataset is big enough, such as the provided example in here: <a 
href="http://people.iola.dk/olau/flot/examples/multiple-axes.html">exmaple</a>, 
the year will be displayed on xaxis, but if there is only 1 or 2 data in 
dataset array, the full date, like Apr 15 2011, is not able to see on x axis, 
below is my little example that demonstrate this issue:

<table border="0" style="width: 800px; height: 500px">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td valign="top" align="right"><div style="color: Blue">FEV1 <br />(L) <br /></div>
                    <div style="color: Green">PVC <br />(L)</div>
                </td>
                <td><div id="placeholder" style="width:750px; height:450px"></div></td>
                <td valign="top" align="left"><div style="color: Red">PEF <br />(L/s)</div></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    <script type="text/javascript">
        $(function () {
            var dataSet1 = [[1249102800000, 34.50553], [1249189200000, 27.014463], [1249275600000, 26.7805], [1249362000000, 33.08871], [1249448400000, 51.987762], [1249534800000, 56.868233]];
            var dataSet2 = [[1249102800000, 3.405], [1249189200000, 2.701], [1249275600000, 2.678], [1249362000000, 3.308], [1249448400000, 5.187], [1249534800000, 5.668]];

            function euroFormatter(v, axis) {
                return v.toFixed(axis.tickDecimals) + "€";
            }

            function doPlot(position) {
                $.plot($("#placeholder"),
                    [{ data: dataSet1, label: "Data Set 1" },
                        { data: dataSet2, label: "Data Set 2", yaxis: 2}],
                {
                    series: {
                        lines: { show: true },
                        points: { show: true }
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    xaxes: [{ mode: 'time',
                        minTickSize: [1, 'day']
                    }],
                    yaxes: [{ min: 0 },
                        {
                            alignTicksWithAxis: position == "right" ? 1 : null,
                            position: position,
                            tickFormatter: euroFormatter
                        }],
                    legend: { position: 'sw' }
                });

                function showTooltip(x, y, contents) {
                    $('<div id="tooltip">' + contents + '</div>').css({
                        position: 'absolute',
                        display: 'none',
                        top: y + 5,
                        left: x + 5,
                        border: '1px solid #fdd',
                        padding: '2px',
                        'background-color': '#fee',
                        opacity: 0.80
                    }).appendTo("body").fadeIn(200);
                }

                var previousPoint = null;
                $("#placeholder").bind("plothover", function (event, pos, item) {
                    $("#x").text(pos.x.toFixed(2));
                    $("#y").text(pos.y.toFixed(2));

                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                            showTooltip(item.pageX, item.pageY, y.toString() + " on " + new Date(x / 1000 * 1000).toLocaleString());
                        }
                    }
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                });

                $("#placeholder").bind("plotclick", function (event, pos, item) {
                    if (item) {
                        window.location.href = 'http://localhost:12700/About.aspx'; 
                   }
                });
            }
            doPlot("right");
        });
    </script>

Original issue reported on code.google.com by andie...@yahoo.com.au on 22 Jul 2011 at 1:07

GoogleCodeExporter commented 8 years ago

Original comment by dnsch...@gmail.com on 4 Jun 2012 at 9:18