Chart js Demo

by amindunited

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const csv = `cdatetime,address,district,beat,grid,crimedescr,ucr_ncic_code,latitude,longitude
1/1/06 0:00,3108 OCCIDENTAL DR,3,3C        ,1115,10851(A)VC TAKE VEH W/O OWNER,2404,38.55042047,-121.3914158
1/1/06 0:00,2082 EXPEDITION WAY,5,5A        ,1512,459 PC  BURGLARY RESIDENCE,2204,38.47350069,-121.4901858
1/1/06 0:00,4 PALEN CT,2,2A        ,212,10851(A)VC TAKE VEH W/O OWNER,2404,38.65784584,-121.4621009
1/1/06 0:00,22 BECKFORD CT,6,6C        ,1443,476 PC PASS FICTICIOUS CHECK,2501,38.50677377,-121.4269508
1/1/06 0:00,3421 AUBURN BLVD,2,2A        ,508,459 PC  BURGLARY-UNSPECIFIED,2299,38.6374478,-121.3846125
1/1/06 0:00,5301 BONNIEMAE WAY,6,6B        ,1084,530.5 PC USE PERSONAL ID INFO,2604,38.52697863,-121.4513383
1/1/06 0:00,2217 16TH AVE,4,4A        ,957,459 PC  BURGLARY VEHICLE,2299,38.537173,-121.4875774
1/1/06 0:00,3547 P ST,3,3C        ,853,484 PC   PETTY THEFT/INSIDE,2308,38.56433456,-121.4618826
1/1/06 0:00,3421 AUBURN BLVD,2,2A        ,508,459 PC  BURGLARY BUSINESS,2203,38.6374478,-121.3846125
1/1/06 0:00,1326 HELMSMAN WAY,1,1B        ,444,1708 US   THEFT OF MAIL,2310,38.60960217,-121.4918375
1/1/06 0:00,2315 STOCKTON BLVD,6,6B        ,1005,ASSAULT WITH WEAPON - I RPT,7000,38.55426406,-121.4546045
1/1/06 0:00,5112 63RD ST,6,6B        ,1088,530.5 PC USE PERSONAL ID INFO,2604,38.52816497,-121.4314528
1/1/06 0:00,6351 DRIFTWOOD ST,4,4C        ,1261,SUSP PERS-NO CRIME - I RPT,7000,38.51092155,-121.5488201
1/1/06 0:00,7721 COLLEGE TOWN DR,3,3C        ,888,530.5 PC USE PERSONAL ID INFO,2604,38.55611545,-121.4142729
1/1/06 0:00,8460 ROVANA CIR,6,6C        ,1447,484G(B) PC ACCESS CARD FRAUD,2605,38.50398051,-121.3923987
1/1/06 0:00,4856 11TH AVE,6,6B        ,1054,487(A) PC GRAND THEFT,2303,38.54152896,-121.4495097
1/1/06 0:00,6033 69TH ST,6,6C        ,1403,TELEPEST -I...

JavaScript

// console.log('csv', csv.split('\n'));
const csvSplit = csv.split('\n');
const headerData = csvSplit.slice(0, 1)[0].split(',');
const rowsData = csvSplit.slice(1, csvSplit.length -1).reduce((acc, curr) => { return [...acc, curr.split(',')]; },[]);
const context = document.getElementById('myChart');

console.log('_____________________________________');
console.log('header data', headerData);
console.log('_____________________________________');
console.log('rows ', rowsData );


let scatterChart = new Chart(context, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [...rowsData.map((val) => {
      	return {
        	x: val[7],
          y: val[8]
        };
      })]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    }
  }
});