Hiding null/empty Y columns

• June 26, 2015 at 1:41 pm #9125
  
  laurenth

  Hello,

  I’ve got a mulitple data series column chart, the data is as follows:

  [{
          type: "column",
          name: "Algorithm 1",
          legendText: "Manual Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Desktop", y: 211, x: 1},
            {label: "Tablet", y: 137, x: 3}
          ]
        },
        {
          type: "column",
          name: "Algorithm 2",
          legendText: "Reviews Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Desktop", y: 211, x: 1},
            {label: "Mobile", y: 175, x: 2},
            {label: "Tablet", y: 85, x: 3}
          ]
        },
        {
          type: "column",
          name: "Algorithm 3",
          legendText: "Commission Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Mobile", y: 175, x: 2},
            {label: "Tablet", y: 211, x: 3}
          ]
        },
        {
          type: "column",
          name: "Algorithm 4",
          legendText: "Commission Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Desktop", y: 55, x: 1},
            {label: "Mobile", y: 175, x: 2}
          ]
        },
        {
          type: "column",
          name: "Algorithm 5",
          legendText: "Commission Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Desktop", y: 211, x: 1},
            {label: "Mobile", y: 20, x: 2},
            {label: "Tablet", y: 353, x: 3}
          ]
        },
        {
          type: "column",
          name: "Algorithm 6",
          legendText: "Commission Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Tablet", y: 175, x: 3}
          ]
        },
        {
          type: "column",
          name: "Algorithm 7",
          legendText: "Commission Algorithm",
          showInLegend: true,
          dataPoints:[
            {label: "Desktop", y: 211, x: 1}
          ]
        }
      ]

  As you can see each serie is “grouped” in 3 categories (Desktop/Mobile/Tablet), but each serie is not necessarily present in each of those categories (hence the missing data point for some of them).

  The chart is automatically filling the missing values with “ghost” columns, so they appear as gaps in the display.
  If I remove the x: value for each data point, it becomes even messier, the series are not “grouped” by Desktop/mobile/tablet anymore.

  Ideally I would like to still have 3 blocks of columns, 1 for each category, but no gaps where there should be a missing serie.

  Has anyone ever done that?

  Many thanks,
  Laurent

  EDIT: here’s the code for the graph:

   @chart = new CanvasJS.Chart("chartContainer",
      {
        theme: "theme3",
        animationEnabled: true,
        title:{
          text: "Average Commission per 1000 Searches",
          fontSize: 30
        },
        data: @get('series')})
  
      @chart.render()

  • This topic was modified 9 years, 5 months ago by laurenth. Reason: wrong data, added chart code
  June 29, 2015 at 7:46 pm #9128
  
  Anjali

  laurenth,

  This is not possible as of now. But you can consider using stackedColumn chart instead.

  ____
  Anjali