Home forums Using CanvasJS Hiding null/empty Y columns

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9125

    laurenth
    Member

    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 1 year, 5 months ago by  laurenth. Reason: wrong data, added chart code
    #9128

    Anjali
    Participant

    laurenth,

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

    ____
    Anjali

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.