Markup and Scripting

The HTML markup for a wijscatterchart widget looks like this.

Markup	Copy Code
<div id="wijscatterchartDefault" style="width: 450px; height: 300px;"></div>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijscatterchartDefault").wijscatterchart({ header: {text: "Ice Cream Sales vs Temperature"}, axis: { y: { text: "Sales (US$)" }, x: { text: "Temperature (\u00B0F)" } }, legend: {visible: false}, hint: { content: function () { return this.x + '\u00B0, ' + '$' + this.y } }, seriesList: [ { data: { x: [58, 62, 53, 59, 65, 72, 67, 77, 74, 65, 73, 63], y: [215, 325, 185, 332, 406, 522, 412, 614, 544, 421, 445, 408] } } ] }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijscatterchartDefault").wijscatterchart({
            header: {text: "Ice Cream Sales vs Temperature"},
            axis: {
                y: {
                    text: "Sales (US$)"
                },
                x: {
                    text: "Temperature (\u00B0F)"
                }
            },
            legend: {visible: false},
            hint: {
                content: function () {
                    return this.x + '\u00B0, ' + '$' + this.y
                }
            },
            seriesList: [
                {
                    data: {
                        x: [58, 62, 53, 59, 65, 72, 67, 77, 74, 65, 73, 63],
                        y: [215, 325, 185, 332, 406, 522, 412, 614, 544, 421, 445, 408]
                    }
                }
            ]
        });
    });  
</script>

The markup and script featured here results in the following live widget. Mouse over the data points to see the tooltip text defined in the hint option.

Reference

wijscatterchart API

KO

KO ScatterChart Binding