score:-1

for this purpose, you can use chart.js i think, this may help

score:1

you can try fusioncharts instead to make your charting process delightful. it allows you to instantly create the chart without requiring extensive knowledge of the data structures. and did i mention that the charts look beautiful?

using fusioncharts stacked charts, i have created a sample for you in jsfiddle using your data.

fusioncharts.ready(function() {


 var revenuechart = new fusioncharts({
    type: 'stackedcolumn2d',
    renderat: 'chart-container',
    width: '550',
    height: '450',
    dataformat: 'json',
    datasource: {
      "chart": {
        "caption": "alex-john-mark",
        "subcaption": "",
        "xaxisname": "month",
        "yaxisname": "units",

    "palettecolors": "#4a148c,#004d40, #ff6f00",
    "bgcolor": "#ffffff",
    "borderalpha": "20",
    "showcanvasborder": "0",
    "useplotgradientcolor": "0",
    "plotborderalpha": "10",
    "legendborderalpha": "0",
    "legendshadow": "0",
    "valuefontcolor": "#ffffff",
    "showxaxisline": "1",
    "xaxislinecolor": "#999999",
    "divlinecolor": "#999999",
    "divlineisdashed": "1",
    "showalternatehgridcolor": "0",
    "subcaptionfontbold": "0",
    "subcaptionfontsize": "14",
    "showhovereffect": "1"
  },
  "categories": [{
    "category": [{
        "label": "january"
      }, {
        "label": "february"
      }, {
        "label": "march"
      }

    ]
  }],
  "dataset": [{
    "seriesname": "alex",
    "data": [{
        "value": "10"
      }, {
        "value": "20"
      },

      {
        "value": "10"
      }
    ]
  }, {
    "seriesname": "john",
    "data": [{
        "value": "0"
      }, {
        "value": "30"
      },

      {
        "value": "20"
      }
    ]
  }, {
    "seriesname": "mark",
    "data": [{
        "value": "0"
      }, {
        "value": "40"
      },

      {
        "value": "0"
      }
    ]
  }]


  }
  }).render();
});

let me know if this solves your purpose.


Related Query

More Query from same tag