My attempt at a flexible charting library in Javascript/d3. The package reads the chart DNA and plots the appropriate chart, you don't have to specify any further options, including chart type!
main.html and files in css, js, is an example of how the framework is used in an app. adaptum.js is the main adaptum code, but requires d3.
I use this function to create random values for charting:
randomizer = function (range_max, length, slope) {
slope = slope ? slope : 0;
values = [];
for (var i = 0; i < length; i++) { values.push(Math.round(slope * i + Math.random() * range_max)); }
return values;
};
//Chart DNA contains both data and metadata necessary to build the chart.
var chart_dna_bar = {
header: "Chart 2: A <strong>Bar</strong> Chart", //Can be left blank.
subheader: "Interestingly, this is the <strong>second</strong> chart built in the adaptum framework.", //Can be left blank.
columns: { label: "Metrics", values: ["Found", "Searching", "Lost"] },
rows: [
{ label: "January", values: randomizer(20, 3) },
{ label: "February", values: randomizer(20, 3, 1) },
{ label: "March", values: randomizer(20, 3, 2) },
{ label: "April", values: randomizer(20, 3, 3) },
{ label: "May", values: randomizer(20, 3, 4) },
{ label: "June", values: randomizer(20, 3, 5) },
{ label: "July", values: randomizer(20, 3, 6) }
]
};
// 'chart' is the id of the div we want to append to.
adaptum.chartMe(chart_dna_spider, "chart");
//Chart DNA contains both data and metadata necessary to build the chart.
var chart_dna_line = {
header: "Chart 3: A <strong>Line</strong> Chart", //Can be left blank.
subheader: "Interestingly, this is the <strong>third</strong> chart built in the adaptum framework.", //Can be left blank.
columns: { label: "Metrics", values: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "November", "October", "December"] },
rows: [
{ label: "Apples", values: randomizer(30, 12, 4) },
{ label: "Oranges", values: randomizer(20, 12, 10) },
{ label: "Poachers", values: randomizer(20, 12, 20) }
]
};
// 'chart' is the id of the div we want to append to.
adaptum.chartMe(chart_dna_spider, "chart");
//Chart DNA contains both data and metadata necessary to build the chart.
var chart_dna_spider = {
header: "Chart 1: A<strong>Spider</strong> Chart",
subheader: "Interestingly, this is the <strong>first</strong> chart built in the adaptum framework.",
columns: { label: "Metrics", values: ["Strength", "Intelligence", "Charisma", "Dexterity", "Luck"] },
rows: [
{ label: "Germany", values: randomizer(20, 5) },
{ label: "Argentina", values: randomizer(20, 5) },
{ label: "United States", values: randomizer(20, 5) }
]
};
// 'chart' is the id of the div we want to append to.
adaptum.chartMe(chart_dna_spider, "chart");