Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Chart Widgets > LineChart > Markup and Scripting

The HTML markup for a wijlinechart widget looks like this.

Markup
Copy Code
<div id="wijlinechart" style="width: 500px; height: 400px">
</div>

You can initialize the widget with the following jQuery script.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        var xArray = [100, 200, 400, 800, 1000];
        var yArray = [-20, 0, 30, -50, 100];
        $("#wijlinechart").wijlinechart({
            axis: {
                y: {
                    origin: 0
                }
            },
            showChartLabels: false,
            header: {
                text: "My Stocks"
            },
            hint: {
                content: function () {
                    return this.data.lineSeries.label + '\n' +
                        this.x + '\n' + this.y + '';
                },
                contentStyle: {"font-size": 10},
                offsetY: -10
            },
            legend: {visible: false},
            seriesList: [
                {
                    label: "My Stocks",
                    legendEntry: true,
                    data: {
                        x: xArray,
                        y: yArray
                    },
                    markers: {
                        visible: true,
                        type: "circle"
                    }
                }
            ]
        });
    });
</script>

The markup and script featured here results in the following live widget. Mouse over the LineChart to see the hints.

See Also

KO

Reference