Example of working line chart

Example of working ExtJS 4 line chart with single-dimension data.

by Mark

HTML

<div id="demoChart"></div>

JavaScript

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
        storeId: "chartData",
        fields: [
            { name: "year", type: "integer" },
            "country1",
            { name: "value1", type: "integer" },
            "country2",
            { name: "value2", type: "integer" }
        ],
        data: [
            [1997,"USA",66,"Canada",53],
            [1998,"USA",81,"Canada",67],
            [1999,"USA",83,"Canada",46],
            [2000,"USA",61,"Canada",45],
            [2001,"USA",67,"Canada",53],
            [2002,"USA",68,"Canada",43]
        ]

    });
    
    var win = Ext.create("Ext.chart.Chart", {
        width: 600,
        height: 400,
        hidden: false,
        title: "Example working chart",
        renderTo: "demoChart",
        layout: "fit",
        style: "background:#fff",
            animate: true,
            store: chartDataStore,
            shadow: true,
            theme: "Category1",
            legend: {
                position: "bottom"
            },
            axes: [{
                type: "Numeric",
                minimum: 0,
                position: "left",
                fields: ["value1", "value2"],
                title: "Value",
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: "#ddd",
                        stroke: "#bbb",
                        "stroke-width": 0.5
                    }
                }
            }, {
                type: "Category",
                position: "bottom",
                fields: ["year"],
                title: "Year"
            }],
            series: [{
                type: "line",
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: "left",
                smooth: true,
                xField: "year",
                yField: "value1",
                title: "USA",
             ...