• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <script nonce="undefined">
    10.     ZC.LICENSE = ['b55b025e438fa8a98e32482b5f768ff5'];
    11.   </script>
    12.   <style>
    13.     * {
    14.       font-family: 'Lucida Sans Unicode';
    15.     }
    16.  
    17.     html,
    18.     body {
    19.       font-family: 'Lucida Sans Unicode';
    20.       height: 100%;
    21.       width: 100%;
    22.       margin: 0;
    23.       padding: 0;
    24.     }
    25.  
    26.     #myChart {
    27.       height: 100%;
    28.       width: 100%;
    29.       min-height: 150px;
    30.     }
    31.  
    32.     .zc-ref {
    33.       display: none;
    34.     }
    35.  
    36.     #result {
    37.       text-align: right;
    38.       color: gray;
    39.       min-height: 2em;
    40.     }
    41.  
    42.     #tableSparkline {
    43.       margin: 0 auto;
    44.       border-collapse: collapse;
    45.     }
    46.  
    47.     th {
    48.       font-weight: bold;
    49.       text-align: left;
    50.     }
    51.  
    52.     td,
    53.     th {
    54.       padding: 5px;
    55.       border-bottom: 1px solid silver;
    56.       height: 20px;
    57.     }
    58.  
    59.     thead th {
    60.       border-top: 2px solid gray;
    61.       border-bottom: 2px solid gray;
    62.     }
    63.   </style>
    64. </head>
    65.  
    66. <body>
    67.  
    68.   <div id="result"></div>
    69.   <table id="tableSparkline">
    70.     <thead>
    71.       <tr>
    72.         <th>State</th>
    73.         <th>Income</th>
    74.         <th>Income per quarter</th>
    75.         <th>Costs</th>
    76.         <th>Costs per quarter</th>
    77.         <th>Result</th>
    78.         <th>Result per quarter</th>
    79.       </tr>
    80.     </thead>
    81.     <tbody id="tbodySparkline">
    82.       <tr>
    83.         <th>Alabama</th>
    84.         <td>254</td>
    85.         <td data-sparkline="71, 78, 39, 66 " />
    86.         <td>296</td>
    87.         <td data-sparkline="68, 52, 80, 96 " />
    88.         <td>-42</td>
    89.         <td data-sparkline="3, 26, -41, -30 ; vbar" />
    90.       </tr>
    91.       <tr>
    92.         <th>Alaska</th>
    93.         <td>246</td>
    94.         <td data-sparkline="87, 44, 74, 41 " />
    95.         <td>181</td>
    96.         <td data-sparkline="29, 54, 73, 25 " />
    97.         <td>65</td>
    98.         <td data-sparkline="58, -10, 1, 16 ; vbar" />
    99.       </tr>
    100.       <tr>
    101.         <th>Arizona</th>
    102.         <td>101</td>
    103.         <td data-sparkline="56, 12, 8, 25 " />
    104.         <td>191</td>
    105.         <td data-sparkline="69, 14, 53, 55 " />
    106.         <td>-90</td>
    107.         <td data-sparkline="-13, -2, -45, -30 ; vbar" />
    108.       </tr>
    109.       <tr>
    110.         <th>Arkansas</th>
    111.         <td>303</td>
    112.         <td data-sparkline="81, 50, 78, 94 " />
    113.         <td>76</td>
    114.         <td data-sparkline="36, 15, 14, 11 " />
    115.         <td>227</td>
    116.         <td data-sparkline="45, 35, 64, 83 ; vbar" />
    117.       </tr>
    118.       <tr>
    119.         <th>California</th>
    120.         <td>200</td>
    121.         <td data-sparkline="61, 80, 10, 49 " />
    122.         <td>217</td>
    123.         <td data-sparkline="100, 8, 52, 57 " />
    124.         <td>-17</td>
    125.         <td data-sparkline="-39, 72, -42, -8 ; vbar" />
    126.       </tr>
    127.       <tr>
    128.         <th>Colorado</th>
    129.         <td>118</td>
    130.         <td data-sparkline="13, 48, 21, 36 " />
    131.         <td>273</td>
    132.         <td data-sparkline="98, 86, 8, 81 " />
    133.         <td>-155</td>
    134.         <td data-sparkline="-85, -38, 13, -45 ; vbar" />
    135.       </tr>
    136.       <tr>
    137.         <th>Connecticut</th>
    138.         <td>201</td>
    139.         <td data-sparkline="6, 64, 44, 87 " />
    140.         <td>148</td>
    141.         <td data-sparkline="60, 13, 73, 2 " />
    142.         <td>53</td>
    143.         <td data-sparkline="-54, 51, -29, 85 ; vbar" />
    144.       </tr>
    145.       <tr>
    146.         <th>Delaware</th>
    147.         <td>161</td>
    148.         <td data-sparkline="7, 27, 49, 78 " />
    149.         <td>298</td>
    150.         <td data-sparkline="19, 90, 100, 89 " />
    151.         <td>-137</td>
    152.         <td data-sparkline="-12, -63, -51, -11 ; vbar" />
    153.       </tr>
    154.       <tr>
    155.         <th>District of Columbia</th>
    156.         <td>106</td>
    157.         <td data-sparkline="18, 39, 27, 22 " />
    158.         <td>185</td>
    159.         <td data-sparkline="62, 97, 24, 2 " />
    160.         <td>-79</td>
    161.         <td data-sparkline="-44, -58, 3, 20 ; vbar" />
    162.       </tr>
    163.       <tr>
    164.         <th>Florida</th>
    165.         <td>249</td>
    166.         <td data-sparkline="51, 24, 90, 84 " />
    167.         <td>244</td>
    168.         <td data-sparkline="47, 40, 74, 83 " />
    169.         <td>5</td>
    170.         <td data-sparkline="4, -16, 16, 1 ; vbar" />
    171.       </tr>
    172.       <tr>
    173.         <th>Georgia</th>
    174.         <td>183</td>
    175.         <td data-sparkline="36, 80, 39, 28 " />
    176.         <td>212</td>
    177.         <td data-sparkline="43, 25, 52, 92 " />
    178.         <td>-29</td>
    179.         <td data-sparkline="-7, 55, -13, -64 ; vbar" />
    180.       </tr>
    181.       <tr>
    182.         <th>Hawaii</th>
    183.         <td>232</td>
    184.         <td data-sparkline="73, 34, 74, 51 " />
    185.         <td>172</td>
    186.         <td data-sparkline="1, 83, 49, 39 " />
    187.         <td>60</td>
    188.         <td data-sparkline="72, -49, 25, 12 ; vbar" />
    189.       </tr>
    190.       <tr>
    191.         <th>Idaho</th>
    192.         <td>166</td>
    193.         <td data-sparkline="25, 43, 31, 67 " />
    194.         <td>152</td>
    195.         <td data-sparkline="30, 30, 75, 17 " />
    196.         <td>14</td>
    197.         <td data-sparkline="-5, 13, -44, 50 ; vbar" />
    198.       </tr>
    199.       <tr>
    200.         <th>Illinois</th>
    201.         <td>336</td>
    202.         <td data-sparkline="56, 84, 98, 98 " />
    203.         <td>151</td>
    204.         <td data-sparkline="61, 12, 77, 1 " />
    205.         <td>185</td>
    206.         <td data-sparkline="-5, 72, 21, 97 ; vbar" />
    207.       </tr>
    208.       <tr>
    209.         <th>Indiana</th>
    210.         <td>216</td>
    211.         <td data-sparkline="52, 87, 64, 13 " />
    212.         <td>216</td>
    213.         <td data-sparkline="2, 47, 94, 73 " />
    214.         <td>0</td>
    215.         <td data-sparkline="50, 40, -30, -60 ; vbar" />
    216.       </tr>
    217.       <tr>
    218.         <th>Iowa</th>
    219.         <td>135</td>
    220.         <td data-sparkline="41, 45, 19, 30 " />
    221.         <td>159</td>
    222.         <td data-sparkline="17, 34, 45, 63 " />
    223.         <td>-24</td>
    224.         <td data-sparkline="24, 11, -26, -33 ; vbar" />
    225.       </tr>
    226.       <tr>
    227.         <th>Kansas</th>
    228.         <td>184</td>
    229.         <td data-sparkline="52, 43, 65, 24 " />
    230.         <td>215</td>
    231.         <td data-sparkline="20, 42, 97, 56 " />
    232.         <td>-31</td>
    233.         <td data-sparkline="32, 1, -32, -32 ; vbar" />
    234.       </tr>
    235.       <tr>
    236.         <th>Kentucky</th>
    237.         <td>289</td>
    238.         <td data-sparkline="85, 74, 98, 32 " />
    239.         <td>219</td>
    240.         <td data-sparkline="37, 38, 93, 51 " />
    241.         <td>70</td>
    242.         <td data-sparkline="48, 36, 5, -19 ; vbar" />
    243.       </tr>
    244.       <tr>
    245.         <th>Louisiana</th>
    246.         <td>257</td>
    247.         <td data-sparkline="89, 18, 87, 63 " />
    248.         <td>201</td>
    249.         <td data-sparkline="19, 54, 35, 93 " />
    250.         <td>56</td>
    251.         <td data-sparkline="70, -36, 52, -30 ; vbar" />
    252.       </tr>
    253.       <tr>
    254.         <th>Maine</th>
    255.         <td>194</td>
    256.         <td data-sparkline="17, 68, 61, 48 " />
    257.         <td>133</td>
    258.         <td data-sparkline="44, 35, 42, 12 " />
    259.         <td>61</td>
    260.         <td data-sparkline="-27, 33, 19, 36 ; vbar" />
    261.       </tr>
    262.       <tr>
    263.         <th>Maryland</th>
    264.         <td>204</td>
    265.         <td data-sparkline="74, 12, 74, 44 " />
    266.         <td>157</td>
    267.         <td data-sparkline="65, 58, 22, 12 " />
    268.         <td>47</td>
    269.         <td data-sparkline="9, -46, 52, 32 ; vbar" />
    270.       </tr>
    271.       <tr>
    272.         <th>Massachusetts</th>
    273.         <td>172</td>
    274.         <td data-sparkline="44, 35, 69, 24 " />
    275.         <td>115</td>
    276.         <td data-sparkline="26, 3, 69, 17 " />
    277.         <td>57</td>
    278.         <td data-sparkline="18, 32, 0, 7 ; vbar" />
    279.       </tr>
    280.       <tr>
    281.         <th>Michigan</th>
    282.         <td>177</td>
    283.         <td data-sparkline="99, 26, 13, 39 " />
    284.         <td>185</td>
    285.         <td data-sparkline="20, 37, 99, 29 " />
    286.         <td>-8</td>
    287.         <td data-sparkline="79, -11, -86, 10 ; vbar" />
    288.       </tr>
    289.       <tr>
    290.         <th>Minnesota</th>
    291.         <td>99</td>
    292.         <td data-sparkline="34, 30, 16, 19 " />
    293.         <td>137</td>
    294.         <td data-sparkline="49, 43, 24, 21 " />
    295.         <td>-38</td>
    296.         <td data-sparkline="-15, -13, -8, -2 ; vbar" />
    297.       </tr>
    298.       <tr>
    299.         <th>Mississippi</th>
    300.         <td>205</td>
    301.         <td data-sparkline="38, 75, 31, 61 " />
    302.         <td>179</td>
    303.         <td data-sparkline="0, 68, 100, 11 " />
    304.         <td>26</td>
    305.         <td data-sparkline="38, 7, -69, 50 ; vbar" />
    306.       </tr>
    307.       <tr>
    308.         <th>Missouri</th>
    309.         <td>135</td>
    310.         <td data-sparkline="37, 48, 2, 48 " />
    311.         <td>202</td>
    312.         <td data-sparkline="41, 64, 17, 80 " />
    313.         <td>-67</td>
    314.         <td data-sparkline="-4, -16, -15, -32 ; vbar" />
    315.       </tr>
    316.       <tr>
    317.         <th>Montana</th>
    318.         <td>195</td>
    319.         <td data-sparkline="48, 81, 38, 28 " />
    320.         <td>237</td>
    321.         <td data-sparkline="44, 33, 86, 74 " />
    322.         <td>-42</td>
    323.         <td data-sparkline="4, 48, -48, -46 ; vbar" />
    324.       </tr>
    325.       <tr>
    326.         <th>Nebraska</th>
    327.         <td>286</td>
    328.         <td data-sparkline="98, 55, 82, 51 " />
    329.         <td>232</td>
    330.         <td data-sparkline="89, 54, 28, 61 " />
    331.         <td>54</td>
    332.         <td data-sparkline="9, 1, 54, -10 ; vbar" />
    333.       </tr>
    334.       <tr>
    335.         <th>Nevada</th>
    336.         <td>221</td>
    337.         <td data-sparkline="66, 4, 57, 94 " />
    338.         <td>214</td>
    339.         <td data-sparkline="59, 39, 94, 22 " />
    340.         <td>7</td>
    341.         <td data-sparkline="7, -35, -37, 72 ; vbar" />
    342.       </tr>
    343.       <tr>
    344.         <th>New Hampshire</th>
    345.         <td>136</td>
    346.         <td data-sparkline="32, 21, 1, 82 " />
    347.         <td>306</td>
    348.         <td data-sparkline="88, 85, 65, 68 " />
    349.         <td>-170</td>
    350.         <td data-sparkline="-56, -64, -64, 14 ; vbar" />
    351.       </tr>
    352.       <tr>
    353.         <th>New Jersey</th>
    354.         <td>194</td>
    355.         <td data-sparkline="31, 40, 24, 99 " />
    356.         <td>147</td>
    357.         <td data-sparkline="7, 45, 12, 83 " />
    358.         <td>47</td>
    359.         <td data-sparkline="24, -5, 12, 16 ; vbar" />
    360.       </tr>
    361.       <tr>
    362.         <th>New Mexico</th>
    363.         <td>207</td>
    364.         <td data-sparkline="66, 93, 18, 30 " />
    365.         <td>261</td>
    366.         <td data-sparkline="97, 28, 79, 57 " />
    367.         <td>-54</td>
    368.         <td data-sparkline="-31, 65, -61, -27 ; vbar" />
    369.       </tr>
    370.       <tr>
    371.         <th>New York</th>
    372.         <td>316</td>
    373.         <td data-sparkline="48, 95, 76, 97 " />
    374.         <td>193</td>
    375.         <td data-sparkline="68, 5, 97, 23 " />
    376.         <td>123</td>
    377.         <td data-sparkline="-20, 90, -21, 74 ; vbar" />
    378.       </tr>
    379.       <tr>
    380.         <th>North Carolina</th>
    381.         <td>175</td>
    382.         <td data-sparkline="31, 71, 2, 71 " />
    383.         <td>188</td>
    384.         <td data-sparkline="93, 5, 81, 9 " />
    385.         <td>-13</td>
    386.         <td data-sparkline="-62, 66, -79, 62 ; vbar" />
    387.       </tr>
    388.       <tr>
    389.         <th>North Dakota</th>
    390.         <td>181</td>
    391.         <td data-sparkline="3, 90, 62, 26 " />
    392.         <td>288</td>
    393.         <td data-sparkline="70, 63, 82, 73 " />
    394.         <td>-107</td>
    395.         <td data-sparkline="-67, 27, -20, -47 ; vbar" />
    396.       </tr>
    397.       <tr>
    398.         <th>Ohio</th>
    399.         <td>189</td>
    400.         <td data-sparkline="70, 50, 6, 63 " />
    401.         <td>163</td>
    402.         <td data-sparkline="21, 94, 4, 44 " />
    403.         <td>26</td>
    404.         <td data-sparkline="49, -44, 2, 19 ; vbar" />
    405.       </tr>
    406.       <tr>
    407.         <th>Oklahoma</th>
    408.         <td>188</td>
    409.         <td data-sparkline="66, 46, 53, 23 " />
    410.         <td>172</td>
    411.         <td data-sparkline="26, 25, 35, 86 " />
    412.         <td>16</td>
    413.         <td data-sparkline="40, 21, 18, -63 ; vbar" />
    414.       </tr>
    415.       <tr>
    416.         <th>Oregon</th>
    417.         <td>165</td>
    418.         <td data-sparkline="82, 31, 38, 14 " />
    419.         <td>257</td>
    420.         <td data-sparkline="91, 9, 80, 77 " />
    421.         <td>-92</td>
    422.         <td data-sparkline="-9, 22, -42, -63 ; vbar" />
    423.       </tr>
    424.       <tr>
    425.         <th>Pennsylvania</th>
    426.         <td>268</td>
    427.         <td data-sparkline="33, 88, 82, 65 " />
    428.         <td>129</td>
    429.         <td data-sparkline="30, 29, 41, 29 " />
    430.         <td>139</td>
    431.         <td data-sparkline="3, 59, 41, 36 ; vbar" />
    432.       </tr>
    433.       <tr>
    434.         <th>Rhode Island</th>
    435.         <td>164</td>
    436.         <td data-sparkline="8, 86, 32, 38 " />
    437.         <td>182</td>
    438.         <td data-sparkline="88, 8, 18, 68 " />
    439.         <td>-18</td>
    440.         <td data-sparkline="-80, 78, 14, -30 ; vbar" />
    441.       </tr>
    442.       <tr>
    443.         <th>South Carolina</th>
    444.         <td>91</td>
    445.         <td data-sparkline="24, 18, 0, 49 " />
    446.         <td>193</td>
    447.         <td data-sparkline="72, 62, 21, 38 " />
    448.         <td>-102</td>
    449.         <td data-sparkline="-48, -44, -21, 11 ; vbar" />
    450.       </tr>
    451.       <tr>
    452.         <th>South Dakota</th>
    453.         <td>184</td>
    454.         <td data-sparkline="73, 17, 64, 30 " />
    455.         <td>221</td>
    456.         <td data-sparkline="21, 91, 57, 52 " />
    457.         <td>-37</td>
    458.         <td data-sparkline="52, -74, 7, -22 ; vbar" />
    459.       </tr>
    460.       <tr>
    461.         <th>Tennessee</th>
    462.         <td>233</td>
    463.         <td data-sparkline="92, 24, 25, 92 " />
    464.         <td>131</td>
    465.         <td data-sparkline="5, 18, 42, 66 " />
    466.         <td>102</td>
    467.         <td data-sparkline="87, 6, -17, 26 ; vbar" />
    468.       </tr>
    469.       <tr>
    470.         <th>Texas</th>
    471.         <td>211</td>
    472.         <td data-sparkline="33, 80, 68, 30 " />
    473.         <td>225</td>
    474.         <td data-sparkline="86, 58, 36, 45 " />
    475.         <td>-14</td>
    476.         <td data-sparkline="-53, 22, 32, -15 ; vbar" />
    477.       </tr>
    478.       <tr>
    479.         <th>Utah</th>
    480.         <td>362</td>
    481.         <td data-sparkline="89, 98, 96, 79 " />
    482.         <td>225</td>
    483.         <td data-sparkline="35, 51, 88, 51 " />
    484.         <td>137</td>
    485.         <td data-sparkline="54, 47, 8, 28 ; vbar" />
    486.       </tr>
    487.       <tr>
    488.         <th>Vermont</th>
    489.         <td>119</td>
    490.         <td data-sparkline="4, 19, 56, 40 " />
    491.         <td>152</td>
    492.         <td data-sparkline="17, 66, 27, 42 " />
    493.         <td>-33</td>
    494.         <td data-sparkline="-13, -47, 29, -2 ; vbar" />
    495.       </tr>
    496.       <tr>
    497.         <th>Virginia</th>
    498.         <td>127</td>
    499.         <td data-sparkline="24, 27, 41, 35 " />
    500.         <td>71</td>
    501.         <td data-sparkline="30, 2, 36, 3 " />
    502.         <td>56</td>
    503.         <td data-sparkline="-6, 25, 5, 32 ; vbar" />
    504.       </tr>
    505.       <tr>
    506.         <th>Washington</th>
    507.         <td>165</td>
    508.         <td data-sparkline="40, 11, 63, 51 " />
    509.         <td>245</td>
    510.         <td data-sparkline="46, 41, 94, 64 " />
    511.         <td>-80</td>
    512.         <td data-sparkline="-6, -30, -31, -13 ; vbar" />
    513.       </tr>
    514.       <tr>
    515.         <th>West Virginia</th>
    516.         <td>248</td>
    517.         <td data-sparkline="66, 56, 97, 29 " />
    518.         <td>171</td>
    519.         <td data-sparkline="65, 53, 37, 16 " />
    520.         <td>77</td>
    521.         <td data-sparkline="1, 3, 60, 13 ; vbar" />
    522.       </tr>
    523.       <tr>
    524.         <th>Wisconsin</th>
    525.         <td>183</td>
    526.         <td data-sparkline="24, 55, 21, 83 " />
    527.         <td>224</td>
    528.         <td data-sparkline="80, 64, 13, 67 " />
    529.         <td>-41</td>
    530.         <td data-sparkline="-56, -9, 8, 16 ; vbar" />
    531.       </tr>
    532.       <tr>
    533.         <th>Wyoming</th>
    534.         <td>231</td>
    535.         <td data-sparkline="52, 49, 97, 33 " />
    536.         <td>251</td>
    537.         <td data-sparkline="96, 50, 23, 82 " />
    538.         <td>-20</td>
    539.         <td data-sparkline="-44, -1, 74, -49 ; vbar" />
    540.       </tr>
    541.     </tbody>
    542.   </table>
    543.  
    544.   <script>
    545.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    546.     var tds = [...document.querySelectorAll('td[data-sparkline]')];
    547.  
    548.     zingchart.DEV.DELAYEDTRACKERS = 1;
    549.     zingchart.DEV.SORTTOKENS = 0;
    550.     zingchart.DEV.PLOTSTATS = 0;
    551.     zingchart.DEV.RESOURCES = 0;
    552.     zingchart.DEV.KEEPSOURCE = 0;
    553.     zingchart.DEV.MEDIARULES = 0;
    554.     zingchart.DEV.SKIPPROGRESS = 1;
    555.     zingchart.DEV.SKIPCONTEXTMENU = 1;
    556.     zingchart.DEV.COPYDATA = 0;
    557.     zingchart.SYNTAX = 'dashed';
    558.  
    559.     //console.time('zc');
    560.     //console.profile('zc');
    561.     var loaded = 0;
    562.  
    563.     var start = new Date().getTime();
    564.  
    565.     for (var i = 0; i < tds.length; i++) {
    566.       //for (var i=0;i<10;i++) {
    567.       var td = tds[i];
    568.       td.id = 'zc' + i;
    569.       td.getAttribute('id', 'zc' + i);
    570.       var stringdata = td.getAttribute('data-sparkline');
    571.       var arr = stringdata.split('; ');
    572.       var svalues = arr[0].split(', ');
    573.  
    574.       var ctype = arr[1] || 'area';
    575.  
    576.       var cdata = {
    577.         'globals': {
    578.           'font-family': 'Lucida Sans Unicode'
    579.         },
    580.         'background-color': 'none',
    581.         'flat': true,
    582.         'layers': {
    583.           'graphset': false,
    584.           'graph': false,
    585.           'objects-bottom': false,
    586.           'objects-top': false,
    587.           'maps': false,
    588.           'plotarea': false,
    589.           'plots': true,
    590.           'guide': false,
    591.           'static': false,
    592.           'value-box': false
    593.         },
    594.         'type': ctype,
    595.         'plotarea': {
    596.           'margin': 2
    597.         },
    598.         'scale-x': {
    599.           'line-width': 0,
    600.           'guide': {
    601.             'visible': false
    602.           },
    603.           'tick': {
    604.             'visible': false
    605.           },
    606.           'item': {
    607.             'visible': false
    608.           }
    609.         },
    610.         'scale-y': {
    611.           'line-width': 0,
    612.           'guide': {
    613.             'visible': false
    614.           },
    615.           'tick': {
    616.             'visible': false
    617.           },
    618.           'item': {
    619.             'visible': false
    620.           }
    621.         },
    622.         'plot': {
    623.           'line-color': '#369',
    624.           'background-color': '#369',
    625.           'line-width': 1,
    626.           'marker': {
    627.             'border-width': 0,
    628.             'size': 2
    629.           }
    630.         },
    631.         'tooltip': {},
    632.         'series': [{
    633.           'values': svalues
    634.         }]
    635.       };
    636.       if (ctype === 'vbar') {
    637.         cdata['plot']['rules'] = [{
    638.           'rule': '%node-value < 0',
    639.           'background-color': '#c30'
    640.         }];
    641.       }
    642.  
    643.       //window.setTimeout((function(i, cdata) {
    644.       zingchart.render({
    645.         id: 'zc' + i,
    646.         width: 120,
    647.         height: 30,
    648.         output: 'svg',
    649.         data: cdata,
    650.         events: {
    651.           load: function() {
    652.             loaded++;
    653.             if (loaded === tds.length) {
    654.               // console.timeEnd('zc');
    655.               // console.profileEnd('zc');
    656.               result.innerHTML = ('Generated ' + tds.length + ' sparklines in ' + (new Date().getTime() - start) + ' ms');
    657.             }
    658.           }
    659.         }
    660.       });
    661.       //}).bind(null, i, cdata), 0);
    662.  
    663.     }
    664.   </script>
    665. </body>
    666.  
    667. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <script>
    10.     ZC.LICENSE = ['b55b025e438fa8a98e32482b5f768ff5'];
    11.   </script>
    12. </head>
    13.  
    14. <body>
    15.  
    16.   <div id="result"></div>
    17.   <table id="tableSparkline">
    18.     <thead>
    19.       <tr>
    20.         <th>State</th>
    21.         <th>Income</th>
    22.         <th>Income per quarter</th>
    23.         <th>Costs</th>
    24.         <th>Costs per quarter</th>
    25.         <th>Result</th>
    26.         <th>Result per quarter</th>
    27.       </tr>
    28.     </thead>
    29.     <tbody id="tbodySparkline">
    30.       <tr>
    31.         <th>Alabama</th>
    32.         <td>254</td>
    33.         <td data-sparkline="71, 78, 39, 66 " />
    34.         <td>296</td>
    35.         <td data-sparkline="68, 52, 80, 96 " />
    36.         <td>-42</td>
    37.         <td data-sparkline="3, 26, -41, -30 ; vbar" />
    38.       </tr>
    39.       <tr>
    40.         <th>Alaska</th>
    41.         <td>246</td>
    42.         <td data-sparkline="87, 44, 74, 41 " />
    43.         <td>181</td>
    44.         <td data-sparkline="29, 54, 73, 25 " />
    45.         <td>65</td>
    46.         <td data-sparkline="58, -10, 1, 16 ; vbar" />
    47.       </tr>
    48.       <tr>
    49.         <th>Arizona</th>
    50.         <td>101</td>
    51.         <td data-sparkline="56, 12, 8, 25 " />
    52.         <td>191</td>
    53.         <td data-sparkline="69, 14, 53, 55 " />
    54.         <td>-90</td>
    55.         <td data-sparkline="-13, -2, -45, -30 ; vbar" />
    56.       </tr>
    57.       <tr>
    58.         <th>Arkansas</th>
    59.         <td>303</td>
    60.         <td data-sparkline="81, 50, 78, 94 " />
    61.         <td>76</td>
    62.         <td data-sparkline="36, 15, 14, 11 " />
    63.         <td>227</td>
    64.         <td data-sparkline="45, 35, 64, 83 ; vbar" />
    65.       </tr>
    66.       <tr>
    67.         <th>California</th>
    68.         <td>200</td>
    69.         <td data-sparkline="61, 80, 10, 49 " />
    70.         <td>217</td>
    71.         <td data-sparkline="100, 8, 52, 57 " />
    72.         <td>-17</td>
    73.         <td data-sparkline="-39, 72, -42, -8 ; vbar" />
    74.       </tr>
    75.       <tr>
    76.         <th>Colorado</th>
    77.         <td>118</td>
    78.         <td data-sparkline="13, 48, 21, 36 " />
    79.         <td>273</td>
    80.         <td data-sparkline="98, 86, 8, 81 " />
    81.         <td>-155</td>
    82.         <td data-sparkline="-85, -38, 13, -45 ; vbar" />
    83.       </tr>
    84.       <tr>
    85.         <th>Connecticut</th>
    86.         <td>201</td>
    87.         <td data-sparkline="6, 64, 44, 87 " />
    88.         <td>148</td>
    89.         <td data-sparkline="60, 13, 73, 2 " />
    90.         <td>53</td>
    91.         <td data-sparkline="-54, 51, -29, 85 ; vbar" />
    92.       </tr>
    93.       <tr>
    94.         <th>Delaware</th>
    95.         <td>161</td>
    96.         <td data-sparkline="7, 27, 49, 78 " />
    97.         <td>298</td>
    98.         <td data-sparkline="19, 90, 100, 89 " />
    99.         <td>-137</td>
    100.         <td data-sparkline="-12, -63, -51, -11 ; vbar" />
    101.       </tr>
    102.       <tr>
    103.         <th>District of Columbia</th>
    104.         <td>106</td>
    105.         <td data-sparkline="18, 39, 27, 22 " />
    106.         <td>185</td>
    107.         <td data-sparkline="62, 97, 24, 2 " />
    108.         <td>-79</td>
    109.         <td data-sparkline="-44, -58, 3, 20 ; vbar" />
    110.       </tr>
    111.       <tr>
    112.         <th>Florida</th>
    113.         <td>249</td>
    114.         <td data-sparkline="51, 24, 90, 84 " />
    115.         <td>244</td>
    116.         <td data-sparkline="47, 40, 74, 83 " />
    117.         <td>5</td>
    118.         <td data-sparkline="4, -16, 16, 1 ; vbar" />
    119.       </tr>
    120.       <tr>
    121.         <th>Georgia</th>
    122.         <td>183</td>
    123.         <td data-sparkline="36, 80, 39, 28 " />
    124.         <td>212</td>
    125.         <td data-sparkline="43, 25, 52, 92 " />
    126.         <td>-29</td>
    127.         <td data-sparkline="-7, 55, -13, -64 ; vbar" />
    128.       </tr>
    129.       <tr>
    130.         <th>Hawaii</th>
    131.         <td>232</td>
    132.         <td data-sparkline="73, 34, 74, 51 " />
    133.         <td>172</td>
    134.         <td data-sparkline="1, 83, 49, 39 " />
    135.         <td>60</td>
    136.         <td data-sparkline="72, -49, 25, 12 ; vbar" />
    137.       </tr>
    138.       <tr>
    139.         <th>Idaho</th>
    140.         <td>166</td>
    141.         <td data-sparkline="25, 43, 31, 67 " />
    142.         <td>152</td>
    143.         <td data-sparkline="30, 30, 75, 17 " />
    144.         <td>14</td>
    145.         <td data-sparkline="-5, 13, -44, 50 ; vbar" />
    146.       </tr>
    147.       <tr>
    148.         <th>Illinois</th>
    149.         <td>336</td>
    150.         <td data-sparkline="56, 84, 98, 98 " />
    151.         <td>151</td>
    152.         <td data-sparkline="61, 12, 77, 1 " />
    153.         <td>185</td>
    154.         <td data-sparkline="-5, 72, 21, 97 ; vbar" />
    155.       </tr>
    156.       <tr>
    157.         <th>Indiana</th>
    158.         <td>216</td>
    159.         <td data-sparkline="52, 87, 64, 13 " />
    160.         <td>216</td>
    161.         <td data-sparkline="2, 47, 94, 73 " />
    162.         <td>0</td>
    163.         <td data-sparkline="50, 40, -30, -60 ; vbar" />
    164.       </tr>
    165.       <tr>
    166.         <th>Iowa</th>
    167.         <td>135</td>
    168.         <td data-sparkline="41, 45, 19, 30 " />
    169.         <td>159</td>
    170.         <td data-sparkline="17, 34, 45, 63 " />
    171.         <td>-24</td>
    172.         <td data-sparkline="24, 11, -26, -33 ; vbar" />
    173.       </tr>
    174.       <tr>
    175.         <th>Kansas</th>
    176.         <td>184</td>
    177.         <td data-sparkline="52, 43, 65, 24 " />
    178.         <td>215</td>
    179.         <td data-sparkline="20, 42, 97, 56 " />
    180.         <td>-31</td>
    181.         <td data-sparkline="32, 1, -32, -32 ; vbar" />
    182.       </tr>
    183.       <tr>
    184.         <th>Kentucky</th>
    185.         <td>289</td>
    186.         <td data-sparkline="85, 74, 98, 32 " />
    187.         <td>219</td>
    188.         <td data-sparkline="37, 38, 93, 51 " />
    189.         <td>70</td>
    190.         <td data-sparkline="48, 36, 5, -19 ; vbar" />
    191.       </tr>
    192.       <tr>
    193.         <th>Louisiana</th>
    194.         <td>257</td>
    195.         <td data-sparkline="89, 18, 87, 63 " />
    196.         <td>201</td>
    197.         <td data-sparkline="19, 54, 35, 93 " />
    198.         <td>56</td>
    199.         <td data-sparkline="70, -36, 52, -30 ; vbar" />
    200.       </tr>
    201.       <tr>
    202.         <th>Maine</th>
    203.         <td>194</td>
    204.         <td data-sparkline="17, 68, 61, 48 " />
    205.         <td>133</td>
    206.         <td data-sparkline="44, 35, 42, 12 " />
    207.         <td>61</td>
    208.         <td data-sparkline="-27, 33, 19, 36 ; vbar" />
    209.       </tr>
    210.       <tr>
    211.         <th>Maryland</th>
    212.         <td>204</td>
    213.         <td data-sparkline="74, 12, 74, 44 " />
    214.         <td>157</td>
    215.         <td data-sparkline="65, 58, 22, 12 " />
    216.         <td>47</td>
    217.         <td data-sparkline="9, -46, 52, 32 ; vbar" />
    218.       </tr>
    219.       <tr>
    220.         <th>Massachusetts</th>
    221.         <td>172</td>
    222.         <td data-sparkline="44, 35, 69, 24 " />
    223.         <td>115</td>
    224.         <td data-sparkline="26, 3, 69, 17 " />
    225.         <td>57</td>
    226.         <td data-sparkline="18, 32, 0, 7 ; vbar" />
    227.       </tr>
    228.       <tr>
    229.         <th>Michigan</th>
    230.         <td>177</td>
    231.         <td data-sparkline="99, 26, 13, 39 " />
    232.         <td>185</td>
    233.         <td data-sparkline="20, 37, 99, 29 " />
    234.         <td>-8</td>
    235.         <td data-sparkline="79, -11, -86, 10 ; vbar" />
    236.       </tr>
    237.       <tr>
    238.         <th>Minnesota</th>
    239.         <td>99</td>
    240.         <td data-sparkline="34, 30, 16, 19 " />
    241.         <td>137</td>
    242.         <td data-sparkline="49, 43, 24, 21 " />
    243.         <td>-38</td>
    244.         <td data-sparkline="-15, -13, -8, -2 ; vbar" />
    245.       </tr>
    246.       <tr>
    247.         <th>Mississippi</th>
    248.         <td>205</td>
    249.         <td data-sparkline="38, 75, 31, 61 " />
    250.         <td>179</td>
    251.         <td data-sparkline="0, 68, 100, 11 " />
    252.         <td>26</td>
    253.         <td data-sparkline="38, 7, -69, 50 ; vbar" />
    254.       </tr>
    255.       <tr>
    256.         <th>Missouri</th>
    257.         <td>135</td>
    258.         <td data-sparkline="37, 48, 2, 48 " />
    259.         <td>202</td>
    260.         <td data-sparkline="41, 64, 17, 80 " />
    261.         <td>-67</td>
    262.         <td data-sparkline="-4, -16, -15, -32 ; vbar" />
    263.       </tr>
    264.       <tr>
    265.         <th>Montana</th>
    266.         <td>195</td>
    267.         <td data-sparkline="48, 81, 38, 28 " />
    268.         <td>237</td>
    269.         <td data-sparkline="44, 33, 86, 74 " />
    270.         <td>-42</td>
    271.         <td data-sparkline="4, 48, -48, -46 ; vbar" />
    272.       </tr>
    273.       <tr>
    274.         <th>Nebraska</th>
    275.         <td>286</td>
    276.         <td data-sparkline="98, 55, 82, 51 " />
    277.         <td>232</td>
    278.         <td data-sparkline="89, 54, 28, 61 " />
    279.         <td>54</td>
    280.         <td data-sparkline="9, 1, 54, -10 ; vbar" />
    281.       </tr>
    282.       <tr>
    283.         <th>Nevada</th>
    284.         <td>221</td>
    285.         <td data-sparkline="66, 4, 57, 94 " />
    286.         <td>214</td>
    287.         <td data-sparkline="59, 39, 94, 22 " />
    288.         <td>7</td>
    289.         <td data-sparkline="7, -35, -37, 72 ; vbar" />
    290.       </tr>
    291.       <tr>
    292.         <th>New Hampshire</th>
    293.         <td>136</td>
    294.         <td data-sparkline="32, 21, 1, 82 " />
    295.         <td>306</td>
    296.         <td data-sparkline="88, 85, 65, 68 " />
    297.         <td>-170</td>
    298.         <td data-sparkline="-56, -64, -64, 14 ; vbar" />
    299.       </tr>
    300.       <tr>
    301.         <th>New Jersey</th>
    302.         <td>194</td>
    303.         <td data-sparkline="31, 40, 24, 99 " />
    304.         <td>147</td>
    305.         <td data-sparkline="7, 45, 12, 83 " />
    306.         <td>47</td>
    307.         <td data-sparkline="24, -5, 12, 16 ; vbar" />
    308.       </tr>
    309.       <tr>
    310.         <th>New Mexico</th>
    311.         <td>207</td>
    312.         <td data-sparkline="66, 93, 18, 30 " />
    313.         <td>261</td>
    314.         <td data-sparkline="97, 28, 79, 57 " />
    315.         <td>-54</td>
    316.         <td data-sparkline="-31, 65, -61, -27 ; vbar" />
    317.       </tr>
    318.       <tr>
    319.         <th>New York</th>
    320.         <td>316</td>
    321.         <td data-sparkline="48, 95, 76, 97 " />
    322.         <td>193</td>
    323.         <td data-sparkline="68, 5, 97, 23 " />
    324.         <td>123</td>
    325.         <td data-sparkline="-20, 90, -21, 74 ; vbar" />
    326.       </tr>
    327.       <tr>
    328.         <th>North Carolina</th>
    329.         <td>175</td>
    330.         <td data-sparkline="31, 71, 2, 71 " />
    331.         <td>188</td>
    332.         <td data-sparkline="93, 5, 81, 9 " />
    333.         <td>-13</td>
    334.         <td data-sparkline="-62, 66, -79, 62 ; vbar" />
    335.       </tr>
    336.       <tr>
    337.         <th>North Dakota</th>
    338.         <td>181</td>
    339.         <td data-sparkline="3, 90, 62, 26 " />
    340.         <td>288</td>
    341.         <td data-sparkline="70, 63, 82, 73 " />
    342.         <td>-107</td>
    343.         <td data-sparkline="-67, 27, -20, -47 ; vbar" />
    344.       </tr>
    345.       <tr>
    346.         <th>Ohio</th>
    347.         <td>189</td>
    348.         <td data-sparkline="70, 50, 6, 63 " />
    349.         <td>163</td>
    350.         <td data-sparkline="21, 94, 4, 44 " />
    351.         <td>26</td>
    352.         <td data-sparkline="49, -44, 2, 19 ; vbar" />
    353.       </tr>
    354.       <tr>
    355.         <th>Oklahoma</th>
    356.         <td>188</td>
    357.         <td data-sparkline="66, 46, 53, 23 " />
    358.         <td>172</td>
    359.         <td data-sparkline="26, 25, 35, 86 " />
    360.         <td>16</td>
    361.         <td data-sparkline="40, 21, 18, -63 ; vbar" />
    362.       </tr>
    363.       <tr>
    364.         <th>Oregon</th>
    365.         <td>165</td>
    366.         <td data-sparkline="82, 31, 38, 14 " />
    367.         <td>257</td>
    368.         <td data-sparkline="91, 9, 80, 77 " />
    369.         <td>-92</td>
    370.         <td data-sparkline="-9, 22, -42, -63 ; vbar" />
    371.       </tr>
    372.       <tr>
    373.         <th>Pennsylvania</th>
    374.         <td>268</td>
    375.         <td data-sparkline="33, 88, 82, 65 " />
    376.         <td>129</td>
    377.         <td data-sparkline="30, 29, 41, 29 " />
    378.         <td>139</td>
    379.         <td data-sparkline="3, 59, 41, 36 ; vbar" />
    380.       </tr>
    381.       <tr>
    382.         <th>Rhode Island</th>
    383.         <td>164</td>
    384.         <td data-sparkline="8, 86, 32, 38 " />
    385.         <td>182</td>
    386.         <td data-sparkline="88, 8, 18, 68 " />
    387.         <td>-18</td>
    388.         <td data-sparkline="-80, 78, 14, -30 ; vbar" />
    389.       </tr>
    390.       <tr>
    391.         <th>South Carolina</th>
    392.         <td>91</td>
    393.         <td data-sparkline="24, 18, 0, 49 " />
    394.         <td>193</td>
    395.         <td data-sparkline="72, 62, 21, 38 " />
    396.         <td>-102</td>
    397.         <td data-sparkline="-48, -44, -21, 11 ; vbar" />
    398.       </tr>
    399.       <tr>
    400.         <th>South Dakota</th>
    401.         <td>184</td>
    402.         <td data-sparkline="73, 17, 64, 30 " />
    403.         <td>221</td>
    404.         <td data-sparkline="21, 91, 57, 52 " />
    405.         <td>-37</td>
    406.         <td data-sparkline="52, -74, 7, -22 ; vbar" />
    407.       </tr>
    408.       <tr>
    409.         <th>Tennessee</th>
    410.         <td>233</td>
    411.         <td data-sparkline="92, 24, 25, 92 " />
    412.         <td>131</td>
    413.         <td data-sparkline="5, 18, 42, 66 " />
    414.         <td>102</td>
    415.         <td data-sparkline="87, 6, -17, 26 ; vbar" />
    416.       </tr>
    417.       <tr>
    418.         <th>Texas</th>
    419.         <td>211</td>
    420.         <td data-sparkline="33, 80, 68, 30 " />
    421.         <td>225</td>
    422.         <td data-sparkline="86, 58, 36, 45 " />
    423.         <td>-14</td>
    424.         <td data-sparkline="-53, 22, 32, -15 ; vbar" />
    425.       </tr>
    426.       <tr>
    427.         <th>Utah</th>
    428.         <td>362</td>
    429.         <td data-sparkline="89, 98, 96, 79 " />
    430.         <td>225</td>
    431.         <td data-sparkline="35, 51, 88, 51 " />
    432.         <td>137</td>
    433.         <td data-sparkline="54, 47, 8, 28 ; vbar" />
    434.       </tr>
    435.       <tr>
    436.         <th>Vermont</th>
    437.         <td>119</td>
    438.         <td data-sparkline="4, 19, 56, 40 " />
    439.         <td>152</td>
    440.         <td data-sparkline="17, 66, 27, 42 " />
    441.         <td>-33</td>
    442.         <td data-sparkline="-13, -47, 29, -2 ; vbar" />
    443.       </tr>
    444.       <tr>
    445.         <th>Virginia</th>
    446.         <td>127</td>
    447.         <td data-sparkline="24, 27, 41, 35 " />
    448.         <td>71</td>
    449.         <td data-sparkline="30, 2, 36, 3 " />
    450.         <td>56</td>
    451.         <td data-sparkline="-6, 25, 5, 32 ; vbar" />
    452.       </tr>
    453.       <tr>
    454.         <th>Washington</th>
    455.         <td>165</td>
    456.         <td data-sparkline="40, 11, 63, 51 " />
    457.         <td>245</td>
    458.         <td data-sparkline="46, 41, 94, 64 " />
    459.         <td>-80</td>
    460.         <td data-sparkline="-6, -30, -31, -13 ; vbar" />
    461.       </tr>
    462.       <tr>
    463.         <th>West Virginia</th>
    464.         <td>248</td>
    465.         <td data-sparkline="66, 56, 97, 29 " />
    466.         <td>171</td>
    467.         <td data-sparkline="65, 53, 37, 16 " />
    468.         <td>77</td>
    469.         <td data-sparkline="1, 3, 60, 13 ; vbar" />
    470.       </tr>
    471.       <tr>
    472.         <th>Wisconsin</th>
    473.         <td>183</td>
    474.         <td data-sparkline="24, 55, 21, 83 " />
    475.         <td>224</td>
    476.         <td data-sparkline="80, 64, 13, 67 " />
    477.         <td>-41</td>
    478.         <td data-sparkline="-56, -9, 8, 16 ; vbar" />
    479.       </tr>
    480.       <tr>
    481.         <th>Wyoming</th>
    482.         <td>231</td>
    483.         <td data-sparkline="52, 49, 97, 33 " />
    484.         <td>251</td>
    485.         <td data-sparkline="96, 50, 23, 82 " />
    486.         <td>-20</td>
    487.         <td data-sparkline="-44, -1, 74, -49 ; vbar" />
    488.       </tr>
    489.     </tbody>
    490.   </table>
    491.  
    492. </body>
    493.  
    494. </html>
    1. * {
    2.   font-family: 'Lucida Sans Unicode';
    3. }
    4.  
    5. html,
    6. body {
    7.   font-family: 'Lucida Sans Unicode';
    8.   height: 100%;
    9.   width: 100%;
    10.   margin: 0;
    11.   padding: 0;
    12. }
    13.  
    14. #myChart {
    15.   height: 100%;
    16.   width: 100%;
    17.   min-height: 150px;
    18. }
    19.  
    20. .zc-ref {
    21.   display: none;
    22. }
    23.  
    24. #result {
    25.   text-align: right;
    26.   color: gray;
    27.   min-height: 2em;
    28. }
    29.  
    30. #tableSparkline {
    31.   margin: 0 auto;
    32.   border-collapse: collapse;
    33. }
    34.  
    35. th {
    36.   font-weight: bold;
    37.   text-align: left;
    38. }
    39.  
    40. td,
    41. th {
    42.   padding: 5px;
    43.   border-bottom: 1px solid silver;
    44.   height: 20px;
    45. }
    46.  
    47. thead th {
    48.   border-top: 2px solid gray;
    49.   border-bottom: 2px solid gray;
    50. }
    1. var tds = [...document.querySelectorAll('td[data-sparkline]')];
    2.  
    3. zingchart.DEV.DELAYEDTRACKERS = 1;
    4. zingchart.DEV.SORTTOKENS = 0;
    5. zingchart.DEV.PLOTSTATS = 0;
    6. zingchart.DEV.RESOURCES = 0;
    7. zingchart.DEV.KEEPSOURCE = 0;
    8. zingchart.DEV.MEDIARULES = 0;
    9. zingchart.DEV.SKIPPROGRESS = 1;
    10. zingchart.DEV.SKIPCONTEXTMENU = 1;
    11. zingchart.DEV.COPYDATA = 0;
    12. zingchart.SYNTAX = 'dashed';
    13.  
    14. //console.time('zc');
    15. //console.profile('zc');
    16. var loaded = 0;
    17.  
    18. var start = new Date().getTime();
    19.  
    20. for (var i = 0; i < tds.length; i++) {
    21.   //for (var i=0;i<10;i++) {
    22.   var td = tds[i];
    23.   td.id = 'zc' + i;
    24.   td.getAttribute('id', 'zc' + i);
    25.   var stringdata = td.getAttribute('data-sparkline');
    26.   var arr = stringdata.split('; ');
    27.   var svalues = arr[0].split(', ');
    28.  
    29.   var ctype = arr[1] || 'area';
    30.  
    31.   var cdata = {
    32.     'globals': {
    33.       'font-family': 'Lucida Sans Unicode'
    34.     },
    35.     'background-color': 'none',
    36.     'flat': true,
    37.     'layers': {
    38.       'graphset': false,
    39.       'graph': false,
    40.       'objects-bottom': false,
    41.       'objects-top': false,
    42.       'maps': false,
    43.       'plotarea': false,
    44.       'plots': true,
    45.       'guide': false,
    46.       'static': false,
    47.       'value-box': false
    48.     },
    49.     'type': ctype,
    50.     'plotarea': {
    51.       'margin': 2
    52.     },
    53.     'scale-x': {
    54.       'line-width': 0,
    55.       'guide': {
    56.         'visible': false
    57.       },
    58.       'tick': {
    59.         'visible': false
    60.       },
    61.       'item': {
    62.         'visible': false
    63.       }
    64.     },
    65.     'scale-y': {
    66.       'line-width': 0,
    67.       'guide': {
    68.         'visible': false
    69.       },
    70.       'tick': {
    71.         'visible': false
    72.       },
    73.       'item': {
    74.         'visible': false
    75.       }
    76.     },
    77.     'plot': {
    78.       'line-color': '#369',
    79.       'background-color': '#369',
    80.       'line-width': 1,
    81.       'marker': {
    82.         'border-width': 0,
    83.         'size': 2
    84.       }
    85.     },
    86.     'tooltip': {},
    87.     'series': [{
    88.       'values': svalues
    89.     }]
    90.   };
    91.   if (ctype === 'vbar') {
    92.     cdata['plot']['rules'] = [{
    93.       'rule': '%node-value < 0',
    94.       'background-color': '#c30'
    95.     }];
    96.   }
    97.  
    98.   //window.setTimeout((function(i, cdata) {
    99.   zingchart.render({
    100.     id: 'zc' + i,
    101.     width: 120,
    102.     height: 30,
    103.     output: 'svg',
    104.     data: cdata,
    105.     events: {
    106.       load: function() {
    107.         loaded++;
    108.         if (loaded === tds.length) {
    109.           // console.timeEnd('zc');
    110.           // console.profileEnd('zc');
    111.           result.innerHTML = ('Generated ' + tds.length + ' sparklines in ' + (new Date().getTime() - start) + ' ms');
    112.         }
    113.       }
    114.     }
    115.   });
    116.   //}).bind(null, i, cdata), 0);
    117.  
    118. }