• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="Op+pYV6Q/NszOhHRQ6eoRA==" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script nonce="Op+pYV6Q/NszOhHRQ6eoRA==" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
      <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
      <script nonce="Op+pYV6Q/NszOhHRQ6eoRA==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .container {
          width: 400px;
          height: 200px;
          min-width: 400px;
          border: 1px dashed #777;
        }
    
        #myChart {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
      <script nonce="Op+pYV6Q/NszOhHRQ6eoRA==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'area',
          scaleX: {
            minValue: 1457101800000,
            maxValue: 1457125200000,
            step: '30minute',
            transform: {
              type: 'date',
              all: '%g:%i'
            },
            label: {
              text: 'Trading Day',
              fontSize: 16
            },
            item: {
              fontSize: 12
            },
            itemsOverlap: true,
            maxItems: 14,
            mediaRules: [{
                maxWidth: 500,
                maxItems: 3,
                label: {
                  fontSize: 12
                },
                item: {
                  fontSize: 9
                }
              },
              {
                maxWidth: 300,
                label: {
                  visible: false
                }
              }
            ]
          },
          scaleY: {
            values: '30:34:1',
            format: '$%v',
            label: {
              text: 'Price',
              fontSize: 16
            },
            item: {
              fontSize: 12
            },
            guide: {
              lineStyle: 'solid'
            },
            mediaRules: [{
                maxWidth: 500,
                values: '30:34:2',
                label: {
                  fontSize: 12
                },
                item: {
                  fontSize: 9
                }
              },
              {
                maxWidth: 300,
                label: {
                  visible: false
                }
              }
            ]
          },
          utc: true,
          timezone: -5, //EST time
          plot: {
            tooltip: {
              text: '$%v/share<br>at<br>%kv',
              decimals: 2,
              transform: {
                type: 'date',
                all: '%g:%i %a'
              },
              borderRadius: '3px'
            },
            lineColor: '#1ABC9C',
            backgroundColor: '#3498DB #1ABC9C',
            marker: {
              backgroundColor: '#3498DB',
              borderColor: '#1ABC9C',
              size: 3
            },
            alphaArea: 0.5
          },
          plotarea: {
            adjustLayout: true
          },
          series: [{
            values: [
              [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
              [1457103600000, 31.30], //10:00 a.m.
              [1457105400000, 30.95], //10:30 a.m.
              [1457107200000, 30.99], //11:00 a.m.
              [1457109000000, 32.33], //11:30 a.m.
              [1457110800000, 33.34], //12:00 p.m.
              [1457112600000, 33.01], //12:30 p.m.
              [1457114400000, 34], //1:00 p.m.
              [1457116200000, 33.64], //1:30 p.m.
              [1457118000000, 32.59], //2:00 p.m.
              [1457119800000, 32.60], //2:30 p.m.
              [1457121600000, 31.99], //3:00 p.m.
              [1457123400000, 31.14], //3:30 p.m.
              [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
            ]
          }]
        };
    
        // adjust the refresh rate of the chart
        zingchart.DEV.RESIZESPEED = 50;
        zingchart.DEV.DEBOUNCESPEED = 50;
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%'
        });
    
        // initiate jquery resizable container for demo purposes
        $('.container').resizable();
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
      <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
    </body>
    
    </html>
    .container {
      width: 400px;
      height: 200px;
      min-width: 400px;
      border: 1px dashed #777;
    }
    
    #myChart {
      width: 100%;
      height: 100%;
    }
    let chartConfig = {
      type: 'area',
      scaleX: {
        minValue: 1457101800000,
        maxValue: 1457125200000,
        step: '30minute',
        transform: {
          type: 'date',
          all: '%g:%i'
        },
        label: {
          text: 'Trading Day',
          fontSize: 16
        },
        item: {
          fontSize: 12
        },
        itemsOverlap: true,
        maxItems: 14,
        mediaRules: [{
            maxWidth: 500,
            maxItems: 3,
            label: {
              fontSize: 12
            },
            item: {
              fontSize: 9
            }
          },
          {
            maxWidth: 300,
            label: {
              visible: false
            }
          }
        ]
      },
      scaleY: {
        values: '30:34:1',
        format: '$%v',
        label: {
          text: 'Price',
          fontSize: 16
        },
        item: {
          fontSize: 12
        },
        guide: {
          lineStyle: 'solid'
        },
        mediaRules: [{
            maxWidth: 500,
            values: '30:34:2',
            label: {
              fontSize: 12
            },
            item: {
              fontSize: 9
            }
          },
          {
            maxWidth: 300,
            label: {
              visible: false
            }
          }
        ]
      },
      utc: true,
      timezone: -5, //EST time
      plot: {
        tooltip: {
          text: '$%v/share<br>at<br>%kv',
          decimals: 2,
          transform: {
            type: 'date',
            all: '%g:%i %a'
          },
          borderRadius: '3px'
        },
        lineColor: '#1ABC9C',
        backgroundColor: '#3498DB #1ABC9C',
        marker: {
          backgroundColor: '#3498DB',
          borderColor: '#1ABC9C',
          size: 3
        },
        alphaArea: 0.5
      },
      plotarea: {
        adjustLayout: true
      },
      series: [{
        values: [
          [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
          [1457103600000, 31.30], //10:00 a.m.
          [1457105400000, 30.95], //10:30 a.m.
          [1457107200000, 30.99], //11:00 a.m.
          [1457109000000, 32.33], //11:30 a.m.
          [1457110800000, 33.34], //12:00 p.m.
          [1457112600000, 33.01], //12:30 p.m.
          [1457114400000, 34], //1:00 p.m.
          [1457116200000, 33.64], //1:30 p.m.
          [1457118000000, 32.59], //2:00 p.m.
          [1457119800000, 32.60], //2:30 p.m.
          [1457121600000, 31.99], //3:00 p.m.
          [1457123400000, 31.14], //3:30 p.m.
          [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
        ]
      }]
    };
    
    // adjust the refresh rate of the chart
    zingchart.DEV.RESIZESPEED = 50;
    zingchart.DEV.DEBOUNCESPEED = 50;
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });
    
    // initiate jquery resizable container for demo purposes
    $('.container').resizable();