jqplot.themeEngine.js

Theme Engine provides a programatic way to change some of the more common jqplot styling options such as fonts, colors and grid options.  A theme engine instance is created with each plot.  The theme engine manages a collection of themes which can be modified, added to, or applied to the plot.

The themeEngine class is not instantiated directly.  When a plot is initialized, the current plot options are scanned an a default theme named “Default” is created.  This theme is used as the basis for other themes added to the theme engine and is always available.

A theme is a simple javascript object with styling parameters for various entities of the plot.  A theme has the form:

{
    _name:f "Default",
    target: {
        backgroundColor: "transparent"
    },
    legend: {
        textColor: null,
        fontFamily: null,
        fontSize: null,
        border: null,
        background: null
    },
    title: {
        textColor: "rgb(102, 102, 102)",
        fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
        fontSize: "19.2px",
        textAlign: "center"
    },
    seriesStyles: {},
    series: [{
        color: "#4bb2c5",
        lineWidth: 2.5,
        linePattern: "solid",
        shadow: true,
        fillColor: "#4bb2c5",
        showMarker: true,
        markerOptions: {
            color: "#4bb2c5",
            show: true,
            style: 'filledCircle',
            lineWidth: 1.5,
            size: 4,
            shadow: true
        }
    }],
    grid: {
        drawGridlines: true,
        gridLineColor: "#cccccc",
        gridLineWidth: 1,
        backgroundColor: "#fffdf6",
        borderColor: "#999999",
        borderWidth: 2,
        shadow: true
    },
    axesStyles: {
        label: {},
        ticks: {}
    },
    axes: {
        xaxis: {
            borderColor: "#999999",
            borderWidth: 2,
            ticks: {
                show: true,
                showGridline: true,
                showLabel: true,
                showMark: true,
                size: 4,
                textColor: "",
                whiteSpace: "nowrap",
                fontSize: "12px",
                fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
            },
            label: {
                textColor: "rgb(102, 102, 102)",
                whiteSpace: "normal",
                fontSize: "14.6667px",
                fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
                fontWeight: "400"
            }
        },
        yaxis: {
            borderColor: "#999999",
            borderWidth: 2,
            ticks: {
                show: true,
                showGridline: true,
                showLabel: true,
                showMark: true,
                size: 4,
                textColor: "",
                whiteSpace: "nowrap",
                fontSize: "12px",
                fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
            },
            label: {
                textColor: null,
                whiteSpace: null,
                fontSize: null,
                fontFamily: null,
                fontWeight: null
            }
        },
        x2axis: {...
        },
        ...
        y9axis: {...
        }
    }
}

”seriesStyles” is a style object that will be applied to all series in the plot.  It will forcibly override any styles applied on the individual series.  “axesStyles” is a style object that will be applied to all axes in the plot.  It will also forcibly override any styles on the individual axes.

The example shown above has series options for a line series.  Options for other series types are shown below:

Bar Series

{
    color: "#4bb2c5",
    seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
    lineWidth: 2.5,
    shadow: true,
    barPadding: 2,
    barMargin: 10,
    barWidth: 15.09375,
    highlightColors: ["rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)"]
}

Pie Series

{
    seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
    padding: 20,
    sliceMargin: 0,
    fill: true,
    shadow: true,
    startAngle: 0,
    lineWidth: 2.5,
    highlightColors: ["rgb(129,201,214)", "rgb(240,189,104)", "rgb(214,202,165)", "rgb(137,180,158)", "rgb(168,180,137)", "rgb(180,174,89)", "rgb(180,113,161)", "rgb(129,141,236)", "rgb(227,205,120)", "rgb(255,138,76)", "rgb(76,169,219)", "rgb(215,126,190)", "rgb(220,232,135)", "rgb(200,167,96)", "rgb(103,202,235)", "rgb(208,154,215)"]
}

Funnel Series

{
    color: "#4bb2c5",
    lineWidth: 2,
    shadow: true,
    padding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
    },
    sectionMargin: 6,
    seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
    highlightColors: ["rgb(147,208,220)", "rgb(242,199,126)", "rgb(220,210,178)", "rgb(154,191,172)", "rgb(180,191,154)", "rgb(191,186,112)", "rgb(191,133,174)", "rgb(147,157,238)", "rgb(231,212,139)", "rgb(255,154,102)", "rgb(102,181,224)", "rgb(221,144,199)", "rgb(225,235,152)", "rgb(200,167,96)", "rgb(124,210,238)", "rgb(215,169,221)"]
}