Multiple chart types and multiple axes

This example demonstrates how to plot data on different axes using different chart types.

Points to note:

  • You can plot data on different axes by setting the xAxis and yAxis.
  • The series_options - options dict takes any of the values from Highcharts series options. Here we're using legendIndex to sort the legend in reverse order (Boston is last)!
  • If there are only 2 axes (0 and 1), the default behavior of Chartit is to display them on opposite sides. You can override this default behavior by setting {"opposite": False} manually. If there are more than 2 axes, Chartit displays all of them on the same side by default.

code

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

cht = Chart(
        datasource=ds,
        series_options=[{
            'options': {
                'type': 'line',
                'xAxis': 0,
                'yAxis': 0,
                'zIndex': 1,
                'legendIndex': 1,
            },
            'terms': {
                'month': ['boston_temp']
            }}, {
            'options': {
                'type': 'area',
                'xAxis': 1,
                'yAxis': 1,
                'legendIndex': 0,
            },
            'terms': {
                'month': ['houston_temp']
            }
        }],
        chart_options={
            'title': {
                'text': 'Weather Data by Month (on different axes)'
            },
            'xAxis': {
                'title': {
                    'text': 'Month number'
                }
            }
        }
)