Get default chart to show on FLOT chart

Question

I'm using this particular FLOT example to build charts with some of our data:

http://people.iola.dk/olau/flot/examples/ajax.html

I've modified the markup a bit - instead of buttons, I have checkboxes for the various JSON files, in this manner:

<span>
  <input class="fetchSeries" type="checkbox"> Service One
  <a href="@Server.MapPath("~/Scripts/flot/servicedataone.json")"></a>
</span>

I would like to have the graph pre-populate with one of the JSON files when the page loads. I've tried various things, including having one of the checkboxes checked by default when the page loads, but no luck.

Any help is appreciated! Code below:

 <script type="text/javascript">
    $(document).ready(function () {
        var options = {
            lines: { show: true },
            points: { show: true },
            yaxis: {
            },
            xaxis: { 
            mode: "time"
            },
            grid: { hoverable: true }
        };
        var data = [];
        var placeholder = $("#placeholder");

        $.plot(placeholder, data, options);

        // fetch one series, adding to what we got
        var alreadyFetched = {};

        $("input.fetchSeries").click(function () {
            var button = $(this);

            // find the URL in the link right next to us 
            var dataurl = button.siblings('a').attr('href');

            // then fetch the data with jQuery
            function onDataReceived (series) {
                // extract the first coordinate pair so you can see that
                // data is now an ordinary Javascript object
                var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')';

                //button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate);

                // let's add it to our current data
                if (!alreadyFetched[series.label]) {
                    alreadyFetched[series.label] = true;
                    data.push(series);
                }

                // and plot all we got
                $.plot(placeholder, data, options);
            }

            $.ajax({
                url: dataurl,
                method: 'GET',
                dataType: 'json',
                success: onDataReceived
            });
        });
     });
</script>

Answer 1

How about this - after you setup your $("input.fetchSeries").click, trigger it, by calling $("input.fetchSeries:first").click(). You'll want to modify the :first part to match whichever checkbox you actually want to set off.

It would look like this: http://jsfiddle.net/ryleyb/bdSrc/