Example 6

by Stephen Benett

HTML

<script src="https://show.askia.com/AskiaVistaReader.Net4/Scripts/jquery.js"></script>
<script src="https://show.askia.com/AskiaVistaReader.Net4/Scripts/jquery.blockUI.js"></script>
<script src="https://show.askia.com/AskiaVistaReader.Net4/Scripts/askiavista.js"></script>
<script src="https://show.askia.com/AskiaVistaReader.Net4/Scripts/highcharts/highcharts.js"></script>
<script src="https://show.askia.com/AskiaVistaReader.Net4/Scripts/askiavista.chart.highcharts.js"></script>
<div id="result"></div>
<input type="button" value="request table" onclick="myTable()" />

JavaScript

askiaVista.config({
  baseUrl: "https://show.askia.com/AskiaVistaReader.Net4/",
  survey: "EX"
});

function myTable() {
  askiaVista.display({
    "rows": [{
      "shortcut": "7. Type"
    }],
    "columns": [{
      "shortcut": "i1. Gender"
    }],
    "containerId": "result",
    chart: {
      name: "Highcharts",
      options: {
        chart: {
          type: "area",
          zoomType: 'x'
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
            },
            marker: {
              radius: 2
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            threshold: null
          }
        }
      }
    }
  });
}