Eu quero compor gráfico de linha usando o agrupamento no campo específico de

Question

Atualmente estou renderização único gráfico de linha usando dados json, que é como a seguir :

{"eventType":"A","startOpen":"0","asOfDate":"21-OCT-13","intervalNo":0},
{"eventType":"A","startOpen":"47","asOfDate":"21-OCT-13","intervalNo":1},
{"eventType":"A","startOpen":"60","asOfDate":"21-OCT-13","intervalNo":2},
{"eventType":"B","startOpen":"79","asOfDate":"21-OCT-13","intervalNo":4},
{"eventType":"B","startOpen":"90","asOfDate":"21-OCT-13","intervalNo":6}

Eu sou de plotagem do gráfico startOpen contra intervalNo.Agora eu quero traçar o gráfico usando o agrupamento em eventType de campo.Significa, acima de dados de duas linhas devem ser desenhadas em um único gráfico, um para eventType A e outro para eventType B.

Agradecemos sua qualquer tipo de ajuda.Obrigado :)

Meu atual código para o gráfico :

Ext.define("TestBug.view.TrendsChart", {
extend: "Ext.chart.Chart",
alias: "widget.trendschart",
store: "Trends",
style: 'background:#fff',
animate: true,
shadow: true,
groupField:'eventType',

legend: {position: 'right'},
axes: [
    {
        type: "numeric",
        position: "left",
        fields: "intervalNo",
        title:"Interval No",
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 0.5
            }
        }
   },
    {
        type: "numeric",
        position: "bottom",
        fields: "startOpen",
        title: 'Start Open'
    }
],
series: [
    {
        type: "line",
        axis: "left",
        xField: "startOpen",
        yField: "intervalNo",
        gField:'eventType',
        markerConfig: {
            type: 'circle',
            size: 4,
            radius: 4,
            'stroke-width': 0
        }
    }
]
});

Answer 1

Para plotar múltiplas linhas de largura diferentes valores de x, você tem que usar vários série de linha.Valor de pontos com valor de undefined vai ser ignorado, o que é que eles não serão desenhados no gráfico.

Veja como adaptar os seus dados de exemplo para o fazer (violino):

Ext.define("TestBug.view.TrendsChart", {
    extend: "Ext.chart.Chart",
    alias: "widget.trendschart",

    store: {
        fields: [
            'eventType', 
            {name: 'startOpen', type: 'int'}, 
            'asOfDate', 
            'intervalA',
            'intervalB'
        ]
        ,data: [
            {"eventType":"A","startOpen":"0","intervalA":0,"intervalB":undefined},
            {"eventType":"A","startOpen":"47","intervalA":1,"intervalB":undefined},
            {"eventType":"A","startOpen":"35","intervalA":undefined,"intervalB":2},
            {"eventType":"B","startOpen":"79","intervalA":undefined,"intervalB":4},
            {"eventType":"B","startOpen":"90","intervalA":undefined,"intervalB":6}
        ]
    },

    style: 'background:#fff',
    animate: true,
    shadow: true,
    groupField: 'eventType',

    legend: {
        position: 'right'
    },

    axes: [{
        type: "numeric",
        position: "left",
        fields: ["intervalA", "intervalB"],
        title: "Interval No",
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 0.5
            }
        }
    },{
        type: "numeric",
        position: "bottom",
        fields: "startOpen",
        title: 'Start Open'
    }],

    series: [{
        type: "line",
        axis: "left",
        xField: "startOpen",
        yField: "intervalA",
        title: "A"
    },{
        type: "line",
        axis: 'left',
        xField: 'startOpen',
        yField: 'intervalB',
        title: "B"
    }]
});

Ext.widget('trendschart', {
    renderTo: Ext.getBody()
    ,width: 600
    ,height: 300
});