Line Chart

EverViz Hack

by Ryan Brackett

HTML

<link rel="stylesheet" href="https://cdn.kyruus.com/pmc-customer-static-assets/nghs/custom-style/1.0/nghs-custom.css">
    <script src="https://cdn.kyruus.com/lib/kyruus-search-widget/version/2/kyruus-search-widget.min.js"></script>
    <div id="kyruus-search-widget"></div>
    <script type="text/javascript">
        (function() {
            var kyruusSearchWidget = new KyruusSearchWidget({
                pm_url: 'https://doctors.nghs.org',
                el: document.getElementById('kyruus-search-widget'),
                customer_code: 'nghs',
                search_label: 'Find a doctor by typing in a condition, specialty or name',
                message: 'Search by Condition, Specialty, Name...',
                show_location: false,
                typeahead_categories: [
                    {
                        "category": "clinical_experience"
                    },
                    {
                        "category": "specialty_synonym"
                    },
                    {
                        "category": "name"
                    },
                    {
                        "category": "primary_care"
                    }
                ],
                allow_empty_search: true,
                focus_on_widget: false,
                use_primary_care_condition: true,
                persist_query: true,
                legal_message: 'off',
                sort_order: 'relevance, networks',
            });
        }());
    </script>

CSS

body {
  padding: 0px;
  margin: 0px;
}

ul.highcharts-menu {
  font-family: sans-serif;
}

.highcharts-data-table {
  font-size: 80%;
  font-family: sans-serif;
}

.highcharts-data-table table {
  width: 100%;
}

.highcharts-data-table th {
  padding: 10px;
}

.highcharts-data-table th,
.highcharts-data-table td {
  border-bottom: 1px solid #dedede;
}

JavaScript

(function() {
  //Inject code v3.0.2

  var highcharts = document.createElement('script');

  var cdn = 'https://code.highcharts.com/';
  var loaded = 0;
  var encodedUrl = encodeURI('https://https://app.everviz.com//show/gt3_EU1Bi');
  var chartCreated = false;
  var scripts = [
    "highcharts.js",
    "modules/stock.js",
    "highcharts-more.js",
    "highcharts-3d.js",
    "modules/data.js",
    "modules/exporting.js",
    "modules/funnel.js",
    "modules/solid-gauge.js",
    "modules/export-data.js",
    "modules/accessibility.js"
    /* "modules/series-label.js" */
  ];

  var externalCSS = [];

  var extraScripts = [
    "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/annotations-advanced.js"
  ];

  var options = {
    "title": {
      "text": "Trend of Percentage of Positive COVID-19 Cases",
      "align": "left",
      "x": 10
    },
    "subtitle": {
      "text": "",
      "align": "left",
      "x": 10
    },
    "colors": ["#0277bd"],
    "legend": {
      "align": "left",
      "verticalAlign": "top",
      "itemMarginBottom": 10,
      "x": 0,
      "symbolRadius": 2
    },
    "plotOptions": {
      "series": {
        "marker": {
          "enabled": false
        },
        "lineWidth": 2,
        "allowPointSelect": true,
        "states": {
          "select": {
            "color": "#EFFFEF",
            "borderColor": "black",
            "dashStyle": "dot"
          }
        },
        "events": {}
      }
    },
    "credits": {
      "text": "everviz.com",
      "href": "https://everviz.com",
      "enabled": false
    },
    "series": [{
      "type": "line",
      "marker": {
        "enabled": false
      },
      "lineWidth": 5,
      "enableMouseTracking": true,
      "data": []
    }],
    "chart": {
      "type": "line",
      "zoomType": "x"
    },
    "xAxis": {
      "labels": {
        "format": "{value:%b %d}"
      }
    },
    "stockTools": {
      "gui": {
        "enabled":...