// JS
var data = [
  ['1/1/2020', [15, 30]],
  ['2/1/2020', [18, 35]],
  ['3/1/2020', [27, 47]],
  ['4/1/2020', [37, 60]],
  ['5/1/2020', [46, 71]],
  ['6/1/2020', [56, 80]],
  ['7/1/2020', [61, 83]],
  ['8/1/2020', [60, 81]],
  ['9/1/2020', [51, 75]],
  ['10/1/2020', [40, 63]],
  ['11/1/2020', [30, 48]],
  ['12/1/2020', [19, 34]]
];
var chart = JSC.chart('chartDiv', {
  debug: true,
  type: 'area spline',
  palette: ['crimson', '#03bbfb'],
  legend_visible: false,
  title: {
    label: {
      text:
        'Chicago Average Temperatures<br> Range: <b>%min°F — %max°F</b>,    Average: <b>%average°F</b>',
      style_fontWeight: 'normal'
    }
  },
  defaultAxis: {
    defaultTick_label_style_fontSize: '13px'
  },
  yAxis: [
    {
      id: 'mainY',
      label_text: '(°F) Fahrenheit',
      defaultTick: {
        label: { text: '%value°F' }
      },
      markers: [
        {
          value: [0, 32],
          label: {
            text:
              '<icon name=weather/snowflake size=15 verticalAlign=center margin_right=4> Freezing',
            style_fontSize: 14,
            align: 'center'
          },
          color: ['#65affb', 0.5]
        },
        {
          value: 72,
          label_text:
            '<icon name=weather/sun size=18 verticalAlign=center margin_right=4> Perfect (72°F)',
          label_style_fontSize: 14,
          line_width: 3,
          color: ['#fcc348', 0.5]
        }
      ]
    },
    {
      scale_syncWith: 'mainY',
      orientation: 'opposite',
      formatString: 'n2',
      label_text: '(°C) Celcius',
      defaultTick_label: {
        text: '{(%Value-32)*5/9:n1}°C'
      }
    }
  ],
  xAxis: {
    crosshair_enabled: true,
    formatString: 'MMM',
    scale: {
      type: 'time',
      interval: { unit: 'month' }
    }
  },
  defaultSeries_shape_opacity: 0.7,
  defaultPoint: {
    tooltip:
      'High: <b>%yValue°F</b>  ({(%yValue-32)*5/9:n1}°C)<br/>Low: <b>%yStart°F</b>  ({(%yStart-32)*5/9:n1}°C)',
    marker: { size: 6, color: 'darken' }
  },
  toolbar_visible: false,
  series: [
    { name: 'Average Range', points: data }
  ]
});