Column chart with multiple stacks

Column chart of temperatures of Boston and New York in one stack and the temperature of Houston in another stack.

Points to note:

  • Notice that houston_temp shares all the other options with boston_temp and new_york_temp. So we override just the stack parameter from the options for houston_temp by writing {'houston_temp: {'stack': 1}}.

    We can also write series_options as

    series_options = [
           {'options':{
              'type': 'column',
              'stacking': True,
              'stack': 0},
            'terms':{
              'month': [
                'boston_temp',
                'new_york_temp']}},
    
           {'options':{
              'type': 'column',
              'stacking': True,
              'stack': 1},
            'terms':{
              'month': [
                'houston_temp']}
                }]
    

    to plot this chart. But the form used in the code is much shorter and there is less duplication.

Note: This demo is to demonstrate the use of the API and not to teach you data analysis and data presentation skills. Not all charts plotted in this demo may make sense in real life applications. But they can still be useful in demonstrating the API.

code

ds = DataPool(
       series=
        [{'options': {
            'source': MonthlyWeatherByCity.objects.all()},
          'terms': [
            'month',
            'houston_temp', 
            'boston_temp',
            'new_york_temp']}
         ])

cht = Chart(
        datasource = ds, 
        series_options = 
          [{'options':{
              'type': 'column',
              'stacking': True,
              'stack': 0},
            'terms':{
              'month': [
                'boston_temp',
                'new_york_temp',
                {'houston_temp': {
                  'stack': 1}},]
              }}],
        chart_options = 
          {'title': {
               'text': 'Weather Data of Boston, New York and Houston'},
           'xAxis': {
                'title': {
                   'text': 'Month number'}}})