<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />
  <link rel="stylesheet" href="http://www.conferenceboard.ca/lib/css/cboc/cboc.css" />
  
  <style>
    div {
      float: left;
      width: 100%;
      height: 250px;
    }
  </style>
</head>

<body>
  This is a headline
 <div id="container1"></div>
  <div id="container2"></div> 
  <div id="container3"></div> 
  <div id="container4"></div>
  <div id="container5"></div> 
  <div id="container6"></div>
  <div id="container7"></div>
  <div id="container8"></div>
  <div id="container9"></div>
  <div id="container10"></div>
  <div id="container11"></div>
  <div id="container12"></div>


  <script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
  <script src="data.js"></script>
  <script type="text/javascript" src="charts.js"></script> 

</body>

</html>


James 

From: Mark Peters [mailto:mark.peters@anychart.com] 
Sent: Tuesday, December 13, 2016 9:51 AM
To: James Welsh <welsh@conferenceboard.ca>; Timothy Loginov <timothy.loginov@anychart.com>; Andrey Khachaturov <andrey.khachaturov@anychart.com>
Subject: Re: AnyChart Not for Profit License - ConferenceBoard.ca

Hello James,

You will be able to replace that with "Powered by AnyChart" if that is ok, or somewhere else on the page.

Timothy, can you please send James a License Key.  Andrey copied above will contact you soon to discuss a paper.

Thank you again, we look forward to working with you.

Best,
Mark

 


Mark Peters | Vice-President Sales and Marketing | AnyChart LLC | T: 435.513.0097 | mark.peters@anychart.com

On Mon, Dec 12, 2016 at 4:24 PM, James Welsh <welsh@conferenceboard.ca> wrote:
That sounds great. 
 
One of the pages we’re planning to use AnyChart on is the “U.S. Economic Month at a Glance” Here is a link to a test page:
 
http://www.conferenceboard.ca/e-library/research/usmaag/2016/____test.aspx
 
In terms of the “Powered by AnyChart” is that in addition to the little GIF at the bottom of each chart? 
 
 
Once we see how this works there will probably be other similar pages.
 
I am interested in AnyChart and AnyMap.
 
 
 
 
James Welsh
Associate Director, Publishing
Codirecteur, Service de l’édition
The Conference Board of Canada / Le Conference Board du Canada
255, chemin Smyth Road, Ottawa ON K1H 8M7 Canada 
Tel./Tél. 613-526-3090 ext./poste 430 • Cell/Cell. 613-809-7783 • Fax/Téléc. 613-526-4857
welsh@conferenceboard.ca • www.conferenceboard.ca
 
 
 
From: Mark Peters [mailto:mark.peters@anychart.com] 
Sent: Monday, December 12, 2016 3:30 PM
To: James Welsh <welsh@conferenceboard.ca>
Subject: AnyChart Not for Profit License - ConferenceBoard.ca
 
Hello James,
 
First, sorry we had not responded previously.  We have quite a few Canadian Corporations using our products internally and as part of their software products.
 
We would be happy to provide your organization with a license.  We'd like to publish a success story of your application once it is up and running if that is ok.  Additionally if you could provide a reference somewhere where the charts are being used saying something like "Powered AnyChart" that would be outstanding. In return we will provide ongoing support and maintenance releases to you and your team at no cost.
 
If this is acceptable we can send over the license keys later today.  Let me know which product(s) you are interested in.
 
Thank you very much!  We look forward to working with you and your organization.
 
Best Regards,
Mark
Mark Peters | Vice-President Sales and Marketing | AnyChart LLC | T: 435.513.0097 | mark.peters@anychart.com

 
 
If you do not wish to receive any further email notifications, please click here.
Please allow 10 business days for your request to be processed.
Please send any questions or comments to contactcboc@conferenceboard.ca.
The Conference Board of Canada
255 Smyth Road 
Ottawa ON K1H 8M7
© Copyright 2016

// //CMAAG code updated January 19, 2017

anychart.onDocumentReady(function() {
  anychart.licenseKey("conferenceboard.ca-b7ef3722-1fc03466");
  // create data set on our data

// The following variables are used for legend titles and axis titles

  var fieldNames = ["date", "Employment change", "Unemployment rate", "CPI", "Industrial prices", "Raw material prices", "Average weekly earnings", "Labour income", "Total wage settlements", "3−month T−bill rate", "5−year mortgage rate", "Canada–U.S. 90−day T−bill spread", "Exchange rate", "Housing starts", "Retail sales", "Auto sales", "Shipments", "Inventories−to−shipments", "Merchandise exports", "Merchandise imports"];

// template for JSON converter http://www.convertcsv.com/csv-to-json.htm [ "{f1}", {f2}, {f3}, {f4}, {f5}, {f6}, {f7}, {f8}, {f9}, {f10}, {f11}, {f12}, {f13}, {f14}, {f15}, {f16}, {f17}, {f18}, {f19}, {f20} ]

  /*
  All               DATE          Series_0
  Chart 1	  column  EMPDIFF       Series_1          Employment change                       (000s)

  Chart 2	  column  UR            Series_2          Unemployment Rate                       (per cent)

  Chart 3	  column  PCHYACPI      Series_3          CPI                                     (Y/Y %)

  Chart 4	  line    IPPI          Series_4          Industrial prices                       (2010 = 100)
        	  line    RMPI          Series_5          Raw material prices

  Chart 5	  line    PCHYAWKEARN   Series_6          Average weekly wages                    Y/Y %
        	  line    PCHYALABINC   Series_7          Labour income                           

  Chart 6	  line    WAGESTOT      Series_8          Total wage settlements                  Y/Y %

  Chart 7	  column  BANKRATE      Series_9          3−month T−bill rate                     (per cent)
        	  line    MORTRATE      Series_10         5−year mortgage rate                    

  Chart 8	  line    INTRATEDIFF   Series_11 left    Canada–U.S. 90−day T−bill spread (LHS)  (per cent)
        	  line    EXCHRATE      Series_12 right   Exchange rate (RHS)                     (C$/US$)

  Chart 9	  column  STARTS        Series_13         Housing starts                          (000s; annualized)

  Chart 10	column  PCHRETAIL     Series_14 left    Retail sales (LHS)                      (percentage change)
          	line    MTRVHSLS      Series_15 right   Auto sales (RHS)                        (millions; annualized)

  Chart 11	line    MFSHIP        Series_16 left    Shipments (LHS)                         ($ billions)
          	line    INVSHIP       Series_17 right   Inventories−to−shipments (RHS)          (ratio)

  Chart 12	line    MERCHX        Series_18         Merchandise exports                     ($ billions)        
          	line    MERCHM        Series_19         Merchandise imports  


  */

  // map data for each series, take x from the zero column and value from the nth column of data set
  var seriesData_1 = dataSet.mapAs({    x: [0],    value: [1]  });
  var seriesData_2 = dataSet.mapAs({    x: [0],    value: [2]  });
  var seriesData_3 = dataSet.mapAs({    x: [0],    value: [3]  });
  var seriesData_4 = dataSet.mapAs({    x: [0],    value: [4]  });
  var seriesData_5 = dataSet.mapAs({    x: [0],    value: [5]  });
  var seriesData_6 = dataSet.mapAs({    x: [0],    value: [6]  });
  var seriesData_7 = dataSet.mapAs({    x: [0],    value: [7]  });
  var seriesData_8 = dataSet.mapAs({    x: [0],    value: [8]  });
  var seriesData_9 = dataSet.mapAs({    x: [0],    value: [9]  });
  var seriesData_10 = dataSet.mapAs({    x: [0],    value: [10]  });
  var seriesData_11 = dataSet.mapAs({    x: [0],    value: [11]  });
  var seriesData_12 = dataSet.mapAs({    x: [0],    value: [12]  });
  var seriesData_13 = dataSet.mapAs({    x: [0],    value: [13]  });
  var seriesData_14 = dataSet.mapAs({    x: [0],    value: [14]  });
  var seriesData_15 = dataSet.mapAs({    x: [0],    value: [15]  });
  var seriesData_16 = dataSet.mapAs({    x: [0],    value: [16]  });
  var seriesData_17 = dataSet.mapAs({    x: [0],    value: [17]  });
  var seriesData_18 = dataSet.mapAs({    x: [0],    value: [18]  });
  var seriesData_19 = dataSet.mapAs({    x: [0],    value: [19]  });

  var orange_red = "#f47920";
  var cboc_blue = "#0076B6";
  var cboc_lightBlue = "#94D9F8";


  // Chart 1 "Employment Change" create 1 series chart with primary axis
  chart1 = anychart.line();

  // turn on chart animation
  chart1.animation(true);

  // create first series with mapped data
  var series_1 = chart1.column(seriesData_1);
  series_1.name(fieldNames[1]);
  series_1.hoverMarkers().enabled(true).type('circle').size(4);
  series_1.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_1.fill(cboc_blue);
  series_1.stroke(cboc_blue);
  series_1.legendItem().iconStroke({color: cboc_blue, thickness: 2.5});

  // turn on the crosshair
  chart1.crosshair().enabled(true).yLabel().enabled(false);
  chart1.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart1.crosshair().yStroke(null);

  // set tooltip mode to point
  chart1.tooltip().positionMode('point');
  chart1.tooltip().fontFamily("Arial").fontSize(12);
  chart1.tooltip().title().fontFamily("Arial").fontSize(14);

  // set chart title text settings
  chart1.title().padding([0, 0, 5, 0]);
  chart1.title().fontFamily("Arial").fontSize(14);

  // set Primary yAxis
  chart1.yAxis().title(fieldNames[1]);
  chart1.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart1.yAxis().title().fontFamily("Arial").fontSize(12);
  chart1.yAxis().stroke(false);

  //style the x axis
  chart1.xAxis().labels().padding([5]);
  chart1.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart1.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend1 = chart1.legend();
  legend1.iconSize(8); // sets hover cursor

  var chart1grid = chart1.grid();
  chart1grid.enabled(true);
  chart1.credits().enabled(false);


  // set container id for the chart and set up paddings
  chart1.container('container1');
  chart1.padding([10, 10, 25, 0]);
  chart1.margin([0]);

  // initiate chart drawing
  chart1.draw();







  // Chart 2 Unemployment Rate create 2 series chart with primary and secondary axes
  chart2 = anychart.line();

  // turn on chart animation
  chart2.animation(true);

  // create first series with mapped data
  var series_2 = chart2.column(seriesData_2);
  series_2.name(fieldNames[2]);
  series_2.hoverMarkers().enabled(true).type('circle').size(4);
  series_2.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_2.fill(cboc_blue);
  series_2.stroke(cboc_blue);
  series_2.legendItem().iconStroke({color: cboc_blue, thickness: 2.5});

  // turn on the crosshair
  chart2.crosshair().enabled(true).yLabel().enabled(false);
  chart2.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart2.crosshair().yStroke(null);

  // set tooltip mode to point
  chart2.tooltip().positionMode('point');
  chart2.tooltip().fontFamily("Arial").fontSize(12);
  chart2.tooltip().title().fontFamily("Arial").fontSize(14);

  // set chart title text settings
  // chart2.title("2 Labour Market 2");
  chart2.title().padding([0, 0, 5, 0]);
  chart2.title().fontFamily("Arial").fontSize(14);

  // set Primary yAxis
  //var chart2yAxisLeft = chart2.yAxis();

  chart2.yAxis().title(fieldNames[2]);
  chart2.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart2.yAxis().title().fontFamily("Arial").fontSize(12);
  chart2.yAxis().stroke(null);


  var chart2yScale = chart2.yScale();
  chart2yScale.inverted(false);
  //chart2yScale.minimum(-80);
  // chart2yScale.maximum(20);

  chart2.xAxis().labels().padding([5]);
  chart2.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart2.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend2 = chart2.legend();
  legend2.iconSize(8); // sets hover cursor

  //var chart2grid = chart2.grid();
  chart2.grid().enabled(true);
  chart2.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart2.container('container2');
  chart2.padding([10, 10, 25, 0]);
  chart2.margin([0]);

  // initiate chart drawing
  chart2.draw();





  // Chart 3 CPI 
  //create 2 series chart with primary and secondary axes
  chart3 = anychart.line();

  // turn on chart animation
  chart2.animation(true);

  // create first series with mapped data
  var series_3 = chart3.column(seriesData_3);
  series_3.name(fieldNames[3]);
  series_3.hoverMarkers().enabled(true).type('circle').size(4);
  series_3.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_3.fill(cboc_blue);
  series_3.stroke(cboc_blue);
  series_3.legendItem().iconStroke({color: cboc_blue, thickness: 2.5});
  
  // turn on the crosshair
  chart3.crosshair().enabled(true).yLabel().enabled(false);
  chart3.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart3.crosshair().yStroke(null);

  // set tooltip mode to point
  chart3.tooltip().positionMode('point');
  chart3.tooltip().fontFamily("Arial").fontSize(12);
  chart3.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart3.title("3 Prices 1");
  chart3.title().padding([0, 0, 5, 0]);
  chart3.title().fontFamily("Arial").fontSize(14);*/

  // set Primary yAxis
  chart3.yAxis().title(fieldNames[3]);
  chart3.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart3.yAxis().title().fontFamily("Arial").fontSize(12);
  chart3.yAxis().stroke(null);

  var chart3yScale = chart3.yScale();
  chart3yScale.inverted(false);

  chart3.xAxis().labels().padding([5]);
  chart3.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart3.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend3 = chart3.legend();
  legend3.iconSize(8); // sets hover cursor


  chart3.grid().enabled(true);
  chart3.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart3.container('container3');
  chart3.padding([10, 10, 25, 0]);
  chart3.margin([0]);

  // initiate chart drawing
  chart3.draw();







  //Chart 4 Industrial Prices
  //create 2 series chart with primary and secondary axes
  chart4 = anychart.line();

  // turn on chart animation
  chart4.animation(true);

  // create first series with mapped data
  var series_4 = chart4.line(seriesData_4);
  series_4.name(fieldNames[4]);
  series_4.hoverMarkers().enabled(true).type('circle').size(4);
  series_4.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_4.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // create second series with mapped data
  var series_5 = chart4.line(seriesData_5);
  series_5.name(fieldNames[5]);
  series_5.hoverMarkers().enabled(true).type('circle').size(4);

  series_5.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_5.stroke({
    color: orange_red,
    thickness: 2.5
  });

  // turn on the crosshair
  chart4.crosshair().enabled(true).yLabel().enabled(false);
  chart4.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart4.crosshair().yStroke(null);

  // set tooltip mode to point
  chart4.tooltip().positionMode('point');
  chart4.tooltip().fontFamily("Arial").fontSize(12);
  chart4.tooltip().title().fontFamily("Arial").fontSize(14);


  /* set chart title text settings
  chart4.title("4 Prices 2");
  chart4.title().padding([0, 0, 5, 0]);
  chart4.title().fontFamily("Arial").fontSize(14);*/

  // set Primary yAxis
  //var chart3yAxisLeft = chart3.yAxis();
  chart4.yAxis().title('2010 = 100');
  chart4.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart4.yAxis().title().fontFamily("Arial").fontSize(12);
  chart4.yAxis().stroke(null);

  chart4.xAxis().labels().padding([5]);
  chart4.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart4.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend4 = chart4.legend();
  legend4.iconSize(8); // sets hover cursor

  var chart4grid = chart4.grid();
  chart4grid.enabled(true);
  chart4.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart4.container('container4');
  chart4.padding([10, 10, 25, 0]);
  chart4.margin([0]);

  // initiate chart drawing
  chart4.draw();










  //Chart 5 Average Weekly Earnings
  //create 2 series chart with primary axis
  chart5 = anychart.line();

  // turn on chart animation
  chart5.animation(true);

  // create first series with mapped data
  var series_6 = chart5.line(seriesData_6);
  series_6.name(fieldNames[6]);
  series_6.hoverMarkers().enabled(true).type('circle').size(4);
  series_6.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_6.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // create second series with mapped data
  var series_7 = chart5.line(seriesData_7);
  series_7.name(fieldNames[7]);
  series_7.hoverMarkers().enabled(true).type('circle').size(4);
  series_7.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_7.stroke({
    color: orange_red,
    thickness: 2.5
  });

  // turn on the crosshair
  chart5.crosshair().enabled(true).yLabel().enabled(false);
  chart5.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart5.crosshair().yStroke(null);

  // set tooltip mode to point
  chart5.tooltip().positionMode('point');
  chart5.tooltip().fontFamily("Arial").fontSize(12);
  chart5.tooltip().title().fontFamily("Arial").fontSize(14);


  /* set chart title text settings
  chart5.title("5 Labour 1");
  chart5.title().padding([0, 0, 5, 0]);
  chart5.title().fontSize(12); */

  // set Primary yAxis
  //var chart5yAxisLeft = chart5.yAxis();
  chart5.yAxis().title('Year over year %');
  chart5.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart5.yAxis().title().fontFamily("Arial").fontSize(12);
  chart5.yAxis().stroke(null);

  //chart5labelsy.fontFamily("Courier");
  //chart5labelsy.fontSize(9);


  chart5.xAxis().labels().padding([5]);
  chart5.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart5.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend5 = chart5.legend();
  legend5.iconSize(8); // sets hover cursor

  var chart5grid = chart5.grid();
  chart5grid.enabled(true);
  chart5.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart5.container('container5');
  chart5.padding([10, 10, 25, 0]);
  chart5.margin([0]);

  // initiate chart drawing
  chart5.draw();











  // CHART 6 Total Wage Settlements
  //create 1 series chart with primary axis
  chart6 = anychart.line();

  // turn on chart animation
  chart6.animation(true);

  // create first series with mapped data
  var series_8 = chart6.line(seriesData_8);
  series_8.name(fieldNames[8]);
  series_8.hoverMarkers().enabled(true).type('circle').size(4);
  series_8.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_8.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // turn on the crosshair
  chart6.crosshair().enabled(true).yLabel().enabled(false);
  chart6.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart6.crosshair().yStroke(null);

  // set tooltip mode to point
  chart6.tooltip().positionMode('point');
  chart6.tooltip().fontFamily("Arial").fontSize(12);
  chart6.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart6.title("6 Prices 2");
  chart6.title().padding([0, 0, 5, 0]);
  chart6.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart6yAxisLeft = chart6.yAxis();
  chart6.yAxis().title('Year over year %');
  chart6.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart6.yAxis().title().fontFamily("Arial").fontSize(12);
  chart6.yAxis().stroke(null);

  chart6.xAxis().labels().padding([5]);
  chart6.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart6.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend6 = chart6.legend();
  legend6.iconSize(8); // sets hover cursor

  var chart6grid = chart6.grid();
  chart6grid.enabled(true);
  chart6.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart6.container('container6');
  chart6.padding([10, 10, 25, 0]);
  chart6.margin([0]);

  // initiate chart drawing
  chart6.draw();














  //Chart 7 3 month T-Bill
  //create 2 series chart with primary axis
  chart7 = anychart.line();

  // turn on chart animation
  chart7.animation(true);

  // create first series with mapped data
  var series_9 = chart7.column(seriesData_9);
  series_9.name(fieldNames[9]);
  series_9.hoverMarkers().enabled(true).type('circle').size(4);
  series_9.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_9.fill(cboc_lightBlue);
  series_9.stroke(cboc_lightBlue);
  series_9.legendItem().iconStroke({color: cboc_lightBlue, thickness: 2.5});

  // create second series with mapped data
  var series_10 = chart7.line(seriesData_10);
  series_10.name(fieldNames[10]);
  series_10.hoverMarkers().enabled(true).type('circle').size(4);
  series_10.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_10.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // turn on the crosshair
  chart7.crosshair().enabled(true).yLabel().enabled(false);
  chart7.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart7.crosshair().yStroke(null);

  // set tooltip mode to point
  chart7.tooltip().positionMode('point');
  chart7.tooltip().fontFamily("Arial").fontSize(12);
  chart7.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart7.title("7 Financial 1");
  chart7.title().padding([0, 0, 5, 0]);
  chart7.title().fontFamily("Arial").fontSize(14);*/

  // set Primary yAxis
  //var chart5yAxisLeft = chart5.yAxis();
  chart7.yAxis().title('per cent');
  chart7.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart7.yAxis().title().fontFamily("Arial").fontSize(12);
  chart7.yAxis().stroke(null);

  //chart5labelsy.fontFamily("Courier");
  //chart5labelsy.fontSize(9);


  chart7.xAxis().labels().padding([5]);
  chart7.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart7.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend7 = chart7.legend();
  legend7.iconSize(8); // sets hover cursor


  var chart7grid = chart7.grid();
  chart7grid.enabled(true);
  chart7.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart7.container('container7');
  chart7.padding([10, 10, 25, 0]);
  chart7.margin([0]);

  // initiate chart drawing
  chart7.draw();










  // Chart 8 Exchange Rate 
  //create 2 series chart with primary and secondary axes
  chart8 = anychart.line();

  // turn on chart animation
  chart8.animation(true);

  // create first series with mapped data
  var series_11 = chart8.line(seriesData_11);
  series_11.name(fieldNames[11]);
  series_11.hoverMarkers().enabled(true).type('circle').size(4);
  series_11.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_11.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // create second series with mapped data
  var series_12 = chart8.line(seriesData_12);
  series_12.name(fieldNames[12]);
  series_12.hoverMarkers().enabled(true).type('circle').size(4);
  series_12.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_12.stroke({
    color: orange_red,
    thickness: 2.5
  });

  // turn on the crosshair
  chart8.crosshair().enabled(true).yLabel().enabled(false);
  chart8.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart8.crosshair().yStroke(null);

  // set tooltip mode to point
  chart8.tooltip().positionMode('point');
  chart8.tooltip().fontFamily("Arial").fontSize(12);
  chart8.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart8.title("8 Financial 2");
  chart8.title().padding([0, 0, 5, 0]);
  chart8.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart8yAxisLeft = chart8.yAxis();
  chart8.yAxis().title("per cent");
  chart8.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart8.yAxis().title().fontFamily("Arial").fontSize(12);
  chart8.yAxis().stroke(null);


  //chart8labelsy.fontFamily("Courier");
  //chart8labelsy.fontSize(9);


  chart8.xAxis().labels().padding([5]);
  chart8.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart8.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend8 = chart8.legend();
  legend8.iconSize(8); // sets hover cursor

  // Create and tune additional y scale
  var chart8extraYScale = anychart.scales.linear();
  chart8extraYScale.minimum(0);
  chart8extraYScale.maximum(1.4);


  series_12.yScale(chart8extraYScale);

  //set secondary y axis
  chart8.yAxis(1).orientation("right");
  chart8.yAxis(1).title("C$/US$");
  chart8.yAxis(1).title().fontFamily("Arial").fontSize(12);
  chart8.yAxis(1).scale(chart8extraYScale);
  chart8.yAxis(1).stroke(null);

  var chart8LabelsRight = chart8.yAxis(1).labels();
  //labels.fontFamily("Courier");
  chart8LabelsRight.fontFamily("Arial").fontSize(12);

  var chart8grid = chart8.grid();
  chart8grid.enabled(true);
  chart8.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart8.container('container8');
  chart8.padding([10, 10, 25, 0]);
  chart8.margin([0]);

  // initiate chart drawing
  chart8.draw();










  //Chart 9 Housing Starts
  //create 1 series chart with primary axis
  chart9 = anychart.line();

  // turn on chart animation
  chart9.animation(true);

  // create first series with mapped data
  var series_13 = chart9.column(seriesData_13);
  series_13.name(fieldNames[13]);
  series_13.hoverMarkers().enabled(true).type('circle').size(4);
  series_13.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_13.fill(cboc_blue);
  series_13.stroke(cboc_blue);
  series_13.legendItem().iconStroke({color: cboc_blue, thickness: 2.5});

  // turn on the crosshair
  chart9.crosshair().enabled(true).yLabel().enabled(false);
  chart9.crosshair().xLabel().fontFamily("Arial").fontSize(14);
  chart9.crosshair().yStroke(null);

  // set tooltip mode to point
  chart9.tooltip().positionMode('point');

  /* set chart title text settings
  chart9.title("9 Consumer Markets 1");
  chart9.title().padding([0, 0, 5, 0]);
  chart9.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart6yAxisLeft = chart6.yAxis();
  chart9.yAxis().title('000s, annualized');
  chart9.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart9.yAxis().title().fontFamily("Arial").fontSize(12);
  chart9.yAxis().stroke(null);

  //chart6labelsy.fontFamily("Courier");
  //chart6labelsy.fontSize(9);

  var chart9yScale = chart9.yScale();
  chart9yScale.inverted(false);
  chart9yScale.minimum();
  chart9yScale.maximum();


  chart9.xAxis().labels().padding([5]);
  chart9.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart9.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend9 = chart9.legend();
  legend9.iconSize(8); // sets hover cursor


  var chart9grid = chart9.grid();
  chart9grid.enabled(true);
  chart9.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart9.container('container9');
  chart9.padding([10, 10, 25, 0]);
  chart9.margin([0]);

  // initiate chart drawing
  chart9.draw();








  //Chart 10 Retail Sales
  //create 2 series chart with primary and secondary axes
  chart10 = anychart.line();

  // turn on chart animation
  chart10.animation(true);

  // create first series with mapped data
  var series_14 = chart10.column(seriesData_14);
  series_14.name(fieldNames[14]);
  series_14.hoverMarkers().enabled(true).type('circle').size(4);
  series_14.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_14.fill(cboc_lightBlue);
  series_14.stroke(cboc_lightBlue);
  series_14.legendItem().iconStroke({color: cboc_lightBlue, thickness: 2.5});

  // create second series with mapped data
  var series_15 = chart10.line(seriesData_15);
  series_15.name(fieldNames[15]);
  series_15.hoverMarkers().enabled(true).type('circle').size(4);
  series_15.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_15.stroke({color: cboc_blue, thickness: 2.5 });
  

  // turn on the crosshair
  chart10.crosshair().enabled(true).yLabel().enabled(false);
  chart10.crosshair().yStroke(null);

  // set tooltip mode to point
  chart10.tooltip().positionMode('point');
  chart9.tooltip().fontFamily("Arial").fontSize(12);
  chart9.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart10.title("10 Consumer Markets 2");
  chart10.title().padding([0, 0, 5, 0]);
  chart10.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart6yAxisLeft = chart6.yAxis();
  chart10.yAxis().title(fieldNames[14]);
  chart10.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart10.yAxis().title().fontFamily("Arial").fontSize(12);
  chart10.yAxis().stroke(null);

  //chart6labelsy.fontFamily("Courier");
  //chart6labelsy.fontSize(9);

  var chart10yScale = chart10.yScale();
  chart10yScale.inverted(false);
  chart10yScale.minimum(-4.5);
  chart10yScale.maximum(3);

  chart10.xAxis().labels().padding([5]);
  chart10.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart10.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  var legend10 = chart10.legend();
  legend10.iconSize(8); // sets hover cursor

  // Create and tune additional y scale
  var chart10extraYScale = anychart.scales.linear();
  chart10extraYScale.minimum(0);
  chart10extraYScale.maximum();


  series_15.yScale(chart10extraYScale);

  //set secondary y axis
  chart10.yAxis(1).orientation("right");
  chart10.yAxis(1).title(fieldNames[15]);
  chart10.yAxis(1).title().fontFamily("Arial").fontSize(12);
  chart10.yAxis(1).scale(chart10extraYScale);
  chart10.yAxis(1).stroke(null);

  var chart10LabelsRight = chart10.yAxis(1).labels();
  //labels.fontFamily("Courier");
  chart10LabelsRight.fontFamily("Arial").fontSize(12);

  chart10.grid().enabled(true);
  chart10.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart10.container('container10');
  chart10.padding([10, 0, 25, 0]);
  chart10.margin([0]);

  // initiate chart drawing
  chart10.draw();











  //Chart 11 Shipments
  //create 2 series chart with primary and secondary axes
  chart11 = anychart.line();

  // turn on chart animation
  chart11.animation(true);

  // create first series with mapped data
  var series_16 = chart11.line(seriesData_16);
  series_16.name(fieldNames[16]);
  series_16.hoverMarkers().enabled(true).type('circle').size(4);
  series_16.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_16.stroke({
    color: cboc_blue,
    thickness: 2.5
  });

  // create second series with mapped data
  var series_17 = chart11.line(seriesData_17);
  series_17.name(fieldNames[17]);
  series_17.hoverMarkers().enabled(true).type('circle').size(4);
  series_17.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_17.stroke({
    color: orange_red,
    thickness: 2.5
  });

  // turn on the crosshair
  chart11.crosshair().enabled(true).yLabel().enabled(false);
  chart11.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart11.crosshair().yStroke(null);

  // set tooltip mode to point
  chart11.tooltip().positionMode('point');
  chart11.tooltip().fontFamily("Arial").fontSize(12);
  chart11.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart11.title("11 Business Markets 1");
  chart11.title().padding([0, 0, 5, 0]);
  chart11.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart6yAxisLeft = chart6.yAxis();
  chart11.yAxis().title('$ billions');
  chart11.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart11.yAxis().title().fontFamily("Arial").fontSize(12);
  chart11.yAxis().stroke(null);
  chart11.yScale().minimum(4.8);
  chart11.yScale().maximum(5.6);

  //chart6labelsy.fontFamily("Courier");
  //chart6labelsy.fontSize(9);


  chart11.xAxis().labels().padding([5]);
  chart11.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart11.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  //var legend11 = chart11.legend();
  chart11.legend().iconSize(8); // sets hover cursor


  // Create and tune secondary y scale
  var chart11extraYScale = anychart.scales.linear();
  chart11extraYScale.minimum(1.2);
  chart11extraYScale.maximum(1.5);


  series_17.yScale(chart11extraYScale);

  //set secondary y axis
  chart11.yAxis(1).orientation("right");
  chart11.yAxis(1).title("ratio");
  chart11.yAxis(1).title().fontFamily("Arial").fontSize(12);
  chart11.yAxis(1).scale(chart11extraYScale);
  chart11.yAxis(1).stroke(null);

  var chart11LabelsRight = chart11.yAxis(1).labels();
  //labels.fontFamily("Courier");
  chart11LabelsRight.fontFamily("Arial").fontSize(12);

  var chart11grid = chart11.grid();
  chart11grid.enabled(true);
  chart11.credits().enabled(false);

  // set container id for the chart and set up paddings
  chart11.container('container11');
  chart11.padding([10, 0, 25, 0]);
  chart11.margin([0]);

  // initiate chart drawing
  chart11.draw();








  //Chart 12 Exports Imports 
  //create 3 series chart with primary and secondary axes
  chart12 = anychart.line();

  // turn on chart animation
  chart12.animation(true);

  // create first series with mapped data
  var series_18 = chart12.line(seriesData_18);
  series_18.name(fieldNames[18]);
  series_18.hoverMarkers().enabled(true).type('circle').size(4);
  series_18.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_18.stroke({
    color: cboc_blue,
    thickness: 2.5
  });
  //series_24.tooltip().textFormatter("{%Value}{groupsSeparator:\\,}");

  // create second series with mapped data
  var series_19 = chart12.line(seriesData_19);
  series_19.name(fieldNames[19]);
  series_19.hoverMarkers().enabled(true).type('circle').size(4);
  series_19.tooltip().position('right').anchor('left').offsetX(5).offsetY(5);
  series_19.stroke({
    color: orange_red,
    thickness: 2.5
  });
  //series_25.tooltip().textFormatter("{%Value}{groupsSeparator:\\,}");



  // turn on the crosshair
  chart12.crosshair().enabled(true).yLabel().enabled(false);
  chart12.crosshair().xLabel().fontFamily("Arial").fontSize(12);
  chart12.crosshair().yStroke(null);

  // set tooltip mode to point
  chart12.tooltip().positionMode('point');
  chart12.tooltip().fontFamily("Arial").fontSize(12);
  chart12.tooltip().title().fontFamily("Arial").fontSize(14);

  /* set chart title text settings
  chart12.title('12 Business Markets 2');
  chart12.title().padding([0, 0, 5, 0]);
  chart12.title().fontFamily("Arial").fontSize(14); */

  // set Primary yAxis
  //var chart12yAxisLeft = chart12.yAxis();
  chart12.yAxis().title('$ billions');
  chart12.yAxis().labels().fontFamily("Arial").fontSize(12);
  chart12.yAxis().title().fontFamily("Arial").fontSize(12);
  var current12Labels = chart12.yAxis().labels();
  // format the number
  current12Labels.textFormatter(function() {
    return anychart.format.number(this.value, 3, ".", ",");
  });
  chart12.yAxis().stroke(null);

  //chart12labelsy.fontFamily("Arial");
  //chart12labelsy.fontSize(9);


  chart12.xAxis().labels().padding([5]);
  chart12.xAxis().labels().fontFamily("Arial").fontSize(12);

  // turn the legend on
  chart12.legend().enabled(true).fontFamily("Arial").fontSize(12).padding([10, 20, 20, 0]);
  //var legend12 = chart12.legend();
  chart12.legend().iconSize(8); // sets hover cursor


  var chart12grid = chart12.grid();
  chart12grid.enabled(true);

  chart12.credits().text("Charts powered by AnyChart");


  // set container id for the chart and set up paddings
  chart12.container('container12');
  chart12.padding([10, 10, 25, 0]);
  chart12.margin([0]);

  // initiate chart drawing
  chart12.draw();
}); 
  var dataSet = anychart.data.set([
  ["Oct 14",55.5,6.7,"2.36","110.93","112.31","2.71","4.11","1.7",0.878,4.79,0.858,0.908,"179.739","-0.20","1.933","52.049","1.34","535.031","540.899"  ],
  ["Nov 14",-16.9,6.7,"1.95","110.73","109.01","1.78","3.12","1.3",0.895,4.79,0.875,0.892,"193.390","-0.27","1.892","51.013","1.36","525.688","531.179"  ],
  ["Dec 14",-15.8,6.7,"1.47","109.37","102.78","1.80","3.19","1.6",0.912,4.79,0.882,0.883,"177.296","0.11","2.055","51.578","1.33","523.008","535.367"  ],
  ["Jan 15",33.1,6.6,"0.97","108.57","93.80","2.74","3.36","1.9",0.592,4.79,0.562,0.867,"186.977","-3.84","1.848","49.683","1.41","512.576","535.399"  ],
  ["Feb 15",12.9,6.8,"1.05","109.87","97.17","2.51","3.82","1.7",0.467,4.74,0.447,0.825,"149.828","2.46","1.859","49.206","1.43","512.466","531.956"  ],
  ["Mar 15",13,6.9,"1.20","110.06","95.50","2.72","3.66","1.8",0.528,4.74,0.498,0.8,"193.613","1.60","1.846","50.880","1.38","518.818","556.540"  ],
  ["Apr 15",-7.3,6.8,"0.80","109.85","98.02","2.43","3.69","1.6",0.647,4.64,0.627,0.792,"180.341","-0.16","1.925","49.503","1.43","515.454","544.952"  ],
  ["May 15",50.3,6.8,"0.87","110.37","99.70","1.29","2.56","1.6",0.665,4.64,0.645,0.811,"199.283","1.04","1.914","49.935","1.42","514.159","547.110"  ],
  ["Jun 15",5.3,6.8,"1.03","110.60","99.80","1.80","2.86","1.6",0.576,4.64,0.556,0.821,"201.310","1.00","1.877","50.830","1.39","541.273","547.969"  ],
  ["Jul 15",18.1,6.9,"1.27","111.34","94.76","1.44","2.40","1.4",0.427,4.64,0.397,0.809,"190.888","0.51","1.983","51.845","1.38","545.802","557.348"  ],
  ["Aug 15",16.5,7,"1.27","111.16","88.39","0.56","1.46","1.2",0.376,4.64,0.306,0.777,"214.886","0.44","1.972","51.562","1.39","534.012","561.436"  ],
  ["Sep 15",-4.2,7,"1.03","110.78","91.49","1.50","2.35","0.8",0.413,4.64,0.393,0.761,"225.525","-0.09","2.006","50.706","1.40","528.589","553.261"  ],
  ["Oct 15",35,7,"1.03","110.56","92.09","1.38","2.09","0.9",0.393,4.64,0.373,0.754,"196.701","-0.16","2.019","50.012","1.43","516.443","543.646"  ],
  ["Nov 15",-34.5,7.1,"1.36","110.38","90.60","1.45","2.33","0.7",0.442,4.64,0.317,0.765,"212.305","1.39","1.979","50.517","1.42","520.516","545.489"  ],
  ["Dec 15",14.2,7.1,"1.61","110.42","87.41","1.66","2.77","0.8",0.497,4.64,0.267,0.753,"170.938","-0.95","2.024","50.848","1.40","539.176","550.196"  ],
  ["Jan 16",1.2,7.2,"2.01","110.41","84.44","0.13","2.15","1.4",0.481,4.64,0.221,0.73,"175.403","1.28","2.022","52.041","1.37","543.906","560.155"  ],
  ["Feb 16",3.3,7.2,"1.36","108.77","83.15","0.45","2.12","1.6",0.462,4.64,0.152,0.703,"218.575","1.40","2.033","49.865","1.41","520.549","548.779"  ],
  ["Mar 16",31.1,7.1,"1.27","108.03","86.35","0.55","2.43","1.3",0.462,4.64,0.172,0.725,"203.533","-0.98","2.007","49.472","1.41","499.202","535.422"  ],
  ["Apr 16",3.9,7.1,"1.66","108.05","85.54","-0.20","1.90","1.2",0.541,4.64,0.311,0.756,"188.567","0.62","2.028","50.134","1.38","499.063","536.880"  ],
  ["May 16",13.4,6.9,"1.50","109.23","89.06","0.63","2.30","1.5",0.551,4.64,0.281,0.78,"187.011","0.24","1.885","49.746","1.40","496.094","542.190"  ],
  ["Jun 16",11.3,6.8,"1.49","109.78","90.77","0.35","2.41","1.2",0.494,4.64,0.224,0.773,"219.353","0.12","2.002","50.661","1.37","496.645","544.525"  ],
  ["Jul 16",-25.9,7,"1.26","109.95","89.67","-0.23","1.77","1.2",0.504,4.74,0.204,0.775,"195.690","-0.10","1.925","50.796","1.39","518.306","544.416"  ],
  ["Aug 16",35.5,7,"1.10","109.92","88.95","1.41","3.00","1.3",0.512,4.74,0.212,0.766,"183.725","0.34","1.930","51.321","1.36","524.785","547.920"  ],
  ["Sep 16",64.6,7,"1.34","110.58","89.72","0.12","2.46","1.5",0.533,4.64,0.243,0.77,"218.794","0.95","1.978","51.382","1.37","521.378","572.459"  ],
  ["Oct 16",46.9,7,"1.49","111.56","93.40","-0.14","2.18","1.4",0.504,4.64,0.174,0.763,"195.702","1.34","1.908","51.260","1.37","526.645","543.216"  ],
  ["Nov 16",-2.4,6.8,"1.18","112.14","94.72","0.86","3.00","1.0",0.509,4.64,0.059,0.755,"187.551","0.40","2.186","52.310","1.34","554.803","541.516"  ],
  ["Dec 16",46.1,6.9,"1.50","112.91","102.16","1.43","3.35","1.6",0.473,4.64,-0.037,0.744,"207.362","-0.09","1.964","53.517","1.31","554.484","550.380"  ],
  ["Jan 17",48.3,6.8,"2.13","113.09","104.12","1.72","3.32","1.9",0.456,4.64,-0.054,0.75,"208.075","2.59","2.070","53.355","1.33","558.722","557.338"  ],
  ["Feb 17",15.3,6.6,"2.05","112.80","103.61","1.11","3.02","1.7",0.48,4.64,-0.04,0.758,"210.582","-0.35","2.091","53.295","1.35","543.709","560.417"  ],
  ["Mar 17",19.4,6.7,"1.56","113.64","101.11","1.00","2.97","1.9",0.513,4.64,-0.227,0.763,"251.630","0.68","2.151","53.833","1.36","562.172","570.708"  ],
  ["Apr 17",3.2,6.5,"1.64","114.88","100.82","1.89","3.06","1.6",0.548,4.64,-0.252,0.747,"213.069","0.72","1.991","54.181","1.37","568.831","581.120"  ],
  ["May 17",54.5,6.6,"1.32","114.89","96.26","1.75","3.39","0.9",0.529,4.64,-0.361,0.744,"194.418","0.60","2.097","54.992","1.35","584.305","597.829"  ],
  ["Jun 17",45.3,6.5,"1.01","113.33","92.72","1.52","3.97","1.6",0.683,4.64,-0.297,0.735,"213.388","-0.05","2.137","54.108","1.37","556.099","595.727"  ],
  ["Jul 17",10.9,6.3,"1.16","111.59","93.90","1.38",null,"1.9",0.74,4.84,-0.33,0.752,"225.122","0.38","2.025","52.685","1.40","527.924","564.701"  ],
  ["Aug 17",22.2,6.2,"1.40","112.47","94.71","1.70",null,"1.7",0.742,4.84,-0.268,0.793,"226.020","-0.33","2.067","53.532","1.38","524.278","562.454"  ],
  ["Sep 17",10,6.2,"1.55","112.32","95.52",null,null,"1.5",1.009,4.89,-0.021,0.814,"217.299",null,null,null,null,"522.725","560.881"  ],
  ["Oct 17",34.9,6.3,null,null,null,null,null,null,0.895,4.99,-0.17,0.793,null,null,null,null,null,null,null  ]
]);