• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     .caption-container {
    19.       display: flex;
    20.       justify-content: space-between;
    21.       flex-wrap: wrap;
    22.       align-items: baseline;
    23.     }
    24.  
    25.     .chart--container {
    26.       min-height: 150px;
    27.       width: 100%;
    28.       height: 500px;
    29.     }
    30.  
    31.     .zc-ref {
    32.       display: none;
    33.     }
    34.   </style>
    35. </head>
    36.  
    37. <body>
    38.   <h1>Lets Connect a Chart to a CSV on the Client</h1>
    39.   <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
    40.  
    41.   <!-- CHART CONTAINER -->
    42.   <div id="myChart" class="chart--container">
    43.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    44.   </div>
    45.  
    46.   <script>
    47.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    48.     // because this Javascript is injected into the document head
    49.     window.addEventListener('load', () => {
    50.       // Javascript code to execute after DOM content
    51.  
    52.       // full ZingChart schema can be found here:
    53.       // https://www.zingchart.com/docs/api/json-configuration/
    54.       let chartConfig = {
    55.         type: 'line',
    56.         globals: {
    57.           fontSize: '14px'
    58.         },
    59.         title: {
    60.           text: 'Movie Information',
    61.           fontSize: '24px',
    62.           adjustLayout: true,
    63.         },
    64.         legend: {
    65.           cursor: 'hand',
    66.         },
    67.         plotarea: {
    68.           margin: 'dynamic'
    69.         },
    70.         plot: {
    71.  
    72.         },
    73.         scaleX: {
    74.           zooming: true,
    75.           label: {
    76.             text: 'years'
    77.           },
    78.         },
    79.         scaleY: {
    80.           format: '$%v',
    81.           short: true,
    82.           label: {
    83.             text: 'USD'
    84.           }
    85.         },
    86.         crosshairX: {
    87.           plotLabel: {
    88.             short: true,
    89.             decimals: 2,
    90.           }
    91.         },
    92.         noData: {
    93.           text: 'Fetching data from CSV file...'
    94.         },
    95.         series: [{
    96.             text: 'Budget',
    97.             // plot values
    98.             values: [],
    99.           },
    100.           {
    101.             text: 'Domestic Growth',
    102.             // plot values
    103.             values: [],
    104.           },
    105.           {
    106.             text: 'Internation Growth',
    107.             // plot values
    108.             values: [],
    109.           }
    110.         ]
    111.       };
    112.  
    113.       // render chart with width and height to
    114.       // fill the parent container CSS dimensions
    115.       zingchart.render({
    116.         id: 'myChart',
    117.         data: chartConfig,
    118.         height: '100%',
    119.         width: '100%'
    120.       });
    121.  
    122.       // Parse local CSV file
    123.       Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
    124.         download: true, // url to retrieve CSV file
    125.         complete: function(results) {
    126.           let seriesValues = [
    127.             [], // budget
    128.             [], // domestic growth
    129.             [] // international growth
    130.           ];
    131.  
    132.           // if results came in correctly
    133.           if (results && results.data) {
    134.             // lets push the results into our new array
    135.             // new format. Row [0] is the column headers
    136.             for (let i = 1; i < results.data.length; i++) {
    137.               let budgetValue = Number(results.data[i][6]) || null;
    138.               let domesticValue = Number(results.data[i][7]) || null;
    139.               let internationalValue = Number(results.data[i][8]) || null;
    140.  
    141.               // budget data stored in column 6
    142.               seriesValues[0].push(budgetValue);
    143.               // domestic growth stored in column 7
    144.               seriesValues[1].push(domesticValue);
    145.               // international growth stored in column 8
    146.               seriesValues[2].push(internationalValue);
    147.             }
    148.  
    149.             // render data
    150.             zingchart.exec('myChart', 'setseriesvalues', {
    151.               values: seriesValues
    152.             });
    153.           }
    154.  
    155.         }
    156.       });
    157.     });
    158.   </script>
    159. </body>
    160.  
    161. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <h1>Lets Connect a Chart to a CSV on the Client</h1>
    13.   <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
    14.  
    15.   <!-- CHART CONTAINER -->
    16.   <div id="myChart" class="chart--container">
    17.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    18.   </div>
    19.  
    20. </body>
    21.  
    22. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .caption-container {
    10.   display: flex;
    11.   justify-content: space-between;
    12.   flex-wrap: wrap;
    13.   align-items: baseline;
    14. }
    15.  
    16. .chart--container {
    17.   min-height: 150px;
    18.   width: 100%;
    19.   height: 500px;
    20. }
    21.  
    22. .zc-ref {
    23.   display: none;
    24. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig = {
    9.     type: 'line',
    10.     globals: {
    11.       fontSize: '14px'
    12.     },
    13.     title: {
    14.       text: 'Movie Information',
    15.       fontSize: '24px',
    16.       adjustLayout: true,
    17.     },
    18.     legend: {
    19.       cursor: 'hand',
    20.     },
    21.     plotarea: {
    22.       margin: 'dynamic'
    23.     },
    24.     plot: {
    25.  
    26.     },
    27.     scaleX: {
    28.       zooming: true,
    29.       label: {
    30.         text: 'years'
    31.       },
    32.     },
    33.     scaleY: {
    34.       format: '$%v',
    35.       short: true,
    36.       label: {
    37.         text: 'USD'
    38.       }
    39.     },
    40.     crosshairX: {
    41.       plotLabel: {
    42.         short: true,
    43.         decimals: 2,
    44.       }
    45.     },
    46.     noData: {
    47.       text: 'Fetching data from CSV file...'
    48.     },
    49.     series: [{
    50.         text: 'Budget',
    51.         // plot values
    52.         values: [],
    53.       },
    54.       {
    55.         text: 'Domestic Growth',
    56.         // plot values
    57.         values: [],
    58.       },
    59.       {
    60.         text: 'Internation Growth',
    61.         // plot values
    62.         values: [],
    63.       }
    64.     ]
    65.   };
    66.  
    67.   // render chart with width and height to
    68.   // fill the parent container CSS dimensions
    69.   zingchart.render({
    70.     id: 'myChart',
    71.     data: chartConfig,
    72.     height: '100%',
    73.     width: '100%'
    74.   });
    75.  
    76.   // Parse local CSV file
    77.   Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
    78.     download: true, // url to retrieve CSV file
    79.     complete: function(results) {
    80.       let seriesValues = [
    81.         [], // budget
    82.         [], // domestic growth
    83.         [] // international growth
    84.       ];
    85.  
    86.       // if results came in correctly
    87.       if (results && results.data) {
    88.         // lets push the results into our new array
    89.         // new format. Row [0] is the column headers
    90.         for (let i = 1; i < results.data.length; i++) {
    91.           let budgetValue = Number(results.data[i][6]) || null;
    92.           let domesticValue = Number(results.data[i][7]) || null;
    93.           let internationalValue = Number(results.data[i][8]) || null;
    94.  
    95.           // budget data stored in column 6
    96.           seriesValues[0].push(budgetValue);
    97.           // domestic growth stored in column 7
    98.           seriesValues[1].push(domesticValue);
    99.           // international growth stored in column 8
    100.           seriesValues[2].push(internationalValue);
    101.         }
    102.  
    103.         // render data
    104.         zingchart.exec('myChart', 'setseriesvalues', {
    105.           values: seriesValues
    106.         });
    107.       }
    108.  
    109.     }
    110.   });
    111. });