Sign chart - A jQuery tool for sign charts

Here are couple of examples, how to use sign chart tool pssignchart.js.

Pssignchart is a jQuery-plugin and it turns given html-element to to a sign chart in edit or view mode.

Example 1: view mode

The tool can show ready sign charts in static view mode.

<div id="pssc1"></div>
<script type="text/javascript">
    jQuery('#pssc1').pssignchart();
    jQuery('#pssc1').pssignchart('set', {
        "caption":"This is a caption.",
        "rows":[
            {"func":"x^2","roots":[{"label":"0","value":0}],"motivation":4,"signs":["plus","plus"]},
            {"func":"x-2","roots":[{"label":"2","value":2}],"motivation":1,"signs":["minus","plus"]},
            {"func":"x^2-1","roots":[{"label":"-1","value":-1},{"label":"1","value":1}],"motivation":5,"signs":["plus","minus","plus"]}
        ],
        "total":{"func":"\\frac{\\left(x^2\\right)\\left(x-2\\right)}{x^2-1}","signs":["minus","plus","plus","minus","plus"]},
        "intervals":[null,"inside","inside",null,"inside"],
        "rootpoints":["open",null,"open","closed"],
        "undefinedpoint":[true, false, true, false]
    });
</script>

Example 2: edit mode

The tool is inited in edit mode. The sign chart is initally empty and it can be filled interactively.

The user interface is ascetic but simple. The user can add new rows in the chart by inputting the (sub)formula, selecting number of its roots and filling in the values of the roots. These values are accepted by clicking "plus"-sign.

The type of the (sub)formula is selected by clicking the button next to the formula. Plus and minus signs can be selected by clicking the intervals. The total formula can be written on the last row. If the total formula is not defined in some roots, this can be marked by clicking those roots on that row. The type of the inequation can selected by clicking. The interwals and their endpoints can be selected also by clicking.

Under the chart is the space for caption.

On each change the signchart triggers pssc_changed-event that can be bind in the containing system to trigger the saving of the data. The data of the sign chart can be obtained with: jQuery('#myid').pssignchart('get').

<div id="pssc2"></div>
<script type="text/javascript">
    jQuery('#pssc2').pssignchart({mode: 'edit'});
</script>

Example 3: prefilled edit mode

Sign chart in edit mode can also be prefilled with some data. Rows can be added in the existing chart.

<div id="pssc3"></div>
<script type="text/javascript">
    jQuery('#pssc3').pssignchart({mode: 'edit', caption: 'This is signchart of: $\\frac{\\left(x^2\\right)\\left(x-2\\right)}{x^2-1}<0$'});
    jQuery('#pssc3').pssignchart('add', {func: 'x^2', roots:[{label:'0', value:0}]});
    jQuery('#pssc3').pssignchart('add', {func: 'x-2', roots: [2]});
    jQuery('#pssc3').pssignchart('add', {func: 'x^2-1', roots: [-1, 1]});
    jQuery('#pssc3').pssignchart('total', {func: '\\frac{\\left(x^2\\right)\\left(x-2\\right)}{x^2-1}'});
</script>