• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.io/scripts/lesson.js"></script>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                font-family: roboto;
                font-weight: 400;
                height: 600;
            }
    
            #chart {
                min-height: 380px;
            }
    
            @-webkit-keyframes highlightEditableFields {
                from {
                    background: rgba(255, 235, 59, 0.1);
                }
    
                to {
                    background: rgba(255, 235, 59, 0.8);
                }
            }
    
            @keyframes highlightEditableFields {
                from {
                    background: rgba(255, 235, 59, 0.1);
                }
    
                to {
                    background: rgba(255, 235, 59, 0.8);
                }
            }
    
            .prettyprint {
                background-color: #f7f7f9;
                border: 1px solid #e1e1e8;
            }
    
            .prettyprint .chart-editor {
                animation-direction: alternate;
                animation-duration: 1.5s;
                animation-iteration-count: infinite;
                animation-name: highlightEditableFields;
                animation-timing-function: linear;
                /*background: rgba(255, 235, 59, 0.3);*/
                border-bottom: 1px dotted rgb(255, 193, 7);
                color: #06E;
                cursor: pointer;
                position: relative;
                padding: 8px;
            }
    
            .chart-editor:hover {
                border-color: #03C;
                color: #09F;
            }
    
            .chart-editor__input {
                border: none;
                display: none;
                font-family: inherit;
                font-size: inherit;
                font-weight: inherit;
                margin: 0;
                padding: 0;
            }
    
            input.chart-editor__input {
                border: none;
                height: initial;
                padding: 0;
            }
    
            select.chart-editor__input {
                width: initial;
            }
    
            .chart-editor__input.short {
                padding: 0 5px;
            }
    
            .chart-editor__input:focus {
                border: none;
                box-shadow: none;
                outline: none;
            }
    
            .chart-editor__content {
                display: initial;
            }
    
            .chart-editor__content span {
                color: #06E;
            }
    
            .chart-editor select {
                background: none;
                line-height: inherit;
                -webkit-appearance: menulist;
                -moz-appearance: menulist;
                -ms-appearance: menulist;
            }
    
            .chart-editor.active .chart-editor__input {
                display: initial;
            }
    
            .chart-editor.active .chart-editor__tooltip {
                display: initial;
            }
    
            .chart-editor.active .chart-editor__content {
                display: none;
            }
    
            #interact-with-me {
                background-color: #00BAF2;
                position: absolute;
                left: 325px;
                top: 81px;
                padding: 4px;
                color: #FFF;
                border-radius: 5px;
            }
    
            #interact-with-me::before {
                content: "";
                border-style: solid;
                border-width: 11px 16px 11px 0;
                border-color: transparent #00BAF2 transparent transparent;
                position: absolute;
                left: -12px;
                top: 2px;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <span id='interact-with-me'>Double-click to active the dropdown</span>
        <pre class="prettyprint" id="code"></pre>
        <div id='chart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            zingchart.loadModules('maps,maps-world-continents');
    
            window._paq = false; // turn off tracking
    
            var lesson = new Lesson({
                chartID: 'chart',
                chartHeight: '100%',
                codeID: 'code',
                chart: {
                    shapes: [{
                        type: 'zingchart.maps',
                        options: {
                            name: '#MAP_NAME#'
                        }
                    }]
                },
                fields: {
                    "#MAP_NAME#": {
                        input: "select",
                        default: 'world.continents',
                        values: ['world.continents', 'usa', 'can', 'mex', 'chn', 'ind', 'gbr', 'fra', 'zaf', 'aus']
                    }
                }
            });
    
            lesson.MONOSPACE_HEIGHT = 14;
    
            lesson.render();
    
            zingchart.loadModules('maps-usa, maps-can, maps-mex, maps-chn, maps-ind, maps-gbr, maps-fra, maps-zaf, maps-aus');
    
            setTimeout(function() {
                // if window loaded correctly
                if (document.getElementById('interact-with-me')) {
                    document.getElementById('interact-with-me').style.visibility = 'hidden';
                }
            }, 8500);
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<script src="https://cdn.zingchart.io/scripts/lesson.js"></script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	  <span id='interact-with-me'>Double-click to active the dropdown</span>
    	  <pre class="prettyprint" id="code"></pre>
    		<div id='chart'></div>
    	</body>
    </html>
    html, body {
      font-family:roboto;
      font-weight:400;
      height:600;
    }
    
    #chart{
      min-height:380px;
    }
    
    @-webkit-keyframes highlightEditableFields {
      from {
        background: rgba(255, 235, 59, 0.1);
      }
      to {
        background: rgba(255, 235, 59, 0.8);
      }
    }
    
    @keyframes highlightEditableFields {
      from {
        background: rgba(255, 235, 59, 0.1);
      }
      to {
        background: rgba(255, 235, 59, 0.8);
      }
    }
    
    .prettyprint {
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
    
    .prettyprint .chart-editor {        
      animation-direction: alternate;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-name: highlightEditableFields;
      animation-timing-function: linear;
      /*background: rgba(255, 235, 59, 0.3);*/
      border-bottom: 1px dotted rgb(255, 193, 7);
      color: #06E;
      cursor: pointer;
      position: relative;
      padding: 8px;
    }  
    
    .chart-editor:hover {
      border-color: #03C;
      color: #09F;
    }
    .chart-editor__input {
      border: none;
      display: none;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      margin: 0;
      padding: 0;
    }
    input.chart-editor__input {
      border: none;
      height: initial;
      padding: 0;
    }
    select.chart-editor__input {
      width: initial;
    }
    .chart-editor__input.short {
      padding: 0 5px;
    }
    .chart-editor__input:focus {
      border: none;
      box-shadow: none;
      outline: none;
    }
    .chart-editor__content {        
      display: initial;
    }
    .chart-editor__content span {
      color: #06E;
    }
    
    .chart-editor select {
      background: none;
      line-height: inherit;
      -webkit-appearance: menulist;
      -moz-appearance: menulist;
      -ms-appearance: menulist;
    }
    .chart-editor.active .chart-editor__input {
      display: initial;
    }
    .chart-editor.active .chart-editor__tooltip {
      display: initial;
    }
    .chart-editor.active .chart-editor__content {
      display: none;
    }
    
    #interact-with-me {
      background-color:#00BAF2;
      position:absolute;
      left:325px;
      top:81px;
      padding:4px;
      color:#FFF;
      border-radius:5px;
    }
    
    #interact-with-me::before {
       content:"";
        border-style: solid;
        border-width: 11px 16px 11px 0;
        border-color: transparent #00BAF2 transparent transparent;
        position: absolute;
        left: -12px;
        top:2px;
    }
    zingchart.loadModules('maps,maps-world-continents');
    
    window._paq = false; // turn off tracking
    
    var lesson = new Lesson({
      chartID: 'chart',
      chartHeight: '100%',
      codeID: 'code',
      chart: {
      	shapes: [{
        	type: 'zingchart.maps',
          options: {
          	name: '#MAP_NAME#'
          }
        }]
      },
      fields: {
      	"#MAP_NAME#": {
        	input: "select",
          default: 'world.continents',
          values: ['world.continents', 'usa', 'can', 'mex', 'chn', 'ind', 'gbr', 'fra', 'zaf', 'aus']
        }
      }
    });
    
    lesson.MONOSPACE_HEIGHT = 14;
    
    lesson.render();
    
    zingchart.loadModules('maps-usa, maps-can, maps-mex, maps-chn, maps-ind, maps-gbr, maps-fra, maps-zaf, maps-aus');
    
    setTimeout(function() {
      // if window loaded correctly
      if (document.getElementById('interact-with-me')) {
        document.getElementById('interact-with-me').style.visibility = 'hidden';
      }
    }, 8500);