FacetChart integration example

1. Copy "lib" folder into your web application root folder (e.g. where your index.html is)
2. Add following code snippet in your html file

   <script src="lib/zoomcharts.js"></script>

3. Alternatively you can include the script from the CDN

   <script src="//cdn.zoomcharts.com/1/latest/zoomcharts.js"></script>

4. Add container element in which the chart will be added

   <div id="demo"></div>

5. Initialize chart:

       <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, style: { expandable: false } },
                                  { id: "foo-2", value: 50, value2: 5, style: { expandable: false } }
                               ]
                           },
                           { id: "bar", value: 50, value2: 100, style: { expandable: false } },
                           { id: "baz", value: 30, value2: 15, style: { expandable: false } }
                       ]
                   }
               },
               series: [
                   { name: "Foo", data: { field: "value" }, style: { fillColor: "orange" } },
                   { name: "Bar", data: { field: "value2" }, style: { fillColor: "red" } }
               ]
           });
       </script>
   

6. Follow the instructions on the ZoomCharts dashboard to include the license key in your application.
7. Congratulations. You have now successfully integrated ZoomCharts into your web application if you can see the same chart as below in the live demo.

Live Demo

More Information: