• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "line",
                "plotarea": {
                    "margin": "dynamic"
                },
                "scale-x": {
                    "min-value": 1356991200000,
                    "max-value": 1388440800000,
                    "step": "day",
                    "-item": {
                        "visible": false
                    },
                    "-tick": {
                        "visible": false
                    },
                    "-line-width": 0,
                    "transform": {
                        "type": "date",
                        "text": "%d<br>%M",
                        "item": {
                            "background-color": "#ccc"
                        }
                    },
                    "zooming": true,
                    "guide": {
                        "visible": false
                    }
                },
                "scale-y": {
                    "tick": {
                        "visible": false
                    },
                    "line-width": 0,
                    "values": "0:5:1",
                    "labels": ["", "Analysis", "Design", "Development", "Testing", ""],
                    "guide": {
                        "line-style": "solid"
                    }
                },
                "scroll-x": {
    
                },
                "tooltip": {
                    "border-color": "%color-4",
                    "border-width": 1,
                    "background-color": "#f3f3f3",
                    "alpha": 0.8,
                    "border-radius": 15,
                    "padding": 10,
                    "align": "left",
                    "color": "#000"
                },
                "plot": {
                    "rules": [{
    
                    }],
                    "scroll-step-multiplier": 1,
                    "hover-state": {
                        "visible": false
                    },
                    "hover-marker": {
                        "visible": false
                    }
                },
                "series": [{
                        "palette": 0,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "diamond",
                            "size": 10,
                            "border-width": 2,
                            "border-color": "#999",
                            "background-color": "#333",
                            "shadow": false
                        },
                        "values": [
                            [1358200800000, 1]
                        ],
                        "data-thread": "Analysis",
                        "data-task": "Start",
                        "data-start": "2013-01-15",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>Start on %data-start"
                    },
                    {
                        "palette": 0,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "diamond",
                            "border-width": 0,
                            "shadow": false
                        },
                        "values": [
                            [1361397600000, 1],
                            [1362952800000, 1]
                        ],
                        "data-thread": "Analysis",
                        "data-task": "Task 1",
                        "data-min": "2013-02-21",
                        "data-max": "2013-03-11",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
                    },
                    {
                        "palette": 0,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "diamond",
                            "border-width": 0,
                            "shadow": false
                        },
                        "values": [
                            [1371330000000, 1],
                            [1375131600000, 1]
                        ],
                        "data-thread": "Analysis",
                        "data-task": "Task 2",
                        "data-min": "2013-06-16",
                        "data-max": "2013-07-30",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
                    },
                    {
                        "palette": 1,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "triangle",
                            "shadow": false,
                            "offset-y": 25,
                            "border-width": 0
                        },
                        "values": [
                            [1366405200000, 2],
                            [1376254800000, 2]
                        ],
                        "data-thread": "Design",
                        "data-task": "Task 3",
                        "data-min": "2013-04-20",
                        "data-max": "2013-08-12",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
                    },
                    {
                        "palette": 2,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "circle",
                            "shadow": false,
                            "border-width": 0
                        },
                        "values": [
                            [1379278800000, 3],
                            [1384207200000, 3]
                        ],
                        "data-thread": "Development",
                        "data-task": "Task 4",
                        "data-min": "2013-09-16",
                        "data-max": "2013-11-12",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
                    },
                    {
                        "palette": 3,
                        "line-width": 40,
                        "shadow": false,
                        "marker": {
                            "type": "none"
                        },
                        "values": [
                            [1369083600000, 4],
                            [1380574800000, 4]
                        ],
                        "data-thread": "Testing",
                        "data-task": "Task 5",
                        "data-min": "2013-05-21",
                        "data-max": "2013-10-01",
                        "tooltip-text": "<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
                    },
                    {
                        "line-width": 2,
                        "shadow": false,
                        "marker": {
                            "type": "triangle",
                            "background-color": "#333",
                            "shadow": false,
                            "angle": 90,
                            "alpha": 0,
                            "rules": [{
                                "rule": "%i==1",
                                "alpha": 1,
                                "offset-x": -10
                            }]
                        },
                        "line-color": "#333",
                        "tooltip-text": "Link: Start -> Task 1",
                        "values": [
                            [1358200800000, 1],
                            [1361397600000, 1]
                        ]
                    },
                    {
                        "line-width": 2,
                        "shadow": false,
                        "marker": {
                            "type": "none"
                        },
                        "line-color": "#333",
                        "tooltip-text": "Link: Task 3 -> Task 2",
                        "values": [
                            [1366405200000, 2],
                            [1365541200000, 2],
                            [1365541200000, 1],
                            [1371330000000, 1]
                        ]
                    },
                    {
                        "line-width": 2,
                        "shadow": false,
                        "line-style": "dashed",
                        "marker": {
                            "type": "none"
                        },
                        "line-color": "#333",
                        "tooltip-text": "Link: Task 3 -> Task 4",
                        "values": [
                            [1376254800000, 2],
                            [1377118800000, 2],
                            [1377118800000, 3],
                            [1379278800000, 3]
                        ]
                    },
                    {
                        "line-width": 2,
                        "shadow": false,
                        "line-style": "dotted",
                        "marker": {
                            "type": "triangle",
                            "angle": 90,
                            "alpha": 0,
                            "rules": [{
                                "rule": "%i==3",
                                "alpha": 1
                            }]
                        },
                        "line-color": "#333",
                        "tooltip-text": "Link: Task 1 -> Task 5",
                        "values": [
                            [1362952800000, 1],
                            [1363816800000, 1],
                            [1363816800000, 4],
                            [1369083600000, 4]
                        ]
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 450,
                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'></div>
    	</body>
    </html>
    
          
    var myConfig = {
        "type":"line",
        "plotarea":{
            "margin":"dynamic"
        },
        "scale-x":{
            "min-value":1356991200000,
            "max-value":1388440800000,
            "step":"day",
            "-item":{
                "visible":false
            },
            "-tick":{
                "visible":false
            },
            "-line-width":0,
            "transform":{
                "type":"date",
                "text":"%d<br>%M",
                "item":{
                    "background-color":"#ccc"
                }
            },
            "zooming":true,
            "guide":{
                "visible":false
            }
        },
        "scale-y":{
            "tick":{
                "visible":false
            },
            "line-width":0,
            "values":"0:5:1",
            "labels":["","Analysis","Design","Development","Testing",""],
            "guide":{
                "line-style":"solid"
            }
        },
        "scroll-x":{
            
        },
        "tooltip":{
            "border-color":"%color-4",
            "border-width":1,
            "background-color":"#f3f3f3",
            "alpha":0.8,
            "border-radius":15,
            "padding":10,
            "align":"left",
            "color":"#000"
        },
        "plot":{
            "rules":[
                {
                    
                }
            ],
            "scroll-step-multiplier":1,
            "hover-state":{
                "visible":false
            },
            "hover-marker":{
                "visible":false
            }
        },
        "series":[
            {
                "palette":0,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"diamond",
                    "size":10,
                    "border-width":2,
                    "border-color":"#999",
                    "background-color":"#333",
                    "shadow":false
                },
                "values":[[1358200800000,1]],
                "data-thread":"Analysis",
                "data-task":"Start",
                "data-start":"2013-01-15",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>Start on %data-start"
            },
            {
                "palette":0,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"diamond",
                    "border-width":0,
                    "shadow":false
                },
                "values":[[1361397600000,1],
                [1362952800000,1]],
                "data-thread":"Analysis",
                "data-task":"Task 1",
                "data-min":"2013-02-21",
                "data-max":"2013-03-11",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
            },
            {
                "palette":0,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"diamond",
                    "border-width":0,
                    "shadow":false
                },
                "values":[[1371330000000,1],
                [1375131600000,1]],
                "data-thread":"Analysis",
                "data-task":"Task 2",
                "data-min":"2013-06-16",
                "data-max":"2013-07-30",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
            },
            {
                "palette":1,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"triangle",
                    "shadow":false,
                    "offset-y":25,
                    "border-width":0
                },
                "values":[[1366405200000,2],
                [1376254800000,2]],
                "data-thread":"Design",
                "data-task":"Task 3",
                "data-min":"2013-04-20",
                "data-max":"2013-08-12",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
            },
            {
                "palette":2,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"circle",
                    "shadow":false,
                    "border-width":0
                },
                "values":[[1379278800000,3],
                [1384207200000,3]],
                "data-thread":"Development",
                "data-task":"Task 4",
                "data-min":"2013-09-16",
                "data-max":"2013-11-12",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
            },
            {
                "palette":3,
                "line-width":40,
                "shadow":false,
                "marker":{
                    "type":"none"
                },
                "values":[[1369083600000,4],
                [1380574800000,4]],
                "data-thread":"Testing",
                "data-task":"Task 5",
                "data-min":"2013-05-21",
                "data-max":"2013-10-01",
                "tooltip-text":"<b>%data-thread - %data-task</b><br><br>From %data-min to %data-max"
            },
            {
                "line-width":2,
                "shadow":false,
                "marker":{
                    "type":"triangle",
                    "background-color":"#333",
                    "shadow":false,
                    "angle":90,
                    "alpha":0,
                    "rules":[
                        {
                            "rule":"%i==1",
                            "alpha":1,
                            "offset-x":-10
                        }
                    ]
                },
                "line-color":"#333",
                "tooltip-text":"Link: Start -> Task 1",
                "values":[[1358200800000,1],
                [1361397600000,1]]
            },
            {
                "line-width":2,
                "shadow":false,
                "marker":{
                    "type":"none"
                },
                "line-color":"#333",
                "tooltip-text":"Link: Task 3 -> Task 2",
                "values":[[1366405200000,2],
                [1365541200000,2],
                [1365541200000,1],
                [1371330000000,1]]
            },
            {
                "line-width":2,
                "shadow":false,
                "line-style":"dashed",
                "marker":{
                    "type":"none"
                },
                "line-color":"#333",
                "tooltip-text":"Link: Task 3 -> Task 4",
                "values":[[1376254800000,2],
                [1377118800000,2],
                [1377118800000,3],
                [1379278800000,3]]
            },
            {
                "line-width":2,
                "shadow":false,
                "line-style":"dotted",
                "marker":{
                    "type":"triangle",
                    "angle":90,
                    "alpha":0,
                    "rules":[
                        {
                            "rule":"%i==3",
                            "alpha":1
                        }
                    ]
                },
                "line-color":"#333",
                "tooltip-text":"Link: Task 1 -> Task 5",
                "values":[[1362952800000,1],
                [1363816800000,1],
                [1363816800000,4],
                [1369083600000,4]]
            }
        ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 450, 
    	width: '100%' 
    });