FusionCharts - Gallery Example - Area 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- A simple implementation of Area 2D chart showing daily trend of liquor sales for the last week -->

<div id="chart-container">FusionCharts will render here</div>

CSS

body {
  width: 1000px;
}

#chart-container {
  height: 650px;
  width 500px;
}

@media (max-width:800px) {

  body {
    width: 600px;
  }

  #chart-container {
    height: 500px;
    width 550px;
  }

}

JavaScript

FusionCharts.ready(function () {
    var ChartSnake = new FusionCharts({
        type: 'bar2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '100%',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "bgColor": "#ffffff",
                "showBorder": "0",
                "showHoverEffect": "1",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "placevaluesInside": "1",
                "valueFontColor": "#000000",
                "showXAxisLine": "1",
                "showYAxisLine": "1",
                "showYAxisValues": "1",
                "xAxisLineColor": "#999999",
                "divLineAlpha": "0",
                "showAlternateVGridColor": "0",
                "yAxisMinValue": "-100",
                "yAxisMaxValue": "100",
                "showLimits": "1",
                "showValue": "1",
                "plotFillAlpha": "0",
                "showPlotBorder": "0",
                "numDivLines": "11",
                "rotateXAxisName":"1"
            },
            "data": [
              {
                  "label": "SELF CONFIDENCE / PROXIMITY",
                  "value": "2"
              },
              {
                  "label": "BEAUTY MODEL",
                  "value": "12"
              },
              {
                  "label": "TRUST / HONESTY",
                  "value": "22"
              },
              {
                  "label": "RESULTS / EFFICACY",
                  "value": "5"
              },
              {
                  "label": "ADAPTED / SIMPLICITY",
                  "value": "10"
              },
              {
                  "label": "HERITAGE / FAMILIAR",
                  "value": "-36"
              },
              {
                  "label": "ASPIRATION",
          ...