Charts

[vc_row full_width= »stretch_row » parallaxe= »déplacement de contenu » CSS= ».vc_custom_1430236698110{rembourrage: 35pixels !important;fond de rembourrage: 60pixels !important;image de fond: URL(http://vcpreview.com/80e7cd25e63ecf743e404978/wp-content/uploads/sites/23273/2015/01/background_flat.png?id=23) !important;position d'arrière-plan: centre;Répétition du fond: sans répétition;taille d'arrière-plan:couverture;} »][vc_column][vc_custom_heading text= »Charts » font_container= »étiquette:h2|taille de police:46|text_align:la gauche|Couleur:%23ffffff|hauteur de la ligne:1.5″ google_fonts= »famille de polices:Lato:100,100italique,300,300italique,régulier,italique,700,700italique,900,900italique|le style de police:700%20gras normal:700:normal »][vc_separator align= »alignez à gauche » border_width= »3″ el_width= »50″ el_class= »séparateur dans le titre »][vc_column_text css= ».vc_custom_1437482984436{marge supérieure: -15pixels !important;} »]Display your data using progress bar, line, round or pie charts.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text= »Progress Bar » font_container= »étiquette:h3|taille de police:38|text_align:centre|Couleur:%233a3a3a|hauteur de la ligne:1.2″ google_fonts= »famille de polices:Lato:100,100italique,300,300italique,régulier,italique,700,700italique,900,900italique|le style de police:400%20normal:400:normal » CSS= ».vc_custom_1422968391755{fond de rembourrage: 15pixels !important;} »][vc_column_text]

Progress Bar content element allows displaying your skills in a well crafted bars backed up with fancy CSS animation to perfectly drag attention of your customers.

[/vc_column_text][/vc_column][/vc_row][vc_ligne css= ».vc_custom_1422959791599{fond de rembourrage: 35pixels !important;} »][vc_column width= »1/2″][vc_progress_bar bgcolor= »bar_red »][vc_progress_bar bgcolor= »bar_turquoise » units= »% »][/vc_column][vc_column width= »1/2″][vc_progress_bar bgcolor= »bar_blue » options= »striped,animated »][vc_progress_bar values= »90|Development|#e6ed90,80|Design|#8de8e2,70|Commercialisation|#cb8de8″ bgcolor= »Douane » options= »striped,animated » custombgcolor= »#cb8de8″][/vc_column][/vc_row][vc_row full_width= »stretch_row_content_no_spaces »][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text= »Pie Chart » font_container= »étiquette:h3|taille de police:38|text_align:centre|Couleur:%233a3a3a|hauteur de la ligne:1.2″ google_fonts= »famille de polices:Lato:100,100italique,300,300italique,régulier,italique,700,700italique,900,900italique|le style de police:400%20normal:400:normal » CSS= ».vc_custom_1422968736831{fond de rembourrage: 15pixels !important;} »][vc_column_text]

Pie Chart content element allows displaying of your data by using fancy pie chart with easy to modify colors, values and labels.

[/vc_column_text][/vc_column][/vc_row][vc_ligne css= ».vc_custom_1422959791599{fond de rembourrage: 35pixels !important;} »][vc_column width= »1/4″][vc_pie value= »10″ label_value= »10″ couleur= »btn-primary » units= »% »][/vc_column][vc_column width= »1/4″][vc_pie value= »25″ label_value= »25″ couleur= »btn-success » units= »% »][/vc_column][vc_column width= »1/4″][vc_pie label_value= »50″ couleur= »btn-warning » units= »% »][/vc_column][vc_column width= »1/4″][vc_pie value= »75″ label_value= »75″ couleur= »btn-danger » units= »% »][/vc_column][/vc_row][vc_row full_width= »stretch_row_content_no_spaces »][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text= »Round Charts – Doughnut and Pie » font_container= »étiquette:h3|taille de police:38|text_align:centre|Couleur:%233a3a3a|hauteur de la ligne:1.2″ google_fonts= »famille de polices:Lato:100,100italique,300,300italique,régulier,italique,700,700italique,900,900italique|le style de police:400%20normal:400:normal » CSS= ».vc_custom_1435764795309{fond de rembourrage: 15pixels !important;} »][vc_column_text]

Round chart offers 2 new types of charts – Doughnut and Pie with multiple styling and animation preset options. Control colors, gaps and much more easily.

[/vc_column_text][/vc_column][/vc_row][vc_ligne css= ».vc_custom_1422959791599{fond de rembourrage: 35pixels !important;} »][vc_column width= »1/3″][vc_round_chart type= »doughnut » stroke_width= »2″][/vc_column][vc_column width= »1/3″][vc_round_chart type= »doughnut » stroke_width= »2″ values= »%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22violet%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22sandy-brown%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22value%22%3A%2250%22%2C%22color%22%3A%22chino%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D » animation= »easeOutQuart »][/vc_column][vc_column width= »1/3″][vc_round_chart stroke_width= »0″ values= »%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22turquoise%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2210%22%2C%22color%22%3A%22green%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D » animation= »easeOutBounce »][/vc_column][/vc_row][vc_ligne css= ».vc_custom_1422959791599{fond de rembourrage: 35pixels !important;} »][vc_column width= »1/3″][vc_round_chart style= »Douane » stroke_width= »5″ legend= » » values= »%5B%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2240%22%2C%22color%22%3A%22pink%22%2C%22custom_color%22%3A%22%23ead620%22%7D%2C%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22blue%22%2C%22custom_color%22%3A%22%23b972c9%22%7D%5D » animation= »easeOutQuart »][/vc_column][vc_column width= »1/3″][vc_round_chart type= »doughnut » stroke_width= »2″ legend= » » values= »%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2260%22%2C%22color%22%3A%22pink%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2250%22%2C%22color%22%3A%22orange%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%5D »][/vc_column][vc_column width= »1/3″][vc_round_chart type= »doughnut » style= »modern » stroke_width= »0″ legend= » » values= »%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2225%22%2C%22color%22%3A%22sky%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22value%22%3A%2255%22%2C%22color%22%3A%22vista-blue%22%2C%22custom_color%22%3A%22%23cec2ab%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2235%22%2C%22color%22%3A%22purple%22%2C%22custom_color%22%3A%22%23f4524d%22%7D%5D » animation= »easeOutBack »][/vc_column][/vc_row][vc_row full_width= »stretch_row_content_no_spaces »][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text= »Line and Bar Charts » font_container= »étiquette:h3|taille de police:38|text_align:centre|Couleur:%233a3a3a|hauteur de la ligne:1.2″ google_fonts= »famille de polices:Lato:100,100italique,300,300italique,régulier,italique,700,700italique,900,900italique|le style de police:400%20normal:400:normal » CSS= ».vc_custom_1435764769557{fond de rembourrage: 15pixels !important;} »][vc_column_text]

Line and Bar charts allows creating vertical charts with X and Y axis. Control colors, legend and much more.

[/vc_column_text][/vc_column][/vc_row][vc_ligne css= ».vc_custom_1422959791599{fond de rembourrage: 35pixels !important;} »][vc_column width= »1/2″][vc_line_chart type= »line » values= »%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%3B%2023%3B%2025%22%2C%22color%22%3A%22blue%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%3B%2030%3B%2035%22%2C%22color%22%3A%22pink%22%7D%5D » animation= »easeOutBack »][/vc_column][vc_column width= »1/2″][vc_line_chart values= »%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%3B%2023%3B%2025%22%2C%22color%22%3A%22sandy-brown%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%3B%2030%3B%2035%22%2C%22color%22%3A%22vista-blue%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22y_values%22%3A%2235%3B%2032%3B%2045%3B%2025%3B%2025%3B%2015%3B%2030%3B%2026%22%2C%22color%22%3A%22chino%22%2C%22custom_color%22%3A%22%23ebebeb%22%7D%5D » animation= »easeinQuad »][/vc_column][/vc_row]