Custom series for ExtJS line chart

Question

I have a requirement in my application to create a line chart with multiple series. The problem is all the series starts from the same year. My requirement is to create a chart just like the example given at: jsfiddle.net/pyrliu/JPEEv/2/

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",
            markerConfig: {
                type: "cross",
                size: 4,
                radius: 4,
                "stroke-width": 0
            },
        }, {
            type: "line",
            highlight: {
                size: 7,
                radius: 7
            },
            axis: "left",
            smooth: true,
            xField: "year",
            yField: "value2",
            title: "Canada",
            markerConfig: {
                type: "circle",
                size: 4,
                radius: 4,
                "stroke-width": 0
            }
        }]

});

In the above example there are two series for USA and Canada. I need the data for Canada to be shown from year 2009. In the above example the data is from year 1997. I need one series to start from 1999 and the other from 1997. how to skip two values from the same store?

Answer 1

Are you looking for something like this jsFiddle? It's all in how your data is treated, and you need to treat null values as null values, not 0s, so that's where the convert function comes in to play. Props go to this SO answer.

// This is the juice to fix the problem
function convertInt(value) {
  if (typeof value !== 'number') // or other similar conversion
    return undefined;
  return value;
}

var chartDataStore = Ext.create("Ext.data.ArrayStore", {
  storeId: "chartData",
  fields: [
    {name: "year", type: "integer"},
    "country1",
    {name: "value1", type: "integer", convert: convertInt},
    "country2",
    {name: "value2", type: "integer", convert: convertInt}
  ],
  data: [
    [1997, "USA", 66, "Canada", null],
    [1998, "USA", 81, "Canada", null],
    [1999, "USA", 83, "Canada", 46],
    [2000, "USA", 61, "Canada", 45],
    [2001, "USA", null, "Canada", 53],
    [2002, "USA", null, "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",
      markerConfig: {
        type: "cross",
        size: 4,
        radius: 4,
        "stroke-width": 0
      },
    }, {
      type: "line",
      highlight: {
        size: 7,
        radius: 7
      },
      axis: "left",
      smooth: true,
      xField: "year",
      yField: "value2",
      title: "Canada",
      markerConfig: {
        type: "circle",
        size: 4,
        radius: 4,
        "stroke-width": 0
      }
    }]
});