// JS

var template = {
  box_fill: 'rgba(230,237,222,1)',
  defaultAxis: {
    alternateGridFill: 'none',
    defaultTick: {
      gridLine_color: 'none',
      label_style: {
        fontSize: 14,
        fontWeight: 'bold'
      }
    }
  },
  yAxis: { formatString: 'n0' },
  legend_visible: false,
  toolbar_visible: false
};
var chart = new JSC.Chart('cc1', {
  debug: true,
  type: 'horizontal column',
  template: template,
  height: 125,
  yAxis_visible: false,

  series: [
    {
      color: '#A0D700',
      mouseTracking_enabled: false,
      points: [
        {
          name: '15',
          y: 15,
          attributes: { nam: 'a' }
        },
        {
          name: '20',
          y: 20,
          attributes: { nam: 'b' }
        },
        {
          name: '25',
          y: 25,
          attributes: { nam: 'c' }
        },
        {
          name: '30',
          y: 30,
          attributes: { nam: 'd' }
        },
        {
          name: '35',
          y: 35,
          attributes: { nam: 'e' }
        }
      ]
    }
  ]
});

var chart2 = new JSC.Chart('cc2', {
  debug: true,
  defaultSeries_type: 'pie donut',
  template: template,
  height: 142,
  defaultPoint_tooltip:
    '%percentOfTotal% of Total',
  series: [
    {
      name: 'Total',
      shape: {
        size: '100%',
        innerSize: '70%',
        label: {
          verticalAlign: 'middle',
          text: '<b>%sum</b><br>Respondents'
        }
      },
      palette: [
        '#86b300',
        '#a8e100',
        '#79a200',
        '#b7f400',
        '#d7f482'
      ],
      points: [
        { name: 'A', y: 150 },
        { name: 'B', y: 200 },
        { name: 'C', y: 250 },
        { name: 'D', y: 300 },
        { name: 'E', y: 350 }
      ]
    }
  ]
});
var chart3 = new JSC.Chart('cc3', {
  debug: true,
  type: 'area',
  height: 142,
  template: template,
  margin_bottom: 4,
  yAxis_scale_interval: 50,
  xAxis: {
    visible: false,
    scale: { type: 'time', range_padding: 0.05 }
  },
  series: [
    {
      name: 'Renewable',
      color: '#86b300',
      points: [
        ['1/1/2020', 29.9],
        ['2/1/2020', 71.5],
        ['3/1/2020', 96.4],
        ['4/1/2020', 129.2],
        ['5/1/2020', 144.0],
        ['6/1/2020', 176.0]
      ]
    },

    {
      name: 'Fossil',
      color: '#868686',
      points: [
        ['1/1/2020', 56.9],
        ['2/1/2020', 56.5],
        ['3/1/2020', 56.4],
        ['4/1/2020', 56.2],
        ['5/1/2020', 75.0],
        ['6/1/2020', 56.0]
      ]
    }
  ]
});
var chart4 = new JSC.Chart('cc4', {
  debug: true,
  type: 'horizontal column',
  template: template,
  height: 142,
  yAxis_visible: false,

  series: [
    {
      color: '#A0D700',
      name: 'Total',
      points: [
        { name: 'heating', y: 15 },
        { name: 'lighting', y: 20 },
        { name: 'recycling', y: 25 },
        { name: 'reuse', y: 30 },
        { name: 'composting', y: 35 },
        { name: 'landfill', y: 30 },
        { name: 'incineration', y: 28 }
      ]
    }
  ]
});
var chart5 = new JSC.Chart('cc5', {
  debug: true,
  defaultSeries_type: 'pie',
  height: 145,
  template: template,

  defaultPoint_tooltip:
    '%percentOfTotal% of Total',
  series: [
    {
      shape: { size: '95%' },
      palette: ['#86b300', '#a8e100', '#838382'],
      points: [
        { name: 'A', y: 52 },
        { name: 'B', y: 38 },
        { name: 'C', y: 10 }
      ]
    }
  ]
});
var chart6 = new JSC.Chart('cc6', {
  debug: true,
  type: 'horizontal column',
  template: template,

  height: 215,
  margin_left: -40,

  defaultPoint_label: {
    visible: true,

    style_fontSize: 13,
    styleFontWeight: 'bold'
  },
  yAxis_visible: false,
  xAxis: {
    defaultTick: {
      line_length: 0,
      gridLine_color: 'none',
      label: {
        align: 'left',
        offset: '54,0',
        style: {
          color: 'white',
          fontSize: 11,
          fontWeight: 'bold'
        }
      }
    }
  },

  series: [
    {
      name: 'Transportation',
      color: '#A0D700',
      points: [
        { name: 'bike', y: 15 },
        { name: 'car', y: 89 },
        { name: 'bus', y: 25 },
        { name: 'train', y: 30 },
        { name: 'subway', y: 47 },
        { name: 'ship', y: 19 },
        { name: 'airplane', y: 24 }
      ]
    }
  ]
});
var chart7 = new JSC.Chart('cc7', {
  debug: true,
  type: 'column',
  template: template,
  height: 180,
  defaultPoint_label: {
    visible: true,
    text: '%yValue%',

    style_fontSize: 9
  },

  xAxis: {
    line_color: 'none',
    defaultTick: {
      label: {
        rotate: -90,
        style: {
          color: 'gray',
          fontSize: 14,
          fontWeight: 'bold'
        }
      }
    }
  },
  yAxis_visible: false,

  series: [
    {
      color: '#A0D700',
      name: 'Usage',
      points: [
        { name: 'nuclear', y: 32, color: 'gray' },
        { name: 'fossil', y: 23, color: 'gray' },
        { name: 'solar', y: 10 },
        { name: 'wind', y: 11 },
        { name: 'water', y: 9 }
      ]
    }
  ]
});
var chart8 = new JSC.Chart('cc8', {
  debug: true,
  type: 'column',
  template: template,

  height: 180,
  defaultPoint_label: {
    visible: true,
    text: '%yValue%',

    style_fontSize: 9
  },

  xAxis: {
    line_color: 'none',
    defaultTick: {
      label: {
        rotate: -90,
        style: {
          color: 'gray',
          fontSize: 14,
          fontWeight: 'bold'
        }
      }
    }
  },
  yAxis_visible: false,
  series: [
    {
      color: '#A0D700',
      name: 'Usage',
      points: [
        { name: 'nuclear', y: 12, color: 'gray' },
        { name: 'fossil', y: 16, color: 'gray' },
        { name: 'solar', y: 18 },
        { name: 'wind', y: 30 },
        { name: 'water', y: 20 }
      ]
    }
  ]
});
var chart9 = new JSC.Chart('cc9', {
  debug: true,
  type: 'column',
  template: template,

  height: 180,
  defaultPoint_label: {
    visible: true,
    text: '%yValue%',

    style_fontSize: 9
  },

  xAxis: {
    //line_color:'none',
    defaultTick: {
      label: {
        rotate: -90,
        style: {
          color: 'gray',
          fontSize: 14,
          fontWeight: 'bold'
        }
      }
    }
  },
  yAxis_visible: false,
  series: [
    {
      color: '#A0D700',
      name: 'Usage',
      points: [
        { name: 'nuclear', y: 3, color: 'gray' },
        { name: 'fossil', y: 5, color: 'gray' },
        { name: 'solar', y: 30 },
        { name: 'wind', y: 34 },
        { name: 'water', y: 27 }
      ]
    }
  ]
});
var chart10 = new JSC.Chart('cc10', {
  debug: true,
  type: 'column',
  template: template,
  box_fill: 'white',
  height: 120,
  defaultPoint_label: {
    text: '%yValue%',
    style_fontSize: 9
  },

  xAxis: { visible: false, scale_invert: true },
  yAxis_visible: false,

  series: [
    {
      color: '#A0D700',
      name: 'Usage',
      points: [
        { name: 'Nuclear', y: 3, color: 'gray' },
        { name: 'Fossil', y: 5, color: 'gray' },
        { name: 'Solar', y: 30 },
        { name: 'Wind', y: 34 },
        { name: 'Water', y: 27 }
      ]
    }
  ]
});