JDS | Graph Chart

Chart Regular

you can put class jds-border for making a border, boundary in the very parent tag.

We have to put important class jds-bar-chart in the root div. Then we have to write two UI element, first one class numbers and another one class bar. if you use big tag into a bar the contain show 30px above the bar. And you don't use big the content will show into bar. Check html structure below.

One important thing we have to know - Here is a script file we need to install. Like bar-chart.js in Vandor directory

Maximum Annual Contributions

$160,000
$140,000
$120,000
$100,000
$80,000
$60,000
$40,000
$20,000
$0

$110,000
Simple plan
$54,000
SEP
$6,000
SOLO 401(K)
$150,500
Cash Balance


  
      $160,000
      $140,000
      $120,000
      $100,000
      $80,000
      $60,000
      $40,000
      $20,000
      $0
  
  
      
        
          $110,000
                                          
        Simple plan
      
      
        
          $54,000
        
        SEP
      
      
        
          $6,000
        
          SOLO 401(K)
      
      
        
          $150,500
        
        Cash Balance

Chart multi Item Bar

Here important classes are multiItemBar and datamiddle

multiItemBar this class for multiple item shown in a bar with stack view.

datamiddle this is for view data/caption/value into middle of each bar.

Maximum Annual Contributions by Owner Age

$250,000
$200,000
$150,000
$100,000
$50,000
$0

$18,000

$15,900

$84,800
35
$18,000

$15,900

$108,650
40
$18,000

$15,900

$140,450
45
$24,000

$15,900

$180,200
50
$24,000

$15,900

$196,100
55
$24,000

$15,900

$209,350
60
$24,000

$15,900

$230,550
65

401(k) defer
Profit Share
Cash Balance


  
      
          $250,000
          $200,000
          $150,000
          $100,000
          $50,000
          $0
      
      
          
           $18,000 
           $15,900 
           $84,800 
          35
          
          
           $18,000 
           $15,900 
           $108,650 
          40
          
          
           $18,000 
           $15,900 
           $140,450 
          45
          
          
           $24,000 
           $15,900 
           $180,200 
          50
          
          
           $24,000 
           $15,900 
           $196,100 
          55
          
          
           $24,000 
           $15,900 
           $209,350 
          60
          
          
           $24,000 
           $15,900 
           $230,550 
          65
          
      
  

   
  
  
    
        
    401(k) defer
    
    
        
        Profit Share
    
    
        
        Cash Balance

Chart Couple Column

We have to put important class jds-bar-chart in the root div. Then we have to write two ul element, first one class numbers and another one class bars. check html structure below.

We should follow some others classes and html elements like. classes are coupleBar, withShadow

Cash Balance Overview

$250,000
$200,000
$150,000
$100,000
$50,000
$0

50
55
60
65

401(k) PS Contributions
401(k) PS Contributions Credits


  
    
      $250,000
      $200,000
      $150,000
      $100,000
      $50,000
      $0
    
    
      
          
          
        50
      
      
          
          
        55
      
      
          
          
        60
      
      
          
          
        65
      
    
  
   
  
    
           401(k) PS Contributions     
    
    
             401(k) PS Contributions Credits

Chart Max Item

Here important classes are multiItemBar and datamiddle

multiItemBar this class for multiple item shown in a bar with stack view.

datamiddle this is for view data/caption/value into middle of each bar.

Maximum Annual Contributions

$200,000
$160,000
$140,000
$120,000
$100,000
$80,000
$60,000
$40,000
$20,000
$0

$10
SIMPLE Plan
$12,500
SIMPLE Plan
$54,000
SEP
$60,000
SOLO 401(K)
$150,500
Cash Balance
$200,000+
401k+CB
$200,000+
401k+CB
$200,000+
401k+CB
$200,000+
401k+CB
$200,000+
401k+CB


  
    $200,000
    $160,000
    $140,000
    $120,000
    $100,000
    $80,000
    $60,000
    $40,000
    $20,000
    $0
  
  
    
       $10 
      SIMPLE Plan
    
    
       $12,500 
      SIMPLE Plan
    
    
       $54,000 
      SEP
    
    
       $60,000 
      SOLO 401(K)
    
    
       $150,500 
      Cash Balance
    
    
       $200,000+ 
      401k+CB
    
    
       $200,000+ 
      401k+CB
    
    
       $200,000+ 
      401k+CB
    
    
       $200,000+ 
      401k+CB
    
    
       $200,000+ 
      401k+CB

Pie Chart

We have to put class pieChart in the desired div. Then we can style backbround color by adding class blueBg in same div and then style chart fill color adding by class orangeData in same div. also avable all color we follow regularly. like 1) background blueBg, greenBg, orangeBg, grayBg, yellowBg, whiteBg, 2) fill color blueData, greenData, orangeData, grayData, yellowData, whiteData, . check html structure below.

The percentage (0% to 100%) is important to show data. If you view Percentage under chart add class viewPercentage.

You can check exeample here...

30

pieChart whiteBg yellowData

60

pieChart blueBg orangeData

57

pieChart blueBg grayData

Portfolio Chart

We have to put class jds-portfolio-chart in the desired div. Then we can style backbround color by adding JDS Background classes like:- jds-bg-worning.

The percentage (0% to 100%) is important to show data. If you view Percentage under chart add class viewPercentage.

You can check exeample here...

- Portfolio A
- -$5,000
- $10,000
- Portfolio B
- -$8,250
- -$16,500
- Portfolio C
- -$11,500
- -$23,500
- Portfolio D
- -$14,750
- -$29,500
- Portfolio E
- -$18,000
- -$36,000
- Portfolio F
- -$21,250
- -$42,500
- Portfolio G
- -$24,000
- -$49,000


  
    
        
          
            
            
              Portfolio A
            
          
        
        
          
 -$5,000
        
        
          
 $10,000
        
    
  

  
    
        
          
            
            
              Portfolio B
            
          
        
        
          
 -$8,250
        
        
          
 -$16,500
        
    
  

  
    
        
          
            
            
              Portfolio C
            
          
        
        
          
 -$11,500
        
        
          
 -$23,500
        
    
  

  
    
        
          
            
            
              Portfolio D
            
          
        
        
          
 -$14,750
        
        
          
 -$29,500
        
    
  

  
    
        
          
            
            
              Portfolio E
            
          
        
        
          
 -$18,000
        
        
          
 -$36,000
        
    
  

  
    
        
          
            
            
              Portfolio F
            
          
        
        
          
 -$21,250
        
        
          
 -$42,500
        
    
  

  
    
        
          
            
            
              Portfolio G
            
          
        
        
          
 -$24,000
        
        
          -$49,000

- Label A
- -$10,000
- Label B
- -$16,500
- Label C
- -$23,500
- Label D
- -$29,500
- Label E
- -$36,000
- Label F
- -$42,500
- Label G
- -$49,000

- Label I
- -$10,000
- Label J
- -$16,500
- Label K
- -$23,500
- Label L
- -$29,500
- Label M
- -$36,000
- Label N
- -$42,500
- Label O
- -$49,000

- -$5,000
- $10,000
- -$8,250
- -$16,500
- -$11,500
- -$23,500
- -$14,750
- -$29,500
- -$18,000
- -$36,000
- -$21,250
- -$42,500
- -$24,000
- -$49,000

Graph Chart

You can add google map using Google API

Chart Regular

Maximum Annual Contributions

Chart multi Item Bar

Maximum Annual Contributions by Owner Age

Chart Couple Column

Cash Balance Overview

Chart Max Item

Maximum Annual Contributions

Pie Chart

Portfolio Chart