Skip to content

Static Data

This demo illustrates how to use ChartFactor to render charts using static data.

If you'd like to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
<html>
    <head>
        <meta charset="utf-8">
        <title>Static Data</title>
          <script src="../assets/jquery.min.js"></script>
          <script src="../../lib/cftoolkit.min.js"></script>
          <script src="../assets/cft-standard-charts.min.js"></script>       
          <script src="./index.js"></script>
          <script charset="utf-8">
        </script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="chart1"></div>
        <div id="chart2"></div>
    </body>

</html>

$(document).ready(function () {

    var cf = window.cf;

    var data1 = {
        groups: ['Brand'],
        metrics: ['Speed'],
        data: [
            { group: ['Peugeot' ], current: { metrics: { Speed: 40}}},
            { group: ['Renault' ], current: { metrics: { Speed: 50}}},
            { group: ['Ferrari'], current: { metrics: { Speed: 100}}},
            { group: ['Lamborghini'], current: { metrics: { Speed: 120}}}
        ]
    };

    var data2 = {
        groups: ['Country', 'Brand'],
        metrics: ['M1', 'M2', 'M3'],
        data: [
        { group: ['France', 'Peugeot' ], current: { metrics: { M1: 40, M2: 80, M3: 12 }}},
        { group: ['France', 'Renault' ], current: { metrics: { M1: 50, M2: 100, M3: 23 }}},
        { group: ['Italy', 'Ferrari'], current: { metrics: { M1: 100, M2: 200, M3: 67 }}},
        { group: ['Italy', 'Lamborghini'], current: { metrics: { M1: 120, M2: 240, M3: 56 }}}
        ]
    };

    var chart1 = cf
                .create()
                .pie()
                .element('chart1')
                .data(data1);

    var chart2 = cf
                .create()
                .bars()
                .element('chart2')
                .data(data2);

    chart1.execute();
    chart2.execute();

});

body {
    display: flex;
    width:100%;
    height: 100%;
    justify-content:space-evenly;
    overflow: hidden;
}

#chart1, #chart2 {
    margin-top: 10px;
    width: calc(50% - 16px);
    height: calc(100% - 5px);
}