Making Monthly Updates Easier with JavaScript

The U.S. Month at a Glance was a monthly report on the U.S. Economy. Data from U.S. government sources and The Conference Board was compiled to generate interactive charts. Included in the report was a narrative analysis of the previous month.

For me, the interesting opportunity was to develop a means of automating the chart component. Previously, the charts were created manually in Adobe Illustrator, arranged in a layout and exported as GIF files to be included in the web page. By developing the code using AnyChart and some additional JS and CSS, I was able to simplify the monthly workflow. The new workflow required the economists to provide the data in the proper shape, then convert the CSV to a JavaScript array which could be copy-pasted into the correct spot in the code.

The same approach was taken for the Canadian Month at a Glance report.

Employment

Income and Consumption

Prices

Consumer Markets

Financial Markets

Business Markets

Creative direction: James Welsh
Client: Mathew Stewart
Web development: James Welsh

Code Snippet

The following is a code snippet of the AnyChart code to draw a typical chart. I’ve commented the code so you can see what each part of the code does.

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

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

  // create second series with mapped data
  var series_3 = chart2.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_lightBlue);
  series_3.stroke(cboc_lightBlue);
  series_3.legendItem().iconStroke({color: cboc_lightBlue, thickness: 2.5});
  
  // create first series with mapped data
  var series_2 = chart2.line(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.stroke({ color: cboc_darkblue, thickness: 2.5 });
  //series_2.legendItem().iconStroke("none");

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

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

  /* 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("UI claimants");
  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(40);

  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

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


  series_2.yScale(chart2extraYScale);
    
  //set secondary y axis
  chart2.yAxis(1).orientation("right");
  chart2.yAxis(1).title(fieldNames[2]);
  chart2.yAxis(1).title().fontFamily("Arial").fontSize(12);
  chart2.yAxis(1).scale(chart2extraYScale);
  chart2.yAxis(1).stroke(null);
  
  var chart2LabelsRight = chart2.yAxis(1).labels();
  //labels.fontFamily("Courier");
  chart2LabelsRight.fontFamily("Arial").fontSize(12);
  
  var chart2grid = chart2.grid();
  chart2grid.enabled(true);
  chart2.credits().enabled(false);


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

  // initiate chart drawing
  chart2.draw();