4.5 Charts

1. Explanation of Each Element

Data:
• This is the main container for the data points that will be visualized. In this case, there’s only one element in the array, which represents the progress bar.
Path:
• The path likely refers to the source of the data that determines the progress bar value (like 37% in the image).
• element_ID suggests that the progress bar is connected to a specific data element or variable with an ID, where the value (e.g., 37) is fetched from.

Add more paths to get more bars. Like this

{
 "data": [
   {
     "path": "element_y"
   },
   {
     "path": "element_y"
   }
 ]
} 

By adding labels, you can name each bar to relate to the desired factor. Like this

{
 "data": [
   {
     "path": "element_y"
   },
   {
     "path": "element_x"
   }
 ],
 "labels": ["Quantity", "Quantity present"]
} 

2. How This Code Relates to the Progress Bar

While this JSON sets the data source, the visual appearance of the progress bar (such as color, size, and percentage display) would typically be controlled by other settings or the system interpreting this JSON.
• The value (37%) displayed in the bar comes from the element_ID.
• The bar fills up to represent the percentage, stopping at 37% of the full width (100%).

Summary
• The JSON code specifies where the progress data (like 37%) is coming from.
• The visual display of the progress bar is typically handled by the software interpreting the JSON.
• To customize the appearance (color, font, etc.), you would add more styling properties to the JSON.

1. Basic Structure of the JSON Code

{
 "data": [
   {
     "label": "",
     "columns": [
       { ... },  // OK
       { ... },  // N/A
       { ... },  // Remarks
       { ... }   // Not performed
     ]
   }
 ]
} 

• data: This is the main part of the JSON that defines what will be displayed in the chart.
• label: The label is empty here, which means the chart might not have a title or the title is handled elsewhere.
• columns: Each column represents a different data category (like OK, N/A, etc.).

2. Explaining Each Column

Each column represents a category of data with its label, data path, and color styling.

Example: OK Column

{
 "question": {
   "path": "calc_check_points_total_ok"
 },
 "label": "OK\n{0}%",
 "itemStyle": {
   "color": {
     "type": "range",
     "id": "percentage"
   }
 }
} 

• question.path: This points to the data source for the OK percentage. For example, if 40% of checks are OK, that value will appear here.
• label: Displays the category name (OK) followed by the percentage (e.g., OK 40%).
• itemStyle.color: The color of the bar is determined by the percentage range defined in the meta section.

3. Color Mapping (meta Section)

The meta section controls how colors are applied based on percentage values.

"meta": {
 "colors": {
   "ranges": {
     "percentage": {
       "palette": {
         "1": "#999FA7",   // Light gray for low percentages
         "25": "#667183",  // Medium gray for moderate percentages
         "50": "#33445E",  // Darker gray for higher percentages
         "75": "#001639",  // Almost black for very high percentages
         "-1": "#cccccc"   // Default gray for missing or invalid data
       },
       "default": "#f5f5f5"  // Light gray for unspecified values
     }
   }
 }
} 

Color Codes:
• #999FA7 (Light gray): For very low values (around 1%).
• #667183 (Medium gray): For values around 25%.
• #33445E (Dark gray-blue): For values around 50%.
• #001639 (Very dark blue/black): For values around 75% or higher.
• #cccccc (Neutral gray): For invalid or missing data.
** default:** If no data is provided, the color will default to light gray (#f5f5f5).

4. How the Chart Will Look

This JSON code will create a column chart with 4 bars representing:
1. OK
2. N/A
3. Remarks
4. Not performed

Each bar will have a percentage value and a color indicating how high that percentage is.
For example:
• If OK = 75%, the bar will be almost black (#001639).
• If Remarks = 10%, the bar will be light gray (#999FA7).

5. Customizing the Chart
If you want to customize labels, colors, or add more data points, you can modify the JSON like this:

{
 "data": [
   {
     "label": "Checkpoints Overview",
     "columns": [
       {
         "question": {
           "path": "calc_check_points_total_ok"
         },
         "label": "OK\n{0}%",
         "itemStyle": {
           "color": {
             "type": "range",
             "id": "percentage"
           }
         }
       },
       {
         "question": {
           "path": "calc_check_points_total_n_a"
         },
         "label": "Not Applicable\n{0}%",
         "itemStyle": {
           "color": {
             "type": "range",
             "id": "percentage"
           }
         }
       },
       {
         "question": {
           "path": "calc_check_points_total_remarks"
         },
         "label": "Remarks\n{0}%",
         "itemStyle": {
           "color": {
             "type": "range",
             "id": "percentage"
           }
         }
       },
       {
         "question": {
           "path": "calc_check_points_total_not_performed"
         },
         "label": "Not Performed\n{0}%",
         "itemStyle": {
           "color": {
             "type": "range",
             "id": "percentage"
           }
         }
       }
     ]
   }
 ]
} 

• Added Title: “label”: “Checkpoints Overview” will add a title to the chart.
• Renamed N/A: Changed “N/A” to “Not Applicable” for clarity.

Summary
• This JSON code creates a column chart that visualizes the percentage of different categories like OK, N/A, Remarks, and Not performed.
• The color of each bar changes depending on the percentage values, using shades of gray and blue to indicate performance levels.
• You can customize the labels, colors, and data sources easily by modifying the JSON structure.

1. Basic Structure of the JSON

{
 "data": {
   "outerRing": [ ... ],
   "innerRing": [ ... ],
   "centerCell": { ... }
 },
 "meta": {
   "colors": { ... }
 }
} 

• outerRing: Represents detailed subcategories (like 1a, 1b, etc.).
• innerRing: Displays main categories (like Employment & Conditions, Worker Health and Safety).
• centerCell: Shows an overall score at the center of the chart.
• meta.colors: Defines color ranges for different data values.

2. Detailed Breakdown of Each Section

A. outerRing (Subcategories)

Each element in the outerRing represents specific subcategories within the main categories.

{
 "outerRing": [
   [
     {
       "question": { "path": "_1a" },
       "label": "1a",
       "labelStyle": { "color": "#000", "fontSize": 14 },
       "itemStyle": { "color": { "type": "range", "id": "values" } }
     },
     {
       "question": { "path": "_1b" },
       "label": "1b",
       "labelStyle": { "color": "#000", "fontSize": 14 },
       "itemStyle": { "color": { "type": "range", "id": "values" } }
     }
   ],
   ...
 ]
} 

• path: This links to specific data values for each subcategory (e.g., _1a, _1b).
• label: This is the visible label on the chart, like 1a or 1b.
• labelStyle: Defines the label color (#000 for black) and font size (14px).
• itemStyle.color: Determines the color of each segment based on the value.

B. innerRing (Main Categories)

These are the primary categories shown closer to the center of the Sunburst chart.

{
 "innerRing": [
   {
     "question": { "path": "_1_sum" },
     "label": "A\nEmployment &\nConditions\n{0}",
     "itemStyle": { "color": { "type": "range", "id": "percentage" } },
     "labelStyle": { "fontSize": 16 }
   },
   ...
 ]
} 

• path: Points to the data value summing all subcategories (e.g., _1_sum is the total for category A).
• label: Displays category names with line breaks (\n) for better readability. Example:

A
Employment &
Conditions
{0}  (will be replaced by actual values) 

• itemStyle.color: Uses the** percentage** color palette to visualize the overall performance.
• labelStyle: Sets the font size to 16px, making these labels more prominent.

C. centerCell (Overall Score)

This is the central part of the Sunburst chart, showing the total or overall score.

{
 "centerCell": {
   "question": { "path": "percentage_score" },
   "label": "Score\n{0}%",
   "labelStyle": { "fontSize": 16 },
   "itemStyle": {
     "color": { "type": "range", "id": "percentage" }
   }
 }
} 

• path: Links to the overall score data (percentage_score).
• label: Displays the word Score followed by the percentage (e.g., Score 85%).
• itemStyle.color: The color of the center will reflect the score using the percentage color palette.
• labelStyle: Ensures the font size is 16px for clarity.

3. Color Mapping (meta.colors)

The meta.colors section defines how the different data values are visualized using colors.

A. Percentage Color Palette (for inner rings & center score)

"percentage": {
 "palette": {
   "0.001": "#e06666",  // Red for very low percentages
   "1": "#9fa5cc",
   "2": "#6fa8dc",
   "3": "#4bbacc",
   "4": "#6aa84f",     // Green for good scores
   "50": "#6fa8dc",    // Midpoint blue
   "51": "#4bbacc", 
   "100": "#6aa84f"    // Green for perfect scores
 },
 "default": "#f5f5f5"  // Light gray for undefined values
} 

• 0.001: Red (#e06666) for very poor scores.
• 50: Blue (#6fa8dc) for mid-range scores.
• 100: Green (#6aa84f) for excellent scores.

B. Values Color Palette (for outer rings)

"values": {
 "palette": {
   "0": "#e06666",    // Red for the lowest values
   "1": "#6fa8dc",    // Blue for medium values
   "2": "#6aa84f"     // Green for the highest values
 },
 "default": "#f5f5f5"
} 

• 0: Red (#e06666) for the lowest performance in subcategories.
• 1: Blue (#6fa8dc) for moderate performance.
• 2: Green (#6aa84f) for the best performance.

4. How the Chart Will Look
The innermost circle will show the overall score (e.g., Score 85%).
The first ring (innerRing) around the center will show major categories like:
• A: Employment & Conditions
• B: Worker Health and Safety
• C: Environmental Practices
• D: Anti-Corruption and Ethical Conduct
The outer ring (outerRing) will display subcategories like:
• 1a, 1b under Employment & Conditions.
• 2a, 2b under Worker Health and Safety.
Colors will range from red (poor performance) to green (good performance), giving a quick visual cue of strengths and weaknesses.

5. Customization Options

If you want to customize labels, colors, or data paths, here’s an example modification:

{
 "data": {
   "innerRing": [
     {
       "question": { "path": "_1_sum" },
       "label": "Category A\nEmployment\n{0}%",
       "itemStyle": { "color": { "type": "range", "id": "percentage" } },
       "labelStyle": { "fontSize": 18, "color": "#333" }
     }
   ],
   "outerRing": [
     [
       {
         "question": { "path": "_1a" },
         "label": "Sub A1",
         "labelStyle": { "color": "#333", "fontSize": 12 },
         "itemStyle": { "color": { "type": "range", "id": "values" } }
       }
     ]
   ],
   "centerCell": {
     "question": { "path": "percentage_score" },
     "label": "Overall\n{0}%",
     "labelStyle": { "fontSize": 20, "color": "#000" }
   }
 }
} 

• Changed Labels: “Sub A1” and “Overall”.
• Font Sizes Updated: For a more distinctive look.
• Label Colors: Changed from black (#000) to dark gray (#333).

Summary
• This JSON builds a Sunburst Chart that visually organizes hierarchical data.
• Inner rings show major categories, outer rings display subcategories, and the center highlights the overall score.
• Colors dynamically change based on data values, offering quick insights into performance levels.

1. Structure of the Data

The data section defines the structure of the chart. It includes spokes (the rings of the sunburst) and the centerCell (the middle part of the chart).

"data": {
   "spokes": [
       [...],  // First ring of data (inner ring)
       [...]   // Second ring of data (outer ring)
   ],
   "centerCell": {
       "label": "Score\n{0}%\n"
   }
} 

• spokes: Each array inside the spokes array represents a ring in the sunburst chart. The first array is the inner ring, and the second array is the outer ring.
• centerCell: This is the center of the chart, displaying the overall score (e.g., 63% in your image).

2. Defining Each Segment

Each segment inside the rings (spokes) is defined by its label, style, and color.

Example of a segment:

{
   "question": {
       "path": "_1a1"
   },
   "label": "1a",
   "labelStyle": {
       "color": "#000",
       "fontSize": 14
   },
   "itemStyle": {
       "color": {
           "type": "range",
           "id": "values"
       }
   }
} 

• label: The name displayed on the segment (e.g., “1a”).
• labelStyle: Defines the appearance of the label:
• color: The text color (black: #000).
• fontSize: Size of the text (14).
• itemStyle: Defines the color of the segment. The color depends on the values provided in the meta section.

3. Center Cell (Score Display)

"centerCell": {
   "question": {
       "path": "percentage_score"
   },
   "label": "Score\n{0}%\n",
   "labelStyle": {
       "fontSize": 16
   }
} 

• label: This displays the score in the center (e.g., “Score 63%”).
• labelStyle: Sets the font size for the center text.

4. Color Mapping (meta section)

The meta section controls how colors are applied to the segments based on their values.

"meta": {
   "colors": {
       "ranges": {
           "values": {
               "palette": {
                   "0": "#e06666",  // Red for lower values
                   "1": "#6fa8dc",  // Blue for medium values
                   "2": "#6aa84f"   // Green for higher values
               },
               "default": "#f5f5f5"  // Default color (light gray)
           }
       }
   }
} 

** Color Codes:**
• #e06666 (Red): Represents lower values (poor performance).
• #6fa8dc (Blue): Represents medium values (average performance).
• #6aa84f (Green): Represents higher values (good performance).
• #f5f5f5 (Gray): Default color when no value is assigned.

The color range helps visually differentiate performance in each segment.

5. Putting It All Together
• The inner ring contains segments labeled 1a, 1b, 2a, 2b.
• The outer ring includes segments 3a, 3b, 4a, 4b, and 4c.
• Each segment’s color is determined by the values assigned, mapped to the colors defined in the palette.
• The center shows an overall score (e.g., 63%), summarizing the data in the rings.

Summary

This JSON code creates a sunburst heatmap where:
• Each ring represents a set of related data points.
• Colors highlight the performance of each segment.
• The center displays an overall score, providing a quick summary.