- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingSoft Demo</title>
- <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
- <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-dragging.min.js"></script>
- <style></style>
- </head>
-
- <body>
- <div id='myChart'></div>
- <script>
- ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
- var myConfig = {
- type: 'bullet',
- title: {
- text: 'Pushups Per Day'
- },
- subtitle: {
- text: 'Bars are draggable'
- },
- scaleX: {
- labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
- },
- series: [{
- dataDragging: true,
- values: [20, 40, 14, 50, 15, 35, 5],
- goals: [25, 43, 30, 40, 21, 59, 35],
- goal: {
- backgroundColor: '#64b5f6',
- borderWidth: 0
- },
- tooltip: { // tooltip changes based on value
- rules: [{
- rule: '%v >= %g', // if greater than goal
- text: 'You reached your goal!'
- },
- {
- rule: '%v < %g/2', // if less than half goal
- text: 'You need to work harder!'
- },
- {
- rule: '%v >= %g/2 && %v < %g', // if in between
- text: 'Almost at your goal!'
- }
- ]
- },
- rules: [ // rules for color
- {
- rule: '%v >= %g', // if greater than goal
- backgroundColor: '#81c784'
- },
- {
- rule: '%v < %g/2', // if less than half goal
- backgroundColor: '#ef5350'
- },
- {
- rule: '%v >= %g/2 && %v < %g', // if in between
- backgroundColor: '#ffca28'
- }
- ]
- }]
- };
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 500,
- width: '100%',
- output: "svg",
- modules: "dragging"
- });
- </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>
- <script src="https://cdn.zingchart.com/modules/zingchart-dragging.min.js"></script>
- </head>
-
- <body>
- <div id='myChart'></div>
- </body>
-
- </html>
- var myConfig = {
- type: 'bullet',
- title: {
- text: 'Pushups Per Day'
- },
- subtitle: {
- text: 'Bars are draggable'
- },
- scaleX: {
- labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
- },
- series: [{
- dataDragging: true,
- values: [20, 40, 14, 50, 15, 35, 5],
- goals: [25, 43, 30, 40, 21, 59, 35],
- goal: {
- backgroundColor: '#64b5f6',
- borderWidth: 0
- },
- tooltip: { // tooltip changes based on value
- rules: [{
- rule: '%v >= %g', // if greater than goal
- text: 'You reached your goal!'
- },
- {
- rule: '%v < %g/2', // if less than half goal
- text: 'You need to work harder!'
- },
- {
- rule: '%v >= %g/2 && %v < %g', // if in between
- text: 'Almost at your goal!'
- }
- ]
- },
- rules: [ // rules for color
- {
- rule: '%v >= %g', // if greater than goal
- backgroundColor: '#81c784'
- },
- {
- rule: '%v < %g/2', // if less than half goal
- backgroundColor: '#ef5350'
- },
- {
- rule: '%v >= %g/2 && %v < %g', // if in between
- backgroundColor: '#ffca28'
- }
- ]
- }]
- };
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 500,
- width: '100%',
- output: "svg",
- modules: "dragging"
- });