JSFiddle - React, Tailwind, and code Playground

by strider820

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<p style="text-align:center;font-family:arial;">
This graph shows the conversion rates for channels that have the universal ados enabled, grouped by publisher. It doesn't include any channel that isn't currently enabled for the universal ados. Click on a publisher name to show their data.
</p>

<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<p style="text-align:center;font-family:arial;">
This graph shows the impressions for channels that have the universal ados enabled, grouped by publisher. It doesn't include any channel that isn't currently enabled for the universal ados. Click on a publisher name to show their data.
</p>

JavaScript

$(function () {
// select date,PUBLISHER.name, IFNULL(sum(impressions) / sum(coverage), 1) as conversion FROM INVENTORY_QUERY_SUMMARY_COUNTRY_201610 QSC LEFT JOIN INVENTORY_IMPRESSION_SUMMARY_COUNTRY_201610 ISC USING (date, affiliate_id, listing_type, ip_country_code) LEFT JOIN CPC3.AFFILIATE AS CHANNEL USING (affiliate_id)  LEFT JOIN CPC3.AFFILIATE AS PUBLISHER ON CHANNEL.master_id = PUBLISHER.affiliate_id JOIN CPC3.MARKET_CONF ON CHANNEL.affiliate_id = MARKET_CONF.affiliate_id and MARKET_CONF.conf like '%beta%' and MARKET_CONF.domain = 'search' group by date, PUBLISHER.affiliate_id order by date, PUBLISHER.affiliate_id;

$.get('https://cdn-source.spotxchange.com/website/integrations/cors.html?feed=uados.beta.tsv', function(csv) {
    var aSeries = [],
        aSeries2 = [],
        aCSVLines = csv.split("\n"),
        oHeaders = {},
        oPublishers = {},
        oPublishers2 = {};
     
     aCSVLines.shift().split("\t").map(function(strHeader, iIndex){
     	oHeaders[strHeader] = iIndex;
     });
     
     aCSVLines.forEach(function(strLine)
     {
			var aLine = strLine.split("\t"),
      strPubName = aLine[oHeaders["publisher_name"]];
      console.log(strPubName);
      if (strPubName != undefined) {
        if (typeof(oPublishers[strPubName]) == "undefined") {
            oPublishers[strPubName] = {
            "name": strPubName,
            "data": [],
            "visible": false
            };
            oPublishers2[strPubName] = {
            "name": strPubName,
            "data": [],
            "visible": false
            };
        }
        oPublishers[strPubName].data.push([
          (new Date(aLine[oHeaders["date"]])).getTime(),
          parseFloat(aLine[oHeaders["conversion"]])
          ]);
        oPublishers2[strPubName].data.push([
          (new Date(aLine[oHeaders["date"]])).getTime(),
          parseFloat(aLine[oHeaders["impressions"]])
          ]);
      }
     });
     
     for(var x in oPublishers) {
     	  ...