Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div ng-app="myApp" ng-controller="myController">
  <div google-chart chart="myChart"></div>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    
    $scope.myChart = {
       "type":"ComboChart",
       "options":{
          "chartArea":{
             "left":"15%",
             "width":"85%",
             "height":"85%"
          },
          "focusTarget":"category",
          "tooltip":{
             "isHtml":true
          },
          "legend":{
             "position":"none"
          },
          "intervals":{
             "style":"area",
             "color":"series-color"
          },
          "interval":{
             "IC95Ahaut":{
                "color":"#f9cb9c",
                "fillOpacity":0.3
             },
             "IC95Abas":{
                "color":"#f9cb9c",
                "fillOpacity":0.3
             },
             "IC80Ahaut":{
                "color":"#f9cb9c",
                "fillOpacity":0.7
             },
             "IC80Abas":{
                "color":"#f9cb9c",
                "fillOpacity":0.7
             },
             "IC95Bhaut":{
                "color":"#4eced7",
                "fillOpacity":0.3
             },
             "IC95Bbas":{
                "color":"#4eced7",
                "fillOpacity":0.3
             },
             "IC80Bhaut":{
                "color":"#4eced7",
                "fillOpacity":0.7
             },
             "IC80Bbas":{
                "color":"#4eced7",
                "fillOpacity":0.7
             }
          },
          "series":{
             "0":{
                "color":"#f9cb9c",
                "targetAxisIndex":0,
                "type":"line",
                "lineWidth":0,
                "pointSize":0,
                "labelInLegend":"IC95A"
             },
             "1":{
                "color":"#f9cb9c",
                "targetAxisIndex":0,
                "type":"line",
                "lineWidth":0,
                "pointSize":0,
                "labelInLegend":"IC80A"
             },
             "2":{
                "color":"#4eced7",
                "targetAxisIndex":0,
                "type":"line",
                "lineWidth":0,
                "pointSize":0,
                "labelInLegend":"IC95B"
             },
             "3":{
                "color":"#4eced7",
                "targetAxisIndex":0,
                "type":"line",
                "lineWidth":0,
                "pointSize":0,
                "labelInLegend":"IC80B"
             }
          },
          "vAxes":{
             "0":{
                "format":"###.##%",
                "title":"Performance",
                "viewWindowMode":"maximized"
             }
          }
       },
       "data":{
          "cols":[
             {
                "id":"date",
                "label":"Date",
                "type":"date"
             },
             {
                "id":"ht",
                "type":"string",
                "role":"tooltip",
                "p":{
                   "html":true
                }
             },
             {
                "id":"IC95A",
                "label":"IC95A",
                "type":"number"
             },
             {
                "id":"IC95Abas",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC95Ahaut",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC80A",
                "label":"IC80A",
                "type":"number"
             },
             {
                "id":"IC80Abas",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC80Ahaut",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC95B",
                "label":"IC95B",
                "type":"number"
             },
             {
                "id":"IC95Bbas",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC95Bhaut",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC80B",
                "label":"IC80B",
                "type":"number"
             },
             {
                "id":"IC80Bbas",
                "type":"number",
                "role":"interval"
             },
             {
                "id":"IC80Bhaut",
                "type":"number",
                "role":"interval"
             }
          ],
          "rows":[
             {
                "c":[
                   {
                      "v":new Date('2017-05-23T22:00:00.000Z')
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 24 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,32% - 1,66%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,24% - 1,76%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,19% - 1,52%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,11% - 1,61%</strong></td></tr>"
                   },
                   {
                      "v":0.013600000000000001
                   },
                   {
                      "v":0.0111
                   },
                   {
                      "v":0.0161
                   },
                   {
                      "v":0.01355
                   },
                   {
                      "v":0.0119
                   },
                   {
                      "v":0.0152
                   },
                   {
                      "v":0.015
                   },
                   {
                      "v":0.0124
                   },
                   {
                      "v":0.0176
                   },
                   {
                      "v":0.0149
                   },
                   {
                      "v":0.0132
                   },
                   {
                      "v":0.0166
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-24T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 25 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,35% - 1,57%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,30% - 1,63%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,07% - 1,27%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,02% - 1,32%</strong></td></tr>"
                   },
                   {
                      "v":0.0117
                   },
                   {
                      "v":0.0102
                   },
                   {
                      "v":0.0132
                   },
                   {
                      "v":0.011699999999999999
                   },
                   {
                      "v":0.0107
                   },
                   {
                      "v":0.0127
                   },
                   {
                      "v":0.01465
                   },
                   {
                      "v":0.013
                   },
                   {
                      "v":0.0163
                   },
                   {
                      "v":0.014599999999999998
                   },
                   {
                      "v":0.0135
                   },
                   {
                      "v":0.0157
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-25T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 26 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,77%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,54% - 1,82%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,16% - 1,32%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,12% - 1,37%</strong></td></tr>"
                   },
                   {
                      "v":0.01245
                   },
                   {
                      "v":0.0112
                   },
                   {
                      "v":0.0137
                   },
                   {
                      "v":0.0124
                   },
                   {
                      "v":0.0116
                   },
                   {
                      "v":0.0132
                   },
                   {
                      "v":0.016800000000000002
                   },
                   {
                      "v":0.0154
                   },
                   {
                      "v":0.0182
                   },
                   {
                      "v":0.016800000000000002
                   },
                   {
                      "v":0.0159
                   },
                   {
                      "v":0.0177
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-26T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 27 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,75%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,55% - 1,79%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,25% - 1,39%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,21% - 1,43%</strong></td></tr>"
                   },
                   {
                      "v":0.0132
                   },
                   {
                      "v":0.0121
                   },
                   {
                      "v":0.0143
                   },
                   {
                      "v":0.0132
                   },
                   {
                      "v":0.0125
                   },
                   {
                      "v":0.0139
                   },
                   {
                      "v":0.0167
                   },
                   {
                      "v":0.0155
                   },
                   {
                      "v":0.0179
                   },
                   {
                      "v":0.0167
                   },
                   {
                      "v":0.0159
                   },
                   {
                      "v":0.0175
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-27T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 28 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,73%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,55% - 1,77%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,27% - 1,40%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,24% - 1,43%</strong></td></tr>"
                   },
                   {
                      "v":0.01335
                   },
                   {
                      "v":0.0124
                   },
                   {
                      "v":0.0143
                   },
                   {
                      "v":0.01335
                   },
                   {
                      "v":0.0127
                   },
                   {
                      "v":0.014
                   },
                   {
                      "v":0.0166
                   },
                   {
                      "v":0.0155
                   },
                   {
                      "v":0.0177
                   },
                   {
                      "v":0.0166
                   },
                   {
                      "v":0.0159
                   },
                   {
                      "v":0.0173
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-28T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 29 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,56% - 1,68%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,53% - 1,72%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,26% - 1,37%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,23% - 1,40%</strong></td></tr>"
                   },
                   {
                      "v":0.01315
                   },
                   {
                      "v":0.0123
                   },
                   {
                      "v":0.014
                   },
                   {
                      "v":0.01315
                   },
                   {
                      "v":0.0126
                   },
                   {
                      "v":0.0137
                   },
                   {
                      "v":0.01625
                   },
                   {
                      "v":0.0153
                   },
                   {
                      "v":0.0172
                   },
                   {
                      "v":0.0162
                   },
                   {
                      "v":0.0156
                   },
                   {
                      "v":0.0168
                   }
                ]
             },
             {
                "c":[
                   {
                      "v":new Date("2017-05-29T22:00:00.000Z")
                   },
                   {
                      "v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 30 mai 2017</strong></td></tr><tr><td>&nbsp;</td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,56% - 1,68%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,52% - 1,71%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,25% - 1,36%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,22% - 1,39%</strong></td></tr>"
                   },
                   {
                      "v":0.013049999999999999
                   },
                   {
                      "v":0.0122
                   },
                   {
                      "v":0.0139
                   },
                   {
                      "v":0.013049999999999999
                   },
                   {
                      "v":0.0125
                   },
                   {
                      "v":0.0136
                   },
                   {
                      "v":0.01615
                   },
                   {
                      "v":0.0152
                   },
                   {
                      "v":0.0171
                   },
                   {
                      "v":0.0162
                   },
                   {
                      "v":0.0156
                   },
                   {
                      "v":0.0168
                   }
                ]
             }
          ]
       }
    };

  });
              
            
!
999px

Console