A Pen by Andrew Pagan on CodePen.
Created
July 30, 2021 15:29
-
-
Save drewkiimon/6b0d1264166448f0ae812b72be4dc0e6 to your computer and use it in GitHub Desktop.
[Highcharts] Grouped Stacked Bar Chart v2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const testJSON = [ | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic multiplication", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic division", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Add within 1000", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Represent multiplication on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Subtract within 1000", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Unit fractions on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Fractions on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Find 1 on the number line", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Division with groups of objects", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Equivalent fractions on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Identify quadrilaterals", | |
| "Current Skill Mastery Level": "Familiar" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Write numbers in different forms", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic multiplication", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic division", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Add within 1000", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Represent multiplication on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Subtract within 1000", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Unit fractions on the number line", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Fractions on the number line", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Find 1 on the number line", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Division with groups of objects", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Round to nearest 10 or 100", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic multiplication", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Basic division", | |
| "Current Skill Mastery Level": "Familiar" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Compare fractions with the same numerator or denominator", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Add within 1000", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Represent multiplication on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Subtract within 1000", | |
| "Current Skill Mastery Level": "Proficient" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Unit fractions on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Fractions on the number line", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "Get ready for 4th grade", | |
| "Skill Name": "Division with groups of objects", | |
| "Current Skill Mastery Level": "Familiar" | |
| }, | |
| { | |
| "Course Name": "4th grade", | |
| "Skill Name": "Multiply without regrouping", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "4th grade", | |
| "Skill Name": "Divide multi-digit numbers by 2, 3, 4, and 5 (remainders)", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "4th grade", | |
| "Skill Name": "Multiply with regrouping", | |
| "Current Skill Mastery Level": "Mastered" | |
| }, | |
| { | |
| "Course Name": "4th grade", | |
| "Skill Name": "Write mixed numbers and improper fractions", | |
| "Current Skill Mastery Level": "Attempted" | |
| }, | |
| { | |
| "Course Name": "4th grade", | |
| "Skill Name": "Write decimals as fractions", | |
| "Current Skill Mastery Level": "Familiar" | |
| } | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply 2-digit numbers", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide multi-digit numbers by 6, 7, 8, and 9 (remainders)", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Equivalent fractions", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: tenths", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: hundredths", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiplication and division word problems", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Add fractions with common denominators", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Estimate volume (milliliters and liters)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multi-digit addition", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Add and subtract mixed numbers (with regrouping)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Interpret line plots with fraction addition and subtraction", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // } | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare with multiplication", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decompose angles", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare decimals (tenths and hundredths)", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multi-digit subtraction", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Area & perimeter of rectangles word problems", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare with multiplication word problems", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Patterns with numbers", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Convert to smaller units (g and kg)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write common decimals as fractions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Represent multi-step word problems using equations", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Creating largest or smallest number", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decompose fractions with denominators of 100", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Relate factors and multiples", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Time differences", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply fractions and whole numbers word problems", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decompose fractions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": | |
| // "Equivalent fractions with fraction models (denominators 10 & 100)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write fractions as decimals (denominators of 10 & 100)", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Fractions of different wholes", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": | |
| // "Equivalent whole number and fraction multiplication expressions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Convert to smaller units (sec, min, & hr)", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write decimals and fractions shown on grids", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiplying 10s", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": | |
| // "Add and subtract mixed numbers word problems (like denominators)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply 1-digit numbers by 10, 100, and 1000", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Equivalent fractions (denominators 10 & 100)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "US customary conversion word problems", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply fractions and whole numbers", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimal place value with regrouping", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Factor pairs", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Regroup whole numbers", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply 1-digit numbers by a multiple of 10, 100, and 1000", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Convert to smaller units (in, ft, yd, & mi)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply whole numbers by 10", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Convert to smaller units (c, pt, qt, & gal)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Interpret multiplying fraction and whole number word problems", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply without regrouping", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide multi-digit numbers by 2, 3, 4, and 5 (remainders)", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // } | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Identify value of a digit", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply with regrouping", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Round whole numbers", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply 2-digit numbers", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide multi-digit numbers by 6, 7, 8, and 9 (remainders)", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: tenths", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: hundredths", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Add fractions with common denominators", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write whole numbers in expanded form", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multi-digit addition", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Round whole numbers challenge", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare multi-digit numbers", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Place value when multiplying and dividing by 10", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare with multiplication", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Place value tables", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply and divide by 10", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write numbers in written form", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare decimals (tenths and hundredths)", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Place value blocks", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multi-digit subtraction", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare with multiplication word problems", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare multi-digit numbers word problems", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Creating largest or smallest number", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide whole numbers by 10", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Relate factors and multiples", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply fractions and whole numbers word problems", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // } | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decompose fractions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare numbers: place value challenge", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Round whole numbers word problems", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Fractions of different wholes", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write whole numbers in different forms", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": | |
| // "Equivalent whole number and fraction multiplication expressions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply 1-digit numbers by 10, 100, and 1000", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply fractions and whole numbers", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // } | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Factor pairs", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Regroup whole numbers", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Multiply whole numbers by 10", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide multi-digit numbers by 2, 3, 4, and 5 (remainders)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare fractions with different numerators and denominators", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Write mixed numbers and improper fractions", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Divide multi-digit numbers by 6, 7, 8, and 9 (remainders)", | |
| // "Current Skill Mastery Level": "Familiar" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: tenths", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Decimals on the number line: hundredths", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Add fractions with common denominators", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Subtract fractions with common denominators", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Common denominators", | |
| // "Current Skill Mastery Level": "Mastered" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Compare decimals (tenths and hundredths)", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Add fractions (denominators 10 & 100)", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // }, | |
| // { | |
| // "Course Name": "4th grade", | |
| // "Skill Name": "Regroup whole numbers", | |
| // "Current Skill Mastery Level": "Proficient" | |
| // } | |
| ]; | |
| const formatDataForSeries = (data) => { | |
| const courses = {}; | |
| const formattedData = []; | |
| const returnedSkills = []; | |
| const returnedCourses = []; | |
| for (var i = 0; i <= data.length - 1; i++) { | |
| const course = data[i]["Course Name"]; | |
| const skill = data[i]["Skill Name"]; | |
| const mastery = data[i]["Current Skill Mastery Level"]; | |
| if (!courses[course]) { | |
| courses[course] = {}; | |
| returnedCourses.push(course); | |
| } | |
| if (!courses[course][skill]) { | |
| courses[course][skill] = {}; | |
| returnedSkills.push(skill); | |
| } | |
| if (!courses[course][skill][mastery]) { | |
| // courses[course][skill][mastery] = "0"; | |
| courses[course][skill][mastery] = { | |
| name: skill, | |
| y: 0, | |
| course: course, | |
| drilldown: skill, | |
| mastery: mastery | |
| }; | |
| } | |
| // courses[course][skill][mastery]++; | |
| courses[course][skill][mastery].y++; | |
| } | |
| const courseNames = Object.keys(courses); | |
| const masteryContainer = {}; | |
| for (var i = 0; i <= courseNames.length - 1; i++) { | |
| let c = courseNames[i]; | |
| let skills = Object.keys(courses[c]); | |
| for (var j = 0; j <= skills.length - 1; j++) { | |
| let s = skills[j]; | |
| let coolData = courses[c][s]; | |
| let levels = Object.keys(coolData); | |
| if (!masteryContainer["Mastered"]) { | |
| masteryContainer["Mastered"] = { | |
| name: "Mastered", | |
| data: [], | |
| color: "#808080" | |
| }; | |
| } | |
| if (!masteryContainer["Familiar"]) { | |
| masteryContainer["Familiar"] = { | |
| name: "Familiar", | |
| data: [], | |
| color: "#D3D3D3" | |
| }; | |
| } | |
| if (!masteryContainer["Proficient"]) { | |
| masteryContainer["Proficient"] = { | |
| name: "Proficient", | |
| data: [], | |
| color: "#A9A9A9" | |
| }; | |
| } | |
| if (!masteryContainer["Attempted this skill"]) { | |
| masteryContainer["Attempted this skill"] = { | |
| name: "Attempted this skill", | |
| data: [], | |
| color: "#F5F5F5" | |
| }; | |
| } | |
| masteryContainer["Mastered"].data.push(coolData["Mastered"] || 0); | |
| masteryContainer["Familiar"].data.push(coolData["Familiar"] || 0); | |
| masteryContainer["Proficient"].data.push(coolData["Proficient"] || 0); | |
| masteryContainer["Attempted this skill"].data.push( | |
| coolData["Attempted this skill"] || 0 | |
| ); | |
| } | |
| } | |
| return [ | |
| returnedCourses, | |
| returnedSkills, | |
| Object.values(masteryContainer), | |
| courses | |
| ]; | |
| }; | |
| const [courses, skills, data, master] = formatDataForSeries(testJSON); | |
| console.log(courses, skills, data, master); | |
| // const skills = [ | |
| // "Algebra", | |
| // "Chemistry", | |
| // "Programming", | |
| // "How to Smile", | |
| // "How to listen", | |
| // "Fib Numbers" | |
| // ]; | |
| const images = [ | |
| "https://i.pinimg.com/originals/24/73/d9/2473d94cb7d607b461ecece38a0100bf.jpg", | |
| "https://i.ibb.co/b3wVNYP/graph.png", | |
| "https://tests4geeks.com/content/img/smp/java-programming-test-answer-1.png", | |
| "https://smb.ibsrv.net/imageresizer/image/blog_images/1200x1200/59846/176287/0044181001582748537.jpg", | |
| "https://www.incimages.com/uploaded_files/image/1920x1080/getty_464672063_2000160020009280233_339359.jpg", | |
| "https://math.temple.edu/~reich/Fib/fibfamily.gif" | |
| ]; | |
| const createBands = (master) => { | |
| const bands = []; | |
| const courseBands = Object.keys(master); | |
| var start = -0.5; | |
| for (var i = 0; i <= courseBands.length - 1; i++) { | |
| const c = courseBands[i]; | |
| const count = Object.keys(master[c]).length; | |
| bands.push({ | |
| borderWidth: 1, | |
| from: start, | |
| to: start + count, | |
| color: "#f7f8fa", | |
| label: { | |
| align: "left", | |
| text: `<div id='band${i}' class='band'><b>${courses[i]}</b><br/><span>${count} Skills</span></div>`, | |
| useHTML: true, | |
| verticalAlign: "bottom" | |
| } | |
| }); | |
| start += count; | |
| } | |
| return bands; | |
| }; | |
| const createPlotLines = (master) => { | |
| const plotLines = []; | |
| const courseBands = Object.keys(master); | |
| var start = -0.5; | |
| for (var i = 0; i <= courseBands.length - 1; i++) { | |
| const c = courseBands[i]; | |
| const count = Object.keys(master[c]).length; | |
| plotLines.push({ | |
| color: "black", | |
| width: 1, | |
| value: (start += count), | |
| dashStyle: "ShortDot", | |
| zIndex: 10 | |
| }); | |
| start += count; | |
| } | |
| plotLines.pop(); // do not need last line | |
| return plotLines; | |
| }; | |
| const chart = Highcharts.chart("container", { | |
| chart: { | |
| type: "column", | |
| animation: false, | |
| backgroundColor: "#f7f8fa", | |
| events: { | |
| load: function () { | |
| const bands = document.getElementsByClassName("highcharts-plot-band"); | |
| for (var i = 0; i <= bands.length - 1; i++) { | |
| let band = bands[i]; | |
| let bandElements = band.getBoundingClientRect(); | |
| let bandWidth = bandElements.width; | |
| const bandLabel = document.getElementById("band" + i); | |
| bandLabel.style.width = bandWidth - 16 + "px"; | |
| } | |
| }, | |
| redraw: function () { | |
| const bands = document.getElementsByClassName("highcharts-plot-band"); | |
| for (var i = 0; i <= bands.length - 1; i++) { | |
| let band = bands[i]; | |
| let bandElements = band.getBoundingClientRect(); | |
| let bandWidth = bandElements.width; | |
| const bandLabel = document.getElementById("band" + (i + 1)); | |
| bandLabel.style.width = bandWidth - 16 + "px"; | |
| } | |
| } | |
| } | |
| }, | |
| credits: { enabled: false }, | |
| title: { | |
| text: "" | |
| }, | |
| tooltip: { | |
| backgroundColor: null, | |
| borderWidth: 0, | |
| hideDelay: 100, | |
| shadow: false, | |
| useHTML: true, | |
| outside: true, | |
| positioner: function (boxWidth, boxHeight, point) { | |
| // console.log(this); | |
| const { plotX, plotY, h } = point; | |
| return { x: plotX + 50, y: plotY }; | |
| }, | |
| formatter: function (tooltip) { | |
| const { | |
| point: { color }, | |
| series: { name: masteryLevel, data }, | |
| x, | |
| y | |
| } = this; | |
| console.log(this, data); | |
| const { course } = data[x]; | |
| return ` | |
| <span class="tooltip-header">${course}</span><br/> | |
| <span class="tooltip-subheader">${skills[x]}</span><br/> | |
| <div class="tooltip-info"> | |
| <div class="tooltip-box" style="background-color: ${color}"></div><span class="tooltip-category">${masteryLevel}</span>: <span class="tooltip-value">${y}</span> | |
| </div> | |
| <img class="tooltip-image" src="${images[x]}" alt="graph image"/> | |
| `; | |
| }, | |
| style: { | |
| padding: 0 | |
| } | |
| }, | |
| plotOptions: { | |
| column: { | |
| groupPadding: 0, | |
| pointPadding: 0.15, | |
| borderWidth: 0, | |
| stacking: "normal", | |
| events: { | |
| click: function (event) { | |
| console.log("ASUH drilldown this", this); | |
| console.log("ASUH drilldown this", event); | |
| console.log("Waht point", event.point.x); | |
| // Use point to get the skill, and from there we use that to do the drilldown | |
| } | |
| }, | |
| states: { | |
| inactive: { | |
| enabled: false | |
| }, | |
| hover: { | |
| color: "#1865F2" | |
| } | |
| } | |
| }, | |
| series: { | |
| // pointWidth: 26 | |
| } | |
| }, | |
| legend: { | |
| align: "right", | |
| verticalAlign: "top", | |
| layout: "vertical", | |
| title: { text: "MASTERY LEVELS" }, | |
| backgroundColor: "white", | |
| padding: 20, | |
| x: -50, | |
| y: 0, | |
| symbolPadding: 15, | |
| symbolRadius: 2, | |
| itemMarginBottom: 8, | |
| borderColor: "lightgray", | |
| borderWidth: 1, | |
| borderRadius: 2, | |
| shadow: true | |
| }, | |
| xAxis: { | |
| title: { | |
| text: "UNITS", | |
| align: "right" | |
| }, | |
| labels: { | |
| enabled: false | |
| }, | |
| plotLines: createPlotLines(master), | |
| // [ | |
| // { | |
| // color: "black", | |
| // width: 1, | |
| // value: 2.5, | |
| // dashStyle: "ShortDot", | |
| // zIndex: 10 | |
| // }, | |
| // { | |
| // color: "black", | |
| // width: 1, | |
| // value: 4.5, | |
| // dashStyle: "ShortDot", | |
| // zIndex: 10 | |
| // } | |
| // ], | |
| plotBands: createBands(master), | |
| //[ | |
| // { | |
| // borderWidth: 1, | |
| // from: -0.5, | |
| // to: 2.5, | |
| // color: "#f7f8fa", | |
| // label: { | |
| // align: "left", | |
| // text: | |
| // "<div id='band0' class='band'><b>SYSTEM OF EQUATIONS</b><br/><span>4 Skills</span></div>", | |
| // useHTML: true, | |
| // verticalAlign: "bottom" | |
| // } | |
| // }, | |
| // { | |
| // borderWidth: 1, | |
| // from: 2.5, | |
| // to: 4.5, | |
| // color: "#f7f8fa", | |
| // label: { | |
| // align: "left", | |
| // text: | |
| // "<div id='band1' class='band'><b>FUNCTIONS</b><br/><span>2 Skills</span></div>", | |
| // useHTML: true, | |
| // verticalAlign: "bottom" | |
| // } | |
| // }, | |
| // { | |
| // borderWidth: 1, | |
| // from: 4.5, | |
| // to: 5.5, | |
| // color: "#f7f8fa", | |
| // label: { | |
| // align: "left", | |
| // text: | |
| // "<div id='band2' class='band'><b>SEQUENCES</b><br/><span>1 Skill</span></div>", | |
| // useHTML: true, | |
| // verticalAlign: "bottom" | |
| // } | |
| // } | |
| // ], | |
| tickWidth: 0 | |
| }, | |
| yAxis: { | |
| title: { enabled: false }, | |
| // allowDecimals: false, | |
| // min: 2 * 10, | |
| // max: 300 * 1.1, // gives some buffer at top | |
| gridLineWidth: 0, | |
| tickAmount: 13, | |
| tickWidth: 1, | |
| tickLength: 16, | |
| offset: 20, | |
| labels: { | |
| align: "left", | |
| x: 4, | |
| y: 4 | |
| } | |
| }, | |
| series: data | |
| // [ | |
| // // ["Skill 1", ...] | |
| // { | |
| // name: "Mastered", | |
| // data: [12, 8, 34, 32, 64, 72], | |
| // color: "#808080" | |
| // }, | |
| // { | |
| // name: "Proficient", | |
| // data: [95, 88, 30, 122, 25, 45], | |
| // color: "#A9A9A9" | |
| // }, | |
| // { | |
| // name: "Familiar", | |
| // data: [100, 80, 70, 111, 25, 13], | |
| // color: "#D3D3D3" | |
| // }, | |
| // { | |
| // name: "Attempted this skill", | |
| // data: [10, 22, 2, 48, 51, 66], | |
| // color: "#F5F5F5" | |
| // } | |
| // ] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .highcharts-tooltip > span { | |
| background: rgba(255, 255, 255, 0.85); | |
| border: 1px solid silver; | |
| border-radius: 3px; | |
| box-shadow: 1px 1px 2px #888; | |
| padding: 24px; | |
| } | |
| .tooltip-header { | |
| font-family: Lato; | |
| font-size: 12px; | |
| font-style: normal; | |
| font-weight: 700; | |
| line-height: 16px; | |
| letter-spacing: 0.6px; | |
| text-align: left; | |
| color: rgba(33, 36, 44, 0.64); | |
| margin-bottom: 4px; | |
| } | |
| .tooltip-subheader { | |
| font-family: Lato; | |
| font-size: 16px; | |
| font-style: normal; | |
| font-weight: 700; | |
| line-height: 22px; | |
| letter-spacing: 0em; | |
| text-align: left; | |
| color: background: rgba(0, 0, 0, 1); | |
| margin-bottom: 8px; | |
| } | |
| .tooltip-info { | |
| height: 8px; | |
| border-bottom: 1px solid rgba(33, 36, 44, 0.16); | |
| padding-bottom: 24px; | |
| } | |
| .tooltip-box { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| margin-right: 8px; | |
| } | |
| .tooltip-category { | |
| font-family: Lato; | |
| font-size: 12px; | |
| font-style: normal; | |
| font-weight: 700; | |
| line-height: 16px; | |
| letter-spacing: 0em; | |
| text-align: left; | |
| } | |
| .tooltip-value { | |
| font-family: Lato; | |
| font-size: 12px; | |
| font-style: normal; | |
| font-weight: 400; | |
| line-height: 16px; | |
| letter-spacing: 0em; | |
| text-align: left; | |
| } | |
| .tooltip-image { | |
| max-width: 230px; | |
| margin-top: 14px; | |
| } | |
| .band { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment