Flot Graph not plotting data

Question

I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.

My code is here:

 init: function()
    {
        // apply styling
        charts.utility.applyStyle(this);

        this.plot = $.plot(
            $("#chart_simple"),
            [{
                label: "Jobs", 
                data: this.data.d1,
                lines: {fillColor: "#dd3333"},
                points: {fillColor: "#dd3333"}
            }, 
            {   
                label: "Resumes", 
                data: this.data.d2,
                lines: {fillColor: "#282b30"},
                points: {fillColor: "#282b30"}
            }], this.options);
    }
},

// lines chart with fill & without points
chart_lines_fill_nopoints: 
{

    // chart data
    data: 
    {
        d1: [[1,100], [2,150], [3,100]],
        d2: [[1,100], [2,150], [3,100]]
    },

    // will hold the chart object
    plot: null,

    // chart options
    options: 
    {
        grid: {
            show: true,
            aboveData: true,
            color: "#3f3f3f",
            labelMargin: 5,
            axisMargin: 0, 
            borderWidth: 0,
            borderColor:null,
            minBorderMargin: 5 ,
            clickable: true, 
            hoverable: true,
            autoHighlight: true,
            mouseActiveRadius: 20,
            backgroundColor : { }
        },
        series: {
            grow: {active:false},
            lines: {
                show: true,
                fill: true,
                lineWidth: 2,
                steps: false
            },
            points: {show:false}
        },
        legend: { position: "nw" },
        yaxis: { min: 0 },
        xaxis: {ticks:11, tickDecimals: 0},
        colors: [],
        shadowSize:1,
        tooltip: true,
        tooltipOpts: {
            content: "%s : %y.0",
            shifts: {
                x: -30,
                y: -50
            },
            defaultTheme: false
        }
    },

Answer 1

So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:

1.) You no longer seem to have a parent charts object, so

charts.utility.applyStyle(this);

isn't going to work.

2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.

3.) In your sample code you never actually call the init function to draw the plot.

4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).

Taking all this into account here's a fiddle which makes this code work.

Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.

Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.

Answer 2

This code is working

//Defining data for the chart

var data= 
{
    d1: [[1,100], [2,150], [3,100]],
    d2: [[1,100], [2,150], [3,100]]
};

//Defining options for the chart
var options=
{
    grid: {
        show: true,
        aboveData: true,
        color: "#3f3f3f",
        labelMargin: 5,
        axisMargin: 0, 
        borderWidth: 0,
        borderColor:null,
        minBorderMargin: 5 ,
        clickable: true, 
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 20,
        backgroundColor : { }
    },
    series: {
        grow: {active:false},
        lines: {
            show: true,
            fill: true,
            lineWidth: 2,
            steps: false
        },
        points: {show:false}
    },
    legend: { position: "nw" },
    yaxis: { min: 0 },
    xaxis: {ticks:11, tickDecimals: 0},
    colors: [],
    shadowSize:1,
    tooltip: true,
    tooltipOpts: {
        content: "%s : %y.0",
        shifts: {
            x: -30,
            y: -50
        },
        defaultTheme: false
    }};

// shorthand for document.ready
$(function(){

    this.plot = $.plot(
        $("#chart_simple"),
        [{
            label: "Jobs", 
            data: data.d1,
            lines: {fillColor: "#dd3333"},
            points: {fillColor: "#dd3333"}
        }, 
        {   
            label: "Resumes", 
            data: data.d2,
            lines: {fillColor: "#282b30"},
            points: {fillColor: "#282b30"}
        }], this.options);
});

Check out the working example here on jsfiddle.