• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin-left: 10;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
          transform: matrix(2, 0, 0, 2, 800, 35);
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="parentDiv">
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'line',
          backgroundColor: '#2C2C39',
          title: {
            text: 'Time Series Data with null values',
            adjustLayout: true,
            fontColor: "#E3E3E5",
            marginTop: 7
          },
          legend: {
            align: 'center',
            verticalAlign: 'top',
            backgroundColor: 'none',
            borderWidth: 0,
            item: {
              fontColor: '#E3E3E5',
              cursor: 'hand'
            },
            marker: {
              type: 'circle',
              borderWidth: 0,
              cursor: 'hand'
            }
          },
          plotarea: {
            margin: 'dynamic 70'
          },
          plot: {
            aspect: 'spline',
            lineWidth: 2,
            marker: {
              borderWidth: 0,
              size: 5
            }
          },
          scaleX: {
            lineColor: '#E3E3E5',
            zooming: true,
            zoomTo: [0, 15],
            minValue: 1459468800000,
            step: 'day',
            item: {
              fontColor: '#E3E3E5'
            },
            transform: {
              type: 'date',
              all: '%D %M %d<br>%h:%i:%s'
            }
          },
          scaleY: {
            minorTicks: 1,
            lineColor: '#E3E3E5',
            tick: {
              lineColor: '#E3E3E5'
            },
            minorTick: {
              lineColor: '#E3E3E5'
            },
            minorGuide: {
              visible: true,
              lineWidth: 1,
              lineColor: '#E3E3E5',
              alpha: 0.7,
              lineStyle: 'dashed'
            },
            guide: {
              lineStyle: 'dashed'
            },
            item: {
              fontColor: '#E3E3E5'
            }
          },
          tooltip: {
            borderWidth: 0,
            borderRadius: 3
          },
          preview: {
            adjustLayout: true,
            borderColor: '#E3E3E5',
            mask: {
              backgroundColor: '#E3E3E5'
            }
          },
          crosshairX: {
            plotLabel: {
              multiple: true,
              borderRadius: 3
            },
            scaleLabel: {
              backgroundColor: '#53535e',
              borderRadius: 3
            },
            marker: {
              size: 7,
              alpha: 0.5
            }
          },
          crosshairY: {
            lineColor: '#E3E3E5',
            type: 'multiple',
            scaleLabel: {
              decimals: 2,
              borderRadius: 3,
              offsetX: -5,
              fontColor: "#2C2C39",
              bold: true
            }
          },
          shapes: [{
            type: 'rectangle',
            id: 'view_all',
            height: '20px',
            width: '75px',
            borderColor: '#E3E3E5',
            borderWidth: 1,
            borderRadius: 3,
            x: '85%',
            y: '11%',
            backgroundColor: '#53535e',
            cursor: 'hand',
            label: {
              text: 'View All',
              fontColor: '#E3E3E5',
              fontSize: 12,
              bold: true
            }
          }],
          series: [{
              values: [218.92, 212.85, 241.95, 200.76, 203.87, 245.26, 249.9, 240.05, 241.8, 251.4, 230.06, null, null, 203.04, 229.05, 232.37, 190.89, 236.63, 249.18, 188.98, 194.06, 234.61, 241.91, 196.4, 191.87, 213.5, 194.83, 228.48, 235.66, 235.04, 195.74, 243.04, null, 197.51, 232.64, 238.99, 227.8, 235.81, 221.7, 193.46, 252.64, 205.35, 248.52, 218.32, 188.55],
              lineColor: '#E34247',
              marker: {
                backgroundColor: '#E34247'
              }
            },
            {
              values: [165.57, 170.47, 197.17, 164.64, 132.73, 176.89, 139.41, 158.71, 177.85, 138.87, 135.74, 167.06, 156.42, 182, 169.73, 151.08, 165.58, 146.29, 124.5, 181.71, 143.96, null, null, null, 146, 172.6, 149.81, 161.09, 175.88, 149.39, 184.1, 123.85, 186.82, 139.72, 138.61, 170.28, 164.06, 184.33, null, null, 131.85, 133.32, 134.49, 143.79, 125.23],
              lineColor: '#FEB32E',
              marker: {
                backgroundColor: '#FEB32E'
              }
            },
            {
              values: [70.19, 96.56, 75.04, 51.58, 82.8, 68.14, 89.61, null, 45.33, 98.59, 92.9, 66.94, null, 74.08, 57.25, 79.68, 89.66, 64.56, 96.59, 79.96, 98.08, 42.93, 91.93, 56.23, 82.66, null, 85.76, 74.98, 51, 66.99, 63.02, 63.8, 44.33, 77.56, 95.28, 60.93, 59.6, 80.58, 68.51, 67.63, 69.76, 40.54, 78.42, 90.4, 82.3],
              lineColor: '#31A59A',
              marker: {
                backgroundColor: '#31A59A'
              }
            }
          ]
        };
    
        zingchart.bind('myChart', 'shape_click', function(e) {
          if (e.shapeid == "view_all") {
            zingchart.exec(e.id, 'viewall');
          }
        });
    
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '500',
          width: '725'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="parentDiv">
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      </div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin-left: 10;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
      transform: matrix(2, 0, 0, 2, 800, 35);
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      type: 'line',
      backgroundColor: '#2C2C39',
      title: {
        text: 'Time Series Data with null values',
        adjustLayout: true,
        fontColor: "#E3E3E5",
        marginTop: 7
      },
      legend: {
        align: 'center',
        verticalAlign: 'top',
        backgroundColor: 'none',
        borderWidth: 0,
        item: {
          fontColor: '#E3E3E5',
          cursor: 'hand'
        },
        marker: {
          type: 'circle',
          borderWidth: 0,
          cursor: 'hand'
        }
      },
      plotarea: {
        margin: 'dynamic 70'
      },
      plot: {
        aspect: 'spline',
        lineWidth: 2,
        marker: {
          borderWidth: 0,
          size: 5
        }
      },
      scaleX: {
        lineColor: '#E3E3E5',
        zooming: true,
        zoomTo: [0, 15],
        minValue: 1459468800000,
        step: 'day',
        item: {
          fontColor: '#E3E3E5'
        },
        transform: {
          type: 'date',
          all: '%D %M %d<br>%h:%i:%s'
        }
      },
      scaleY: {
        minorTicks: 1,
        lineColor: '#E3E3E5',
        tick: {
          lineColor: '#E3E3E5'
        },
        minorTick: {
          lineColor: '#E3E3E5'
        },
        minorGuide: {
          visible: true,
          lineWidth: 1,
          lineColor: '#E3E3E5',
          alpha: 0.7,
          lineStyle: 'dashed'
        },
        guide: {
          lineStyle: 'dashed'
        },
        item: {
          fontColor: '#E3E3E5'
        }
      },
      tooltip: {
        borderWidth: 0,
        borderRadius: 3
      },
      preview: {
        adjustLayout: true,
        borderColor: '#E3E3E5',
        mask: {
          backgroundColor: '#E3E3E5'
        }
      },
      crosshairX: {
        plotLabel: {
          multiple: true,
          borderRadius: 3
        },
        scaleLabel: {
          backgroundColor: '#53535e',
          borderRadius: 3
        },
        marker: {
          size: 7,
          alpha: 0.5
        }
      },
      crosshairY: {
        lineColor: '#E3E3E5',
        type: 'multiple',
        scaleLabel: {
          decimals: 2,
          borderRadius: 3,
          offsetX: -5,
          fontColor: "#2C2C39",
          bold: true
        }
      },
      shapes: [{
        type: 'rectangle',
        id: 'view_all',
        height: '20px',
        width: '75px',
        borderColor: '#E3E3E5',
        borderWidth: 1,
        borderRadius: 3,
        x: '85%',
        y: '11%',
        backgroundColor: '#53535e',
        cursor: 'hand',
        label: {
          text: 'View All',
          fontColor: '#E3E3E5',
          fontSize: 12,
          bold: true
        }
      }],
      series: [{
          values: [218.92, 212.85, 241.95, 200.76, 203.87, 245.26, 249.9, 240.05, 241.8, 251.4, 230.06, null, null, 203.04, 229.05, 232.37, 190.89, 236.63, 249.18, 188.98, 194.06, 234.61, 241.91, 196.4, 191.87, 213.5, 194.83, 228.48, 235.66, 235.04, 195.74, 243.04, null, 197.51, 232.64, 238.99, 227.8, 235.81, 221.7, 193.46, 252.64, 205.35, 248.52, 218.32, 188.55],
          lineColor: '#E34247',
          marker: {
            backgroundColor: '#E34247'
          }
        },
        {
          values: [165.57, 170.47, 197.17, 164.64, 132.73, 176.89, 139.41, 158.71, 177.85, 138.87, 135.74, 167.06, 156.42, 182, 169.73, 151.08, 165.58, 146.29, 124.5, 181.71, 143.96, null, null, null, 146, 172.6, 149.81, 161.09, 175.88, 149.39, 184.1, 123.85, 186.82, 139.72, 138.61, 170.28, 164.06, 184.33, null, null, 131.85, 133.32, 134.49, 143.79, 125.23],
          lineColor: '#FEB32E',
          marker: {
            backgroundColor: '#FEB32E'
          }
        },
        {
          values: [70.19, 96.56, 75.04, 51.58, 82.8, 68.14, 89.61, null, 45.33, 98.59, 92.9, 66.94, null, 74.08, 57.25, 79.68, 89.66, 64.56, 96.59, 79.96, 98.08, 42.93, 91.93, 56.23, 82.66, null, 85.76, 74.98, 51, 66.99, 63.02, 63.8, 44.33, 77.56, 95.28, 60.93, 59.6, 80.58, 68.51, 67.63, 69.76, 40.54, 78.42, 90.4, 82.3],
          lineColor: '#31A59A',
          marker: {
            backgroundColor: '#31A59A'
          }
        }
      ]
    };
    
    zingchart.bind('myChart', 'shape_click', function(e) {
      if (e.shapeid == "view_all") {
        zingchart.exec(e.id, 'viewall');
      }
    });
    
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '500',
      width: '725'
    });