Gallery Back to Gallery

Math Equation Line Chart

Powered by ZingChart 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let sinv = () => {
      let v = [];
      for (let x = -360; x <= 360; x += 5) {
        v.push([x, 1 * Math.sin((x * 2 * Math.PI) / 360)]);
      }
      return v;
    }

    let cosv = () => {
      let v = [];
      for (let x = -360; x <= 360; x += 5) {
        v.push([x, 1 * Math.cos((x * 2 * Math.PI) / 360)]);
      }
      return v;
    }

    let eq = () => {
      let v = [];
      for (let x = -360; x <= 360; x += 5) {
        v.push([x, 1 * Math.sin((x * 2 * Math.PI) / 360) + 1 * Math.cos((x * 2 * Math.PI) / 360)]);
      }
      return v;
    }

    let chartConfig = {
      type: 'line',
      theme: 'classic',
      backgroundColor: '#fff',
      flat: true,
      legend: {
        adjustLayout: true,
        margin: 'auto auto 10px auto',
        backgroundColor: '#FFF',
        borderRadius: '3px',
        layout: 'float',
        marker: {
          type: 'match',
          showLine: true
        },
        shadow: false
      },
      plot: {
        aspect: 'spline',
        lineWidth: '2px',
        maxNodes: 9999,
        maxTrackers: 9999,
        shadow: false,
        animation: {
          effect: 'ANIMATION_SLIDE_LEFT',
          method: 'ANIMATION_REGULAR_EASE_OUT',
          sequence: 'ANIMATION_BY_PLOT',
          speed: 200,
        },
        marker: {
          visible: false
        },
        tooltip: {
          visible: false
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        format: '%v°',
        itemsOverlap: true,
        lineWidth: 0,
        minorTicks: 4,
        refValue: 0,
        step: 20,
        zooming: true,
        guide: {
          lineColor: '#33994a',
          lineStyle: 'solid'
        },
        item: {
          color: '#333'
        },
        minorGuide: {
          lineColor: '#33994a',
          lineStyle: 'solid'
        },
        minorTick: {
          visible: false
        },
        refLine: {
          lineColor: '#33994a',
          lineWidth: '2px',
          visible: true
        },
        tick: {
          lineColor: '#FFF',
          lineWidth: '1px',
          placement: 'ref-auto'
        }
      },
      scaleY: {
        values: '-1.6:1.6:0.2',
        lineWidth: 0,
        minorTicks: 4,
        refValue: 0,
        zooming: true,
        guide: {
          lineColor: '#33994a',
          lineStyle: 'solid'
        },
        item: {
          color: '#333'
        },
        minorGuide: {
          lineColor: '#33994a',
          lineStyle: 'solid'
        },
        minorTick: {
          visible: false
        },
        refLine: {
          lineColor: '#33994a',
          lineWidth: '1px'
        },
        tick: {
          visible: false
        }
      },
      crosshairX: {
        lineStyle: 'dashed',
        plotLabel: {
          text: '%data-equation',
          backgroundColor: '#b5e8c0',
          borderColor: '#33994a',
          borderRadius: '3px',
          borderWidth: '2px',
          color: 'white',
          decimals: 2,
          fontSize: '12px',
          htmlMode: true,
          multiple: true,
          padding: '4px 6px',
          shadow: false
        },
        scaleLabel: {
          visible: false
        }
      },
      series: [{
          text: 'Sine',
          values: sinv(),
          dataEquation: '<b><span style=\'color:#000;\'>sin(</span></b> %k° <b><span style=\'color:#000\'>)</span></b> = <b><span style=\'color:#000\'>%v</span></b>',
          lineColor: '#000'
        },
        {
          text: 'Cosine',
          values: cosv(),
          dataEquation: '<b><span style=\'color:#6e6c6c;\'>cos(</span></b> %k°<b><span style=\'color:#6e6c6c;\'>)</span></b> = <b><span style=\'color:#6e6c6c\'>%v</span></b>',
          lineColor: '#6e6c6c'
        },
        {
          text: 'Equation',
          values: eq(),
          dataEquation: '<b><span style=\'color:#000\'>sin(</span></b>%k°<b><span style=\'color:#000\'>)</span> + <span style=\'color:#6e6c6c;\'>cos(</span></b> %k°<b><span style=\'color:#6e6c6c;\'>)</span></b> = <b><span style=\'color:#3f0bff;\'>%v</span></b>',
          lineColor: '#3f0bff',
          lineStyle: 'dashed'
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      output: 'canvas',
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>
let sinv = () => {
  let v = [];
  for (let x = -360; x <= 360; x += 5) {
    v.push([x, 1 * Math.sin((x * 2 * Math.PI) / 360)]);
  }
  return v;
}

let cosv = () => {
  let v = [];
  for (let x = -360; x <= 360; x += 5) {
    v.push([x, 1 * Math.cos((x * 2 * Math.PI) / 360)]);
  }
  return v;
}

let eq = () => {
  let v = [];
  for (let x = -360; x <= 360; x += 5) {
    v.push([x, 1 * Math.sin((x * 2 * Math.PI) / 360) + 1 * Math.cos((x * 2 * Math.PI) / 360)]);
  }
  return v;
}

let chartConfig = {
  type: 'line',
  theme: 'classic',
  backgroundColor: '#fff',
  flat: true,
  legend: {
    adjustLayout: true,
    margin: 'auto auto 10px auto',
    backgroundColor: '#FFF',
    borderRadius: '3px',
    layout: 'float',
    marker: {
      type: 'match',
      showLine: true
    },
    shadow: false
  },
  plot: {
    aspect: 'spline',
    lineWidth: '2px',
    maxNodes: 9999,
    maxTrackers: 9999,
    shadow: false,
    animation: {
      effect: 'ANIMATION_SLIDE_LEFT',
      method: 'ANIMATION_REGULAR_EASE_OUT',
      sequence: 'ANIMATION_BY_PLOT',
      speed: 200,
    },
    marker: {
      visible: false
    },
    tooltip: {
      visible: false
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    format: '%v°',
    itemsOverlap: true,
    lineWidth: 0,
    minorTicks: 4,
    refValue: 0,
    step: 20,
    zooming: true,
    guide: {
      lineColor: '#33994a',
      lineStyle: 'solid'
    },
    item: {
      color: '#333'
    },
    minorGuide: {
      lineColor: '#33994a',
      lineStyle: 'solid'
    },
    minorTick: {
      visible: false
    },
    refLine: {
      lineColor: '#33994a',
      lineWidth: '2px',
      visible: true
    },
    tick: {
      lineColor: '#FFF',
      lineWidth: '1px',
      placement: 'ref-auto'
    }
  },
  scaleY: {
    values: '-1.6:1.6:0.2',
    lineWidth: 0,
    minorTicks: 4,
    refValue: 0,
    zooming: true,
    guide: {
      lineColor: '#33994a',
      lineStyle: 'solid'
    },
    item: {
      color: '#333'
    },
    minorGuide: {
      lineColor: '#33994a',
      lineStyle: 'solid'
    },
    minorTick: {
      visible: false
    },
    refLine: {
      lineColor: '#33994a',
      lineWidth: '1px'
    },
    tick: {
      visible: false
    }
  },
  crosshairX: {
    lineStyle: 'dashed',
    plotLabel: {
      text: '%data-equation',
      backgroundColor: '#b5e8c0',
      borderColor: '#33994a',
      borderRadius: '3px',
      borderWidth: '2px',
      color: 'white',
      decimals: 2,
      fontSize: '12px',
      htmlMode: true,
      multiple: true,
      padding: '4px 6px',
      shadow: false
    },
    scaleLabel: {
      visible: false
    }
  },
  series: [
    {
      text: 'Sine',
      values: sinv(),
      dataEquation: '<b><span style=\'color:#000;\'>sin(</span></b> %k° <b><span style=\'color:#000\'>)</span></b> = <b><span style=\'color:#000\'>%v</span></b>',
      lineColor: '#000'
    },
    {
      text: 'Cosine',
      values: cosv(),
      dataEquation: '<b><span style=\'color:#6e6c6c;\'>cos(</span></b> %k°<b><span style=\'color:#6e6c6c;\'>)</span></b> = <b><span style=\'color:#6e6c6c\'>%v</span></b>',
      lineColor: '#6e6c6c'
    },
    {
      text: 'Equation',
      values: eq(),
      dataEquation: '<b><span style=\'color:#000\'>sin(</span></b>%k°<b><span style=\'color:#000\'>)</span> + <span style=\'color:#6e6c6c;\'>cos(</span></b> %k°<b><span style=\'color:#6e6c6c;\'>)</span></b> = <b><span style=\'color:#3f0bff;\'>%v</span></b>',
      lineColor: '#3f0bff',
      lineStyle: 'dashed'
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  output: 'canvas',
  height: '100%',
  width: '100%',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Column Chart with Repeated Images 272/281 Scatter Plot with HTML Tooltips

Related Documentation: