HiChart test for "Innovation" pg

In this example below you will see how to do a HiChart test for "Innovation" pg with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DeGa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DeGa ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HiChart test for "Innovation" pg</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js">


</script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>



<div id="container"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DeGa/hichart-test-for-andquotinnovationandquot-pg-BJvvjG */
.highcharts-tooltip h3 {
  margin: 0.3em 0;
}
.highcharts-legend-item:last-of-type{display:none}

/*Downloaded from https://www.codeseek.co/DeGa/hichart-test-for-andquotinnovationandquot-pg-BJvvjG */
var H = Highcharts;
H.Tooltip.prototype.defaultFormatter = function(tooltip) {
    var items = this.points || H.splat(this),
      s = [];
    // Build the header
    s = [tooltip.tooltipFooterHeaderFormatter(items[0])];
    // build the values
    s = s.concat(tooltip.bodyFormatter(items));
    // footer
    s.push(tooltip.tooltipFooterHeaderFormatter(items[0], true));

    if (items.length <= 1) {
      s[0] = false;
      if (tooltip.tt) {
        tooltip.tt.destroy();
        tooltip.tt = undefined;
      }
    }


    return s;
  },

  Highcharts.chart('container', {

    chart: {
      type: 'bubble',
    },
    plotOptions: {
      series: {
        stickyTracking: false
      },
      bubble: {
        tooltip: {
          enabled: false,
         	pointFormat: '<strong>{point.year}</strong> - Bought {point.description}'
        },
        //  enableMouseTracking: false,
        
        dataLabels: {
          enabled: true,
          useHTML: true,
          format: '{point.name}',
          style: {
            textShadow: 'none',
            color: '#125687',
            lineHeight: '11px',
            textAlign: 'center'
          },

          formatter: function() {
            return this.point.name;
          }

        },
        minSize: '60',

      }
    },


    xAxis: {
      type: 'datetime'
 
    },
    yAxis: {
      max: 60000,
      startOnTick: false,
      endOnTick: false,
      title: {enabled: false } 
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
      valueDecimals: 2,
      split: true
    },

    series: [{
      data: [
        [1015200000000, 10000],
        [1017532800000, 10040],
        [1020124800000, 9880],
        [1022803200000, 9640],
        [1025395200000, 9020],
        [1028073600000, 8400],
        [1030752000000, 8360],
        [1033344000000, 7760],
        [1036022400000, 8060],
        [1038614400000, 8460],
        [1041292800000, 7980],
        [1043971200000, 7740],
        [1046390400000, 7360],
        [1049068800000, 7140],
        [1051660800000, 7260],
        [1054339200000, 7620],
        [1056931200000, 7620],
        [1059609600000, 8100],
        [1062288000000, 8440],
        [1064880000000, 8500],
        [1067558400000, 9200],
        [1070150400000, 8880],
        [1072828800000, 9760],
        [1075507200000, 10100],
        [1078012800000, 10280],
        [1080691200000, 10560],
        [1083283200000, 10200],
        [1085961600000, 10260],
        [1088553600000, 10660],
        [1091232000000, 9840],
        [1093910400000, 9840],
        [1096502400000, 10060],
        [1099180800000, 10220],
        [1101772800000, 10740],
        [1104451200000, 11500],
        [1107129600000, 11060],
        [1109548800000, 11420],
        [1112227200000, 10800],
        [1114819200000, 10980],
        [1117497600000, 11260],
        [1120089600000, 11100],
        [1122768000000, 11600],
        [1125446400000, 11340],
        [1128038400000, 11980],
        [1130716800000, 12320],
        [1133308800000, 12900],
        [1135987200000, 13460],
        [1138665600000, 14040],
        [1141084800000, 13900],
        [1143763200000, 14820],
        [1146355200000, 14260],
        [1149033600000, 13060],
        [1151625600000, 13260],
        [1154304000000, 12980],
        [1156982400000, 12620],
        [1159574400000, 13260],
        [1162252800000, 13820],
        [1164844800000, 14980],
        [1167523200000, 15180],
        [1170201600000, 15840],
        [1172620800000, 15100],
        [1175299200000, 14900],
        [1177891200000, 14460],
        [1180569600000, 15100],
        [1183161600000, 15980],
        [1185840000000, 16420],
        [1188518400000, 17080],
        [1191110400000, 18260],
        [1193788800000, 21000],
        [1196380800000, 21340],
        [1199059200000, 22280],
        [1201737600000, 18340],
        [1204243200000, 17627.3348],
        [1206921600000, 18330.82023],
        [1209513600000, 19918.68733],
        [1212192000000, 19818.18941],
        [1214784000000, 18572.01523],
        [1217462400000, 18953.90732],
        [1220140800000, 19195.10232],
        [1222732800000, 15074.68769],
        [1225411200000, 13165.22725],
        [1228003200000, 11416.56347],
        [1230681600000, 11878.8539],
        [1233360000000, 10753.27722],
        [1235779200000, 10612.58013],
        [1238457600000, 11476.86222],
        [1241049600000, 12160.24807],
        [1243728000000, 12160.24807],
        [1246320000000, 12763.23557],
        [1248998400000, 12743.13599],
        [1251676800000, 12662.73766],
        [1254268800000, 13547.11933],
        [1256947200000, 13466.721],
        [1259539200000, 14933.9906],
        [1262217600000, 15597.27686],
        [1264896000000, 14069.70851],
        [1267315200000, 14692.7956],
        [1269993600000, 15335.98227],
        [1272585600000, 15858.57145],
        [1275264000000, 15456.57977],
        [1277856000000, 15195.28519],
        [1280534400000, 16300.76228],
        [1283212800000, 17185.14396],
        [1285804800000, 18994.10648],
        [1288483200000, 19355.89899],
        [1291075200000, 19657.39274],
        [1293753600000, 19295.60024],
        [1296432000000, 19918.68733],
        [1298851200000, 20903.56692],
        [1301529600000, 21546.7536],
        [1304121600000, 22732.62903],
        [1306800000000, 22230.13944],
        [1309392000000, 22330.63736],
        [1312070400000, 21506.55443],
        [1314748800000, 20200.0815],
        [1317340800000, 18491.61689],
        [1320019200000, 19978.98608],
        [1322611200000, 19898.58774],
        [1325289600000, 18391.11898],
        [1327968000000, 19054.40523],
        [1330473600000, 19556.89482],
        [1333152000000, 20782.96942],
        [1335744000000, 20079.484],
        [1338422400000, 18793.11065],
        [1341014400000, 18953.90732],
        [1343692800000, 18913.70815],
        [1346371200000, 19757.89066],
        [1348963200000, 20260.38025],
        [1351641600000, 19315.69982],
        [1354233600000, 20019.18525],
        [1356912000000, 19918.68733],
        [1359590400000, 20280.47983],
        [1362009600000, 20823.16859],
        [1364688000000, 20602.07317],
        [1367280000000, 21144.76193],
        [1369958400000, 22049.24319],
        [1372550400000, 21988.94444],
        [1375228800000, 23436.11445],
        [1377907200000, 24621.98989],
        [1380499200000, 26812.8445],
        [1383177600000, 27556.52909],
        [1385769600000, 27657.02701],
        [1388448000000, 28380.61202],
        [1391126400000, 30246.01236],
        [1393545600000, 32065.32137],
        [1396224000000, 28447.37731],
        [1398816000000, 25904.47949],
        [1401494400000, 27062.22158],
        [1404086400000, 28095.91989],
        [1406764800000, 28468.05128],
        [1409443200000, 29956.57683],
        [1412035200000, 29894.55494],
        [1414713600000, 31941.27758],
        [1417305600000, 33036.99778],
        [1419984000000, 31321.0586],
        [1422662400000, 34986.28402],
        [1425081600000, 36569.76109],
        [1427760000000, 37511.288],
        [1430352000000, 36013.40428],
        [1433030400000, 37746.66973],
        [1435622400000, 37447.09299],
        [1438300800000, 39779.51192],
        [1440979200000, 36826.54116],
        [1443571200000, 35200.26741],
        [1446249600000, 36655.35445],
        [1448841600000, 38474.21325],
        [1451520000000, 39437.1385],
        [1454198400000, 37504.8899],
        [1456704000000, 33324.92054],
        [1459382400000, 34450.29691],
        [1461974400000, 33508.65546],
        [1464652800000, 35782.37505],
        [1467244800000, 35736.44132],
        [1469923200000, 37137.42006],
        [1472601600000, 38400.59762],
        [1475193600000, 39847.51009],
        [1477872000000, 39411.13966],
        [1480464000000, 37390.05558],
        [1483142400000, 35093.36912],
        [1485820800000, 37573.79049],
        [1488240000000, 39686.74204],
        [1490918400000, 41592.9918],
        [1493510400000, 45083.95522],
        [1496188800000, 47564.3766],
        [1498780800000, 45818.89489],
        [1501459200000, 49080.18966],
        [1504137600000, 49493.59322],
        [1506729600000, 50963.47256],
        [1509408000000, 53489.82766],
        [1512000000000, 54913.77327],
      ],

      type: 'area',
      color: '#00ADD8',
      name: 'Dynamic Power Global Growth Class Series F'

    }, {
      data: [
        [1015200000000, 10000],
        [1017532800000, 10049.45656],
        [1020124800000, 9555.412744],
        [1022803200000, 9322.824545],
        [1025395200000, 8718.664264],
        [1028073600000, 8317.702505],
        [1030752000000, 8207.157863],
        [1033344000000, 7429.092426],
        [1036022400000, 7874.627345],
        [1038614400000, 8306.5228],
        [1041292800000, 7972.474387],
        [1043971200000, 7495.695134],
        [1046390400000, 7166.282072],
        [1049068800000, 7056.169005],
        [1051660800000, 7496.416623],
        [1054339200000, 7589.727076],
        [1056931200000, 7642.064743],
        [1059609600000, 8082.798079],
        [1062288000000, 8135.61194],
        [1064880000000, 7964.705454],
        [1067558400000, 8242.579704],
        [1070150400000, 8254.80156],
        [1072828800000, 8723.066819],
        [1075507200000, 9126.676341],
        [1078012800000, 9361.963846],
        [1080691200000, 9112.817478],
        [1083283200000, 9345.773909],
        [1085961600000, 9364.296371],
        [1088553600000, 9393.482173],
        [1091232000000, 9009.620219],
        [1093910400000, 8975.165039],
        [1096502400000, 8786.450007],
        [1099180800000, 8677.760196],
        [1101772800000, 8907.460462],
        [1104451200000, 9320.991186],
        [1107129600000, 9436.891245],
        [1109548800000, 9649.443036],
        [1112227200000, 9317.112994],
        [1114819200000, 9460.603419],
        [1117497600000, 9629.803106],
        [1120089600000, 9489.972025],
        [1122768000000, 9832.811475],
        [1125446400000, 9605.488629],
        [1128038400000, 9629.581483],
        [1130716800000, 9551.314303],
        [1133308800000, 9782.673248],
        [1135987200000, 9998.47513],
        [1138665600000, 10224.65351],
        [1141084800000, 10165.9288],
        [1143763200000, 10655.74531],
        [1146355200000, 10551.3319],
        [1149033600000, 10021.94063],
        [1151625600000, 10124.64593],
        [1154304000000, 10356.33696],
        [1156982400000, 10437.64753],
        [1159574400000, 10621.28166],
        [1162252800000, 11060.6647],
        [1164844800000, 11555.30702],
        [1167523200000, 12017.42973],
        [1170201600000, 12336.22465],
        [1172620800000, 12195.47],
        [1175299200000, 12223.63827],
        [1177891200000, 12233.0931],
        [1180569600000, 12177.33797],
        [1183161600000, 12027.1929],
        [1185840000000, 11807.51813],
        [1188518400000, 11694.25163],
        [1191110400000, 11511.23085],
        [1193788800000, 11342.54503],
        [1196380800000, 11454.7232],
        [1199059200000, 11167.12298],
        [1201737600000, 10538.34678],
        [1204243200000, 10183.01318],
        [1206921600000, 10571.03332],
        [1209513600000, 10929.47615],
        [1212192000000, 10961.92812],
        [1214784000000, 10303.2842],
        [1217462400000, 10163.15825],
        [1220140800000, 10360.30799],
        [1222732800000, 9161.377941],
        [1225411200000, 8493.05909],
        [1228003200000, 8114.910561],
        [1230681600000, 8334.21028],
        [1233360000000, 7639.488747],
        [1235779200000, 7023.189901],
        [1238457600000, 7493.248972],
        [1241049600000, 7876.981442],
        [1243728000000, 7932.452414],
        [1246320000000, 8372.585471],
        [1248998400000, 8456.524381],
        [1251676800000, 8948.890693],
        [1254268800000, 9097.194323],
        [1256947200000, 8969.766701],
        [1259539200000, 9141.830526],
        [1262217600000, 9256.840239],
        [1264896000000, 9021.218873],
        [1267315200000, 9078.545251],
        [1269993600000, 9258.892097],
        [1272585600000, 9249.836267],
        [1275264000000, 8674.327952],
        [1277856000000, 8486.365381],
        [1280534400000, 8894.226125],
        [1283212800000, 8868.521862],
        [1285804800000, 9330.520411],
        [1288483200000, 9602.545126],
        [1291075200000, 9487.498742],
        [1293753600000, 9856.396439],
        [1296432000000, 10148.33993],
        [1298851200000, 10238.15992],
        [1301529600000, 10123.16303],
        [1304121600000, 10300.19059],
        [1306800000000, 10309.76388],
        [1309392000000, 10111.34922],
        [1312070400000, 9818.018173],
        [1314748800000, 9357.171312],
        [1317340800000, 9114.227136],
        [1320019200000, 9588.454341],
        [1322611200000, 9581.297436],
        [1325289600000, 9593.722369],
        [1327968000000, 9925.569268],
        [1330473600000, 10229.97836],
        [1333152000000, 10519.74945],
        [1335744000000, 10287.86584],
        [1338422400000, 9865.345507],
        [1341014400000, 10209.21941],
        [1343692800000, 10169.29238],
        [1346371200000, 10271.43996],
        [1348963200000, 10527.19492],
        [1351641600000, 10624.34057],
        [1354233600000, 10699.8782],
        [1356912000000, 10932.66262],
        [1359590400000, 11529.30194],
        [1362009600000, 11891.86829],
        [1364688000000, 12033.23751],
        [1367280000000, 12297.26192],
        [1369958400000, 12651.90351],
        [1372550400000, 12600.81937],
        [1375228800000, 12929.56178],
        [1377907200000, 12990.50668],
        [1380499200000, 13296.03719],
        [1383177600000, 14020.65134],
        [1385769600000, 14493.30896],
        [1388448000000, 14858.55446],
        [1391126400000, 15018.04644],
        [1393545600000, 15664.63444],
        [1396224000000, 15650.83812],
        [1398816000000, 15729.50532],
        [1401494400000, 15884.11861],
        [1404086400000, 15866.75389],
        [1406764800000, 15961.70482],
        [1409443200000, 16261.5174],
        [1412035200000, 16305.63134],
        [1414713600000, 16560.42692],
        [1417305600000, 17091.97602],
        [1419984000000, 17089.03752],
        [1422662400000, 18372.9998],
        [1425081600000, 19162.40077],
        [1427760000000, 19144.65794],
        [1430352000000, 18748.33473],
        [1433030400000, 19404.00595],
        [1435622400000, 18963.74414],
        [1438300800000, 20122.50365],
        [1440979200000, 19226.18701],
        [1443571200000, 18667.74698],
        [1446249600000, 19666.2211],
        [1448841600000, 19926.56612],
        [1451520000000, 20429.26432],
        [1454198400000, 19463.3171],
        [1456704000000, 18607.10757],
        [1459382400000, 18985.82848],
        [1461974400000, 18688.81979],
        [1464652800000, 19644.41561],
        [1467244800000, 19294.06469],
        [1469923200000, 20197.25915],
        [1472601600000, 20348.32888],
        [1475193600000, 20499.91677],
        [1477872000000, 20506.27374],
        [1480464000000, 20879.86584],
        [1483142400000, 21330.61471],
        [1485820800000, 21242.65868],
        [1488240000000, 22189.24513],
        [1490918400000, 22597.38455],
        [1493510400000, 23522.02702],
        [1496188800000, 23750.51508],
        [1498780800000, 22932.70808],
        [1501459200000, 22617.77469],
        [1504137600000, 22719.02033],
        [1506729600000, 23180.41902],
        [1509408000000, 24350.63518],
        [1512000000000, 24875.28278]
      ],

      type: 'area',
      color: '#82BC00',
      name: 'MSCI World Index (C$)'
    }, {
      point: {
        events: {
          mouseOver: function() {
            var chart = this.series.chart;
            chart.pathLine && chart.pathLine.destroy();
            chart.pathLine = chart.renderer.path([
              'M', this.plotX + chart.plotLeft, this.plotY + chart.plotTop,
              'L', this.plotX + chart.plotLeft, chart.plotTop + chart.plotHeight
            ]).attr({
              'stroke-width': 2,
              stroke: '#f1f1f3',
              zIndex: 2
            }).add();
          },
          mouseOut: function() {
            var chart = this.series.chart;
            chart.pathLine && chart.pathLine.destroy();
            chart.pathLine = null;
          }
        }
      },
      data: [{
        x: 1140015122000,
        y: 40000,
        z: 50,
        name: 'CTRP',
        description: 'Ctrip',
        year: '2006'
      }, {
        x: 1171569856000,
        y: 30793,
        z: 50,
        name: 'AAPL',
        description: 'Apple',
        year: '2007'
      }, {
        x: 1232049856000,
        y: 30913.74,
        z: 50,
        name: 'BIDU',
        description: 'Baidu',
        year: '2009'

      }, {
        x: 1263585856000,
        y: 44913.74,
        z: 50,
        name: 'ARM',
        description: 'Arm Holdings',
        year: '2010'
      }, {
        x: 1329336256000,
        y: 30913.74,
        z: 100,
        name: 'Regeneron',
        description: 'REGN',
        year: '2012'
      }, {
        x: 1360958656000,
        y: 44913.74,
        z: 50,
        name: 'TENCENT',
        description: 'Tencent',
        year: '2013'
      }, {
        x: 1392494656000,
        y: 40913.74,
        z: 50,
        name: 'FB',
        description: 'Facebook',
        year: '2014'
      }, {
        x: 1424030656000,
        y: 50913.74,
        z: 50,
        name: 'AMZN',
        description: 'Amazon',
        year: '2015'
      }, {
        x: 1450209856000,
        y: 40913.74,
        z: 50,
        name: 'WB',
        description: 'Weibo Corp',
        year: '2015'
      }]
    }]
  });

Comments