Basic bar+line chart

Link

bl.ocks.org/ca90e6f1166272c93932b56f65aa3746

Content

This is a simple chart combining a bar chart and a line chart using my basic bar chart and basic line chart and a made up data set.

Aim: I'm hoping to create a reusable template for my data viz needs

Idea: I'm expecting data as CSV file.

How to use as a template?

Note: The template is still being tested and updated to make it more generic

1. Fork the project

2. Upload your CSV file

3. In index.html, update the top section:

// *** EDIT TO CUSTOMISE ***
var dataFile = "test-data.csv",
		xName = "year", // column name for x-axis in the csv
    xAxis = {"label": "Years", "x": -60, "y": 80},
    yName = "value1", // column name for y-axis (bar) in the csv
    y2Name = "value2", // column name for y-axis (line) in the csv
    yAxisLabel = "Values",
    barColor = "#3366cc", lineColor = "#16a085",
    plotTitle = {"name": "Template for a bar+line chart", "x": 350, "y": 25},
    plotLegend = {"pos": {"x": -400, "y": 60},
                  "data": [{"name": yName, "color": barColor}, 
                  			   {"name": y2Name, "color": lineColor}]};

function transformXdata(data) {
  return data;
}
function transformYdata(data) {
  return +data;
}
// **************************

Built with blockbuilder.org