forked from zoomcharts/javascript-charts-library
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfacetchart.html
More file actions
executable file
·90 lines (88 loc) · 4.1 KB
/
Copy pathfacetchart.html
File metadata and controls
executable file
·90 lines (88 loc) · 4.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/css/reset.css" type="text/css" />
<link rel="stylesheet" href="assets/css/main.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<title>FacetChart Example</title>
</head>
<body>
<a href="https://zoomcharts.com/en/"><img src="assets/images/zoomcharts.jpg" width="241" height="55" style="border:0; display:block" alt="ZoomCharts" /></a>
<br />
<a href="index.html" class="back">Back to overview</a>
<h1>FacetChart integration example</h1>
To integrate FacetChart into your web application, follow these steps:<br />
<ol>
<li>Extract the library under your web application root folder (e.g. where your index.html is)</li>
<li>Add following code snippet in your html file<pre><script src="zoomcharts/zoomcharts.js"></script></pre> (where <code>zoomcharts</code> is the name of the folder where you extracted the library)</li>
<li>Alternatively you can include the script from the CDN<pre><script src="//cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script></pre></li>
<li>Add container element in which the chart will be added <pre><div id="chart"></div></pre></li>
<li>
Initialize chart:
<pre>
<script>
var t = new FacetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: {
preloaded: {
subvalues: [
{
id: "foo", value: 100, value2: 50, subvalues: [
{ id: "foo-1", value: 50, value2: 10 },
{ id: "foo-2", value: 50, value2: 5 }
]
},
{ id: "bar", value: 50, value2: 100 },
{ id: "baz", value: 30, value2: 15 }
]
}
},
series: [
{ name: "Foo", data: { field: "value" } },
{ name: "Bar", data: { field: "value2" } }
]
});
</script>
</pre>
</li>
<li>Follow the instructions on the ZoomCharts dashboard to include the license key in your application.</li>
<li>Congratulations. You have now successfully integrated ZoomCharts into your web application if you can see the same chart as below in the live demo.</li>
</ol>
<h2>Live Demo</h2>
<script src="../zoomcharts.js"></script>
<noscript><strong>JavaScript is currently disabled in your browser. Make sure you allowed the scripting after opening this page.</strong></noscript>
<div id="demo"></div>
<script>
var t = new FacetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: {
preloaded: {
subvalues: [
{
id: "foo", value: 100, value2: 50, subvalues: [
{ id: "foo-1", value: 50, value2: 10 },
{ id: "foo-2", value: 50, value2: 5 }
]
},
{ id: "bar", value: 50, value2: 100 },
{ id: "baz", value: 30, value2: 15 }
]
}
},
series: [
{ name: "Foo", data: { field: "value" } },
{ name: "Bar", data: { field: "value2" } }
]
});
</script>
<a href="http://jsfiddle.net/LLo1u2vb/" target="_blank" class="jsfiddle">Try it on jsFiddle</a>
<h2>More Information:</h2>
<nav>
<a href="https://zoomcharts.com/developers/en/facet-chart/api-reference/settings.html">Read full Documentation</a>
<a href="https://zoomcharts.com/developers/en/facet-chart/examples/data-sources/preloaded.html">Browse more examples</a>
</nav>
</body>
</html>