Chart Instraction for this project

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="image_src" type="image/jpeg" href="/images/logo.png" /> <link rel="icon" href="img/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> <meta name="description" content="Documentation" /> <meta name="keywords" content="chart" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/markeing.css" rel="stylesheet" /> <!-- Site Properities --> </head> <body> <div id="chart" height="400px"></div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> Program languages: • HTML • JavaScript with Jquery and Ajax • Bootstrap - CSS framework Folder: • index.html - Home page • css/ markeing.css and bootstrap.min.css and bootstrap.css - CSS • img/ - all imeges for home page and favicon.png - logo • json/ world.json and line1.json and bar1.json - Json • js/ chart.js and chart.min.js and bootstrap.min.js and jquery-2.1.4.min.js and bootstrap.js - JavaScript • Readme.txt </body> </html>

Script Trigger

<script type="text/javascript"> var chartexample1 = echarts.init(document.getElementById('chart1')); var option = { ... } chartexample1.setOption(option); </script>
Charts for responsive window.onresize = chartexample1.resize

Productivity with Json

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> //Ajax $.ajax({ //GET request type: "GET", contentType: 'application/json; charset=utf-8', dataType: 'json', //URL url: 'json/line1.json', error: function () { alert("An error occurred."); }, //data function success: function (data) { //alert(data.male) - URL var chart1 = echarts.init(document.getElementById('chart1')); //set Option chart1.setOption({ title: { text: '', subtext: '' }, //tigger tooltip: { trigger: 'axis' }, //legend legend: { data: ['Highest Productivity', 'Lowest Productivity'] }, //color color: ["#FFD23F", "#9417C1"], //toolbox with switch line and bar and refresh and save image toolbox: { show: true, feature: { mark: { show: false }, dataView: { show: false, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true, title: 'Refresh' }, saveAsImage: { show: true, title: 'Save As Image' } } }, //calculable xAxis calculable: true, xAxis: [ { type: 'category', boundaryGap: false, data:data.days } ], //calculable yAxis yAxis: [ { type: 'value', axisLabel: { formatter: '{value} %' } } ], //grid grid: { left: '0', right: '3%', bottom: '5%', containLabel: true }, //series mark point (min and max) and item style and mark line series: [ { //high productivity line name: 'Highest Productivity', type: 'line', data:data.high_productivity, markPoint: { data: [ { type: 'max', name: 'Min:' }, { type: 'min', name: 'Max:' } ] }, itemStyle: { normal: { lineStyle: { shadowColor: 'rgba(0,0,0,0.4)', width: '5', type: 'dotted' }, "areaStyle": { "type": "dark", }, } }, markLine: { data: [ { type: 'average', name: 'Avarage:' } ] } }, { //low productivity line name: 'Lowest Productivity', type: 'line', data: data.low_productivity, markPoint: { data: [ { name: 'Week Low', value: -2, xAxis: 1, yAxis: -1.5 } ] }, itemStyle: { normal: { "areaStyle": { "type": "dark", }, } }, markLine: { data: [ { type: 'average', name: 'Avarage:' } ] } } ] }); } }); </script>
json/line.json - Json
//low and high with week line data { "high_productivity": [ 11, 11, 15, 13, 12, 13, 10 ], "low_productivity": [ 8, -2, 2, 5, 3, 2, 0 ], "days": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] } }

Product Sales with Json

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> //Ajax $.ajax({ //GET requets type: "GET", contentType: 'application/json; charset=utf-8', dataType: 'json', //URL url: 'json/bar1.json', error: function () { alert("An error occurred."); }, //data function success: function (data) { //alert(data.product1) var chart1 = echarts.init(document.getElementById('chart1')); window.onresize = chart1.resize; chart1.setOption({ title: { text: '', subtext: '' }, //tigger tooltip: { trigger: 'axis' }, //legend legend: { data: ['Product 1', 'Product 2'] }, //toolbox with switch line and bar and refresh and save image toolbox: { show: true, feature: { mark: { show: false }, dataView: { show: false, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true, title: 'Refresh' }, saveAsImage: { show: true, title: 'Save As Image' } } }, //calculable x Axis calculable: true, xAxis: [ { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] } ], // calculable y Axis yAxis: [ { type: 'value' } ], //color color: ["#9417C1", "#20BF55"], //series, mark point, mark line series: [ { name: 'Product 1', type: 'bar', data: data.product1, markPoint: { data: [ { type: 'max', name: 'product1' }, { type: 'min', name: 'product1' } ] }, //mark line for product 1 markLine: { data: [ { type: 'average', name: 'Avarage' } ] } }, { //mark line for product 2 name: 'Product 2', type: 'bar', data: data.product2, markPoint: { data: [ { name: 'product2', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 }, { name: 'product2', value: 2.3, xAxis: 11, yAxis: 3 } ] }, markLine: { data: [ { type: 'average', name: 'Avarage' } ] } } ] }); } }); </script>
json/bar1.json - Json
//product 1 and product 2 data { "product2": [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ], "product1": [ 150.0, 40.9, 70.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 60.4, 3.3 ] }

Google Rang with params

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> var chart1 = echarts.init(document.getElementById('chart1')); option = { title: { text: '' }, //tiger high and low tooltip: { trigger: 'axis', formatter: function (params) { var res = params[0].seriesName + ' ' + params[0].name; res += '<br /> Opening : ' + params[0].value[0] + ' Highest : ' + params[0].value[3]; res += '<br /> Closing : ' + params[0].value[1] + ' Lowest : ' + params[0].value[2]; return res; } }, //legend legend: { data: ['The Composite Index'] }, //toolbax with zoom and refresh and save toolbox: { show: true, feature: { dataZoom: { show: true, title: 'Zoom' }, restore: { show: true, title: 'Refresh' }, //magicType: { show: true, type: ['line', 'bar'] }, saveAsImage: { show: true, title: 'Save As Image' } } }, //data zoom sart and end dataZoom: { show: true, realtime: true, start: 50, end: 100 }, //x axis with coordinates in year/month data xAxis: [ { type: 'category', boundaryGap: true, axisTick: { onGap: false }, splitLine: { show: false }, data: [ "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6", "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13", "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12", "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19", "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26", "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29", "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5", "2013/6/6", "2013/6/7", "2013/6/13" ] } ], //y axis with opening/highest and closing/lowest data yAxis: [ { type: 'value', scale: true, boundaryGap: [0.01, 0.01] } ], series: [ { name: 'The Composite Index', type: 'k', data: [ // Opening，Closing，Lowest，Highest [2320.26, 2302.6, 2287.3, 2362.94], [2300, 2291.3, 2288.26, 2308.38], [2295.35, 2346.5, 2295.35, 2346.92], [2347.22, 2358.98, 2337.35, 2363.8], [2360.75, 2382.48, 2347.89, 2383.76], [2383.43, 2385.42, 2371.23, 2391.82], [2377.41, 2419.02, 2369.57, 2421.15], [2425.92, 2428.15, 2417.58, 2440.38], [2411, 2433.13, 2403.3, 2437.42], [2432.68, 2434.48, 2427.7, 2441.73], [2430.69, 2418.53, 2394.22, 2433.89], [2416.62, 2432.4, 2414.4, 2443.03], [2441.91, 2421.56, 2415.43, 2444.8], [2420.26, 2382.91, 2373.53, 2427.07], [2383.49, 2397.18, 2370.61, 2397.94], [2378.82, 2325.95, 2309.17, 2378.82], [2322.94, 2314.16, 2308.76, 2330.88], [2320.62, 2325.82, 2315.01, 2338.78], [2313.74, 2293.34, 2289.89, 2340.71], [2297.77, 2313.22, 2292.03, 2324.63], [2322.32, 2365.59, 2308.92, 2366.16], [2364.54, 2359.51, 2330.86, 2369.65], [2332.08, 2273.4, 2259.25, 2333.54], [2274.81, 2326.31, 2270.1, 2328.14], [2333.61, 2347.18, 2321.6, 2351.44], [2340.44, 2324.29, 2304.27, 2352.02], [2326.42, 2318.61, 2314.59, 2333.67], [2314.68, 2310.59, 2296.58, 2320.96], [2309.16, 2286.6, 2264.83, 2333.29], [2282.17, 2263.97, 2253.25, 2286.33], [2255.77, 2270.28, 2253.31, 2276.22], [2269.31, 2278.4, 2250, 2312.08], [2267.29, 2240.02, 2239.21, 2276.05], [2244.26, 2257.43, 2232.02, 2261.31], [2257.74, 2317.37, 2257.42, 2317.86], [2318.21, 2324.24, 2311.6, 2330.81], [2321.4, 2328.28, 2314.97, 2332], [2334.74, 2326.72, 2319.91, 2344.89], [2318.58, 2297.67, 2281.12, 2319.99], [2299.38, 2301.26, 2289, 2323.48], [2273.55, 2236.3, 2232.91, 2273.55], [2238.49, 2236.62, 2228.81, 2246.87], [2229.46, 2234.4, 2227.31, 2243.95], [2234.9, 2227.74, 2220.44, 2253.42], [2232.69, 2225.29, 2217.25, 2241.34], [2196.24, 2211.59, 2180.67, 2212.59], [2215.47, 2225.77, 2215.47, 2234.73], [2224.93, 2226.13, 2212.56, 2233.04], [2236.98, 2219.55, 2217.26, 2242.48], [2218.09, 2206.78, 2204.44, 2226.26], [2199.91, 2181.94, 2177.39, 2204.99], [2169.63, 2194.85, 2165.78, 2196.43], [2195.03, 2193.8, 2178.47, 2197.51], [2181.82, 2197.6, 2175.44, 2206.03], [2201.12, 2244.64, 2200.58, 2250.11], [2236.4, 2242.17, 2232.26, 2245.12], [2242.62, 2184.54, 2182.81, 2242.62], [2187.35, 2218.32, 2184.11, 2226.12], [2213.19, 2199.31, 2191.85, 2224.63], [2203.89, 2177.91, 2173.86, 2210.58], [2170.78, 2174.12, 2161.14, 2179.65], [2179.05, 2205.5, 2179.05, 2222.81], [2212.5, 2231.17, 2212.5, 2236.07], [2227.86, 2235.57, 2219.44, 2240.26], [2242.39, 2246.3, 2235.42, 2255.21], [2246.96, 2232.97, 2221.38, 2247.86], [2228.82, 2246.83, 2225.81, 2247.67], [2247.68, 2241.92, 2231.36, 2250.85], [2238.9, 2217.01, 2205.87, 2239.93], [2217.09, 2224.8, 2213.58, 2225.19], [2221.34, 2251.81, 2210.77, 2252.87], [2249.81, 2282.87, 2248.41, 2288.09], [2286.33, 2299.99, 2281.9, 2309.39], [2297.11, 2305.11, 2290.12, 2305.3], [2303.75, 2302.4, 2292.43, 2314.18], [2293.81, 2275.67, 2274.1, 2304.95], [2281.45, 2288.53, 2270.25, 2292.59], [2286.66, 2293.08, 2283.94, 2301.7], [2293.4, 2321.32, 2281.47, 2322.1], [2323.54, 2324.02, 2321.17, 2334.33], [2316.25, 2317.75, 2310.49, 2325.72], [2320.74, 2300.59, 2299.37, 2325.53], [2300.21, 2299.25, 2294.11, 2313.43], [2297.1, 2272.42, 2264.76, 2297.1], [2270.71, 2270.93, 2260.87, 2276.86], [2264.43, 2242.11, 2240.07, 2266.69], [2242.26, 2210.9, 2205.07, 2250.63], [2190.1, 2148.35, 2126.22, 2190.1] ] } ] }; chart1.setOption(option); </script>

Online Marketing with data change with pie

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> var chart1 = echarts.init(document.getElementById('chart1')); //option option = { //title for the pie title: { text: 'A site user to access source', subtext: '', x: 'center' }, //tigger tooltip: { trigger: 'item', formatter: "{a} <br />{b} : {c} ({d}%)" }, //legend legend: { orient: 'vertical', x: 'left', data: ['Direct Interview', 'E-mail Marketing', 'Advertising Alliance', 'Video Ads', 'Search Engine'] }, //toolbox data show (change dta here and refresh or cancel) and refrsh and save image toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore: { show: true }, saveAsImage: { show: true } } }, //color color: ["#EF476F", "#FFD166", "#06D6A0", "#118AB2", "#073B4C"], calculable: true, //series from pie in % series: [ { name: 'Access Sources', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: 'Direct Interview' }, { value: 310, name: 'E-mail Marketing' }, { value: 234, name: 'Advertising Alliance' }, { value: 135, name: 'Video Ads' }, { value: 1548, name: 'Search Engine' } ] } ] }; chart1.setOption(option); </script>

Buget with spider pie

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> var chart1 = echarts.init(document.getElementById('chart1')); //optin option = { //titile for sider pie title: { text: 'Budget vs expenses（Budget vs spending）', subtext: '' }, //tiger axis tooltip: { trigger: 'axis' }, //legend x and y axis legend: { orient: 'vertical', x: 'right', y: 'bottom', data: ['Budget allocation（Allocated Budget）', 'The actual cost（Actual Spending）'] }, //toolbox with refresh and save image toolbox: { show: true, feature: { restore: { show: true, title: 'Refresh' }, //magicType: { show: true, type: ['force', 'chord'] }, saveAsImage: { show: true, title: 'Save As Image' } } }, //color color: ["#FFD166", "#EF476F"], //spider pie indecator polar: [ { indicator: [ { text: 'Sales（Sales）', max: 6000 }, { text: 'Administration（Administration）', max: 16000 }, { text: 'Information Technology（Information Techology）', max: 30000 }, { text: 'Customer Support（Customer Support）', max: 38000 }, { text: 'Development（Development）', max: 52000 }, { text: 'Marketing（Marketing）', max: 25000 } ] } ], calculable: true, //series with option visual or hidden series: [ { name: 'Budget vs expenses（Budget vs spending）', type: 'radar', data: [ { value: [4300, 10000, 28000, 35000, 50000, 19000], name: 'Budget allocation（Allocated Budget）' }, { value: [5000, 14000, 28000, 31000, 42000, 21000], name: 'The actual cost（Actual Spending）' } ] } ] }; chart1.setOption(option); </script>

interactive Map with Json

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script type="text/javascript"> //loading chart1 var myChart = echarts.init(document.getElementById('chart1')); myChart.showLoading(); //Ajax URL with Joson $.get('maps/world.json', function (usaJson) { myChart.hideLoading(); echarts.registerMap('world', usaJson, { }); //option option = { //title description title: { text: 'World Population', subtext: 'Datas Are Not Real', sublink: '', left: 'right' }, //tigger with parmas tooltip: { trigger: 'item', showDelay: 0, transitionDuration: 0.2, formatter: function (params) { var value = (params.value + '').split('.'); value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,'); return params.seriesName + '<br />' + params.name + ': ' + value; } }, //visual map with postion visualMap: { left: 'right', min: 0, max: 1000000, inRange: { color: ['#247BA0', '#FFE066', '#F25F5C'] }, text: ['High', 'Low'], calculable: true }, //toolbox over touch toolbox: { show: true, //orient: 'vertical', left: 'left', top: 'top', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, series: [ { name: 'World Population', type: 'map', map: 'world', itemStyle: { emphasis: { label: { show: false } } }, //country coordination zoom: 1.2, data: [ { name: 'Afghanistan', value: 28397.812 }, { name: 'Angola', value: 19549.124 }, { name: 'Albania', value: 3150.143 }, { name: 'United Arab Emirates', value: 8441.537 }, { name: 'Argentina', value: 40374.224 }, { name: 'Armenia', value: 2963.496 }, { name: 'French Southern and Antarctic Lands', value: 268.065 }, { name: 'Australia', value: 22404.488 }, { name: 'Austria', value: 8401.924 }, { name: 'Azerbaijan', value: 9094.718 }, { name: 'Burundi', value: 9232.753 }, { name: 'Belgium', value: 10941.288 }, { name: 'Benin', value: 9509.798 }, { name: 'Burkina Faso', value: 15540.284 }, { name: 'Bangladesh', value: 151125.475 }, { name: 'Bulgaria', value: 7389.175 }, { name: 'The Bahamas', value: 66402.316 }, { name: 'Bosnia and Herzegovina', value: 3845.929 }, { name: 'Belarus', value: 9491.07 }, { name: 'Belize', value: 308.595 }, { name: 'Bermuda', value: 64.951 }, { name: 'Bolivia', value: 716.939 }, { name: 'Brazil', value: 195210.154 }, { name: 'Brunei', value: 27.223 }, { name: 'Bhutan', value: 716.939 }, { name: 'Botswana', value: 1969.341 }, { name: 'Central African Republic', value: 4349.921 }, { name: 'Canada', value: 34126.24 }, { name: 'Switzerland', value: 7830.534 }, { name: 'Chile', value: 17150.76 }, { name: 'China', value: 1359821.465 }, { name: 'Ivory Coast', value: 60508.978 }, { name: 'Cameroon', value: 20624.343 }, { name: 'Democratic Republic of the Congo', value: 62191.161 }, { name: 'Republic of the Congo', value: 3573.024 }, { name: 'Colombia', value: 46444.798 }, { name: 'Costa Rica', value: 4669.685 }, { name: 'Cuba', value: 11281.768 }, { name: 'Northern Cyprus', value: 1.468 }, { name: 'Cyprus', value: 1103.685 }, { name: 'Czech Republic', value: 10553.701 }, { name: 'Germany', value: 83017.404 }, { name: 'Djibouti', value: 834.036 }, { name: 'Denmark', value: 5550.959 }, { name: 'Dominican Republic', value: 10016.797 }, { name: 'Algeria', value: 37062.82 }, { name: 'Ecuador', value: 15001.072 }, { name: 'Egypt', value: 78075.705 }, { name: 'Eritrea', value: 5741.159 }, { name: 'Spain', value: 46182.038 }, { name: 'Estonia', value: 1298.533 }, { name: 'Ethiopia', value: 87095.281 }, { name: 'Finland', value: 5367.693 }, { name: 'Fiji', value: 860.559 }, { name: 'Falkland Islands', value: 49.581 }, { name: 'France', value: 63230.866 }, { name: 'Gabon', value: 1556.222 }, { name: 'United Kingdom', value: 62066.35 }, { name: 'Georgia', value: 4388.674 }, { name: 'Ghana', value: 24262.901 }, { name: 'Guinea', value: 10876.033 }, { name: 'Gambia', value: 1680.64 }, { name: 'Guinea Bissau', value: 10876.033 }, { name: 'Equatorial Guinea', value: 696.167 }, { name: 'Greece', value: 11109.999 }, { name: 'Greenland', value: 56.546 }, { name: 'Guatemala', value: 14341.576 }, { name: 'French Guiana', value: 231.169 }, { name: 'Guyana', value: 786.126 }, { name: 'Honduras', value: 7621.204 }, { name: 'Croatia', value: 4338.027 }, { name: 'Haiti', value: 9896.4 }, { name: 'Hungary', value: 10014.633 }, { name: 'Indonesia', value: 240676.485 }, { name: 'India', value: 1205624.648 }, { name: 'Ireland', value: 4467.561 }, { name: 'Iran', value: 240676.485 }, { name: 'Iraq', value: 30962.38 }, { name: 'Iceland', value: 318.042 }, { name: 'Israel', value: 7420.368 }, { name: 'Italy', value: 60508.978 }, { name: 'Jamaica', value: 2741.485 }, { name: 'Jordan', value: 6454.554 }, { name: 'Japan', value: 127352.833 }, { name: 'Kazakhstan', value: 15921.127 }, { name: 'Kenya', value: 40909.194 }, { name: 'Kyrgyzstan', value: 5334.223 }, { name: 'Cambodia', value: 14364.931 }, { name: 'South Korea', value: 51452.352 }, { name: 'Kosovo', value: 97.743 }, { name: 'Kuwait', value: 2991.58 }, { name: 'Laos', value: 6395.713 }, { name: 'Lebanon', value: 4341.092 }, { name: 'Liberia', value: 3957.99 }, { name: 'Libya', value: 6040.612 }, { name: 'Sri Lanka', value: 20758.779 }, { name: 'Lesotho', value: 2008.921 }, { name: 'Lithuania', value: 3068.457 }, { name: 'Luxembourg', value: 507.885 }, { name: 'Lithuania', value: 2090.519 }, { name: 'Morocco', value: 31642.36 }, { name: 'Moldova', value: 103.619 }, { name: 'Madagascar', value: 21079.532 }, { name: 'Mexico', value: 117886.404 }, { name: 'Macedonia', value: 507.885 }, { name: 'Mali', value: 13985.961 }, { name: 'Myanmar', value: 51931.231 }, { name: 'Montenegro', value: 620.078 }, { name: 'Mongolia', value: 2712.738 }, { name: 'Mozambique', value: 23967.265 }, { name: 'Mauritania', value: 3609.42 }, { name: 'Malawi', value: 15013.694 }, { name: 'Malaysia', value: 28275.835 }, { name: 'Namibia', value: 2178.967 }, { name: 'New Caledonia', value: 246.379 }, { name: 'Niger', value: 15893.746 }, { name: 'Nigeria', value: 159707.78 }, { name: 'Nicaragua', value: 5822.209 }, { name: 'Netherlands', value: 16615.243 }, { name: 'Norway', value: 4891.251 }, { name: 'Nepal', value: 26846.016 }, { name: 'New Zealand', value: 4368.136 }, { name: 'Oman', value: 2802.768 }, { name: 'Pakistan', value: 173149.306 }, { name: 'Panama', value: 3678.128 }, { name: 'Peru', value: 29262.83 }, { name: 'Philippines', value: 93444.322 }, { name: 'Papua New Guinea', value: 6858.945 }, { name: 'Poland', value: 38198.754 }, { name: 'Puerto Rico', value: 3709.671 }, { name: 'North Korea', value: 1.468 }, { name: 'Portugal', value: 10589.792 }, { name: 'Paraguay', value: 6459.721 }, { name: 'Qatar', value: 1749.713 }, { name: 'Romania', value: 21861.476 }, { name: 'Russia', value: 21861.476 }, { name: 'Rwanda', value: 10836.732 }, { name: 'Western Sahara', value: 514.648 }, { name: 'Saudi Arabia', value: 27258.387 }, { name: 'Sudan', value: 35652.002 }, { name: 'South Sudan', value: 9940.929 }, { name: 'Senegal', value: 12950.564 }, { name: 'Solomon Islands', value: 526.447 }, { name: 'Sierra Leone', value: 5751.976 }, { name: 'El Salvador', value: 6218.195 }, { name: 'Somaliland', value: 9636.173 }, { name: 'Somalia', value: 9636.173 }, { name: 'Republic of Serbia', value: 3573.024 }, { name: 'Suriname', value: 524.96 }, { name: 'Slovakia', value: 5433.437 }, { name: 'Slovenia', value: 2054.232 }, { name: 'Sweden', value: 9382.297 }, { name: 'Swaziland', value: 1193.148 }, { name: 'Syria', value: 7830.534 }, { name: 'Chad', value: 11720.781 }, { name: 'Togo', value: 6306.014 }, { name: 'Thailand', value: 66402.316 }, { name: 'Tajikistan', value: 7627.326 }, { name: 'Turkmenistan', value: 5041.995 }, { name: 'East Timor', value: 10016.797 }, { name: 'Trinidad and Tobago', value: 1328.095 }, { name: 'Tunisia', value: 10631.83 }, { name: 'Turkey', value: 72137.546 }, { name: 'United Republic of Tanzania', value: 44973.33 }, { name: 'Uganda', value: 33987.213 }, { name: 'Ukraine', value: 46050.22 }, { name: 'Uruguay', value: 3371.982 }, { name: 'United States of America', value: 312247.116 }, { name: 'Uzbekistan', value: 27769.27 }, { name: 'Venezuela', value: 236.299 }, { name: 'Vietnam', value: 89047.397 }, { name: 'Vanuatu', value: 236.299 }, { name: 'West Bank', value: 13.565 }, { name: 'Yemen', value: 22763.008 }, { name: 'South Africa', value: 51452.352 }, { name: 'Zambia', value: 13216.985 }, { name: 'Zimbabwe', value: 13076.978 } ] } ] }; myChart.setOption(option); }); </script> <div class="alert alert-info"> json/bar1.json - Json </div> <xmp> //map json coordinates from the counrties { "title": "World map", "version": "1.1.2", "type": "FeatureCollection", "copyrightShort": "Natural Earth", "copyrightUrl": "http://www.naturalearthdata.com", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG:54003" } }, //json coordinates for margin and offset for x and y axis "hc-transform": { "default": { "crs": "+proj=mill +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R_A +datum=WGS84 +units=m +no_defs", "scale": 1.72182781654e-05, "jsonres": 15.5, "jsonmarginX": -999, "jsonmarginY": 9851.0, "xoffset": -19495356.3693, "yoffset": 12635908.1982 } }, //one example code for map coordinates "features": [ { "type": "Feature", "id": "FO", "properties": { "hc-group": "admin0", "hc-middle-x": 0.48, "hc-middle-y": 0.54, "hc-key": "fo", "hc-a2": "FO", "name": "Faroe Islands", "labelrank": "6", "country-abbrev": "Faeroe Is.", "subregion": "Northern Europe", "region-wb": "Europe & Central Asia", "iso-a3": "FRO", "iso-a2": "FO", "woe-id": "23424816", "continent": "Europe" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 3991, 8611 ], [ 4005, 8598 ], [ 4004, 8594 ], [ 3989, 8605 ], [ 3991, 8611 ] ] ] } }, { //coordinate for Australia and New Zealand "type": "Feature", "id": "AU", "properties": { "hc-group": "admin0", "hc-middle-x": 0.54, "hc-middle-y": 0.38, "hc-key": "au", "hc-a2": "AU", "name": "Australia", "labelrank": "2", "country-abbrev": "Auz.", "subregion": "Australia and New Zealand", "region-wb": "East Asia & Pacific", "iso-a3": "AUS", "iso-a2": "AU", "woe-id": "-90", "continent": "Oceania" }, //geometry for Australia and New Zealand "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8537, 5105 ], [ 8515, 5139 ], [ 8479, 5229 ], [ 8543, 5191 ], [ 8602, 5210 ], [ 8595, 5117 ], [ 8537, 5105 ] ] ], [ [ [ 8519, 5993 ], [ 8550, 5909 ], [ 8629, 5866 ], [ 8644, 5812 ], [ 8680, 5798 ], [ 8682, 5771 ], [ 8712, 5753 ], [ 8746, 5701 ], [ 8762, 5603 ], [ 8731, 5487 ], [ 8709, 5472 ], [ 8660, 5372 ], [ 8655, 5318 ], [ 8605, 5306 ], [ 8551, 5275 ], [ 8505, 5283 ], [ 8507, 5304 ], [ 8464, 5271 ], [ 8379, 5298 ], [ 8351, 5328 ], [ 8329, 5384 ], [ 8261, 5366 ], [ 8300, 5464 ], [ 8283, 5464 ], [ 8229, 5404 ], [ 8185, 5486 ], [ 8096, 5519 ], [ 7949, 5494 ], [ 7887, 5463 ], [ 7870, 5437 ], [ 7765, 5438 ], [ 7718, 5405 ], [ 7646, 5408 ], [ 7616, 5433 ], [ 7637, 5459 ], [ 7637, 5513 ], [ 7587, 5653 ], [ 7556, 5702 ], [ 7592, 5701 ], [ 7570, 5741 ], [ 7577, 5802 ], [ 7645, 5849 ], [ 7793, 5892 ], [ 7834, 5938 ], [ 7853, 5985 ], [ 7871, 5957 ], [ 7872, 5998 ], [ 7896, 5993 ], [ 7897, 6026 ], [ 7971, 6072 ], [ 8008, 6042 ], [ 8052, 6031 ], [ 8043, 6051 ], [ 8104, 6146 ], [ 8105, 6115 ], [ 8156, 6132 ], [ 8212, 6115 ], [ 8254, 6129 ], [ 8267, 6115 ], [ 8224, 6036 ], [ 8329, 5976 ], [ 8359, 5951 ], [ 8384, 5959 ], [ 8408, 6030 ], [ 8406, 6107 ], [ 8422, 6177 ], [ 8436, 6161 ], [ 8476, 6048 ], [ 8517, 6035 ], [ 8519, 5993 ] ] ] ] } }, and other country code ] }

Social Media with data change

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/chart.js"></script> <script> //chart1 var chart1 = echarts.init(document.getElementById('chart1')); //option option = { //tigger axis tooltip: { trigger: 'axis' }, //toolbox with data change and line and bar and strack and tiled and refresh and save image toolbox: { show: true, y: 'bottom', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }, restore: { show: true }, saveAsImage: { show: true } } }, //color color: ["#BCE784", "#5DD39E", "#525174", "#348AA7", "#513B56"], calculable: true, //legend legend: { data: ['Direct Interview', 'E-mail Marketing', 'Advertising Alliance', 'Video Ads', 'Search Engine', 'Yandex', 'Google', 'Bing', 'Other'] }, // x axis xAxis: [ { type: 'category', splitLine: { show: false }, data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] } ], //y axis yAxis: [ { type: 'value', position: 'right' } ], //description with visual and hidden option series: [ { name: 'Direct Interview', type: 'bar', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'E-mail Marketing', type: 'bar', tooltip: { trigger: 'item' }, stack: 'Advertising', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Advertising Alliance', type: 'bar', tooltip: { trigger: 'item' }, stack: 'Advertising', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'bar', tooltip: { trigger: 'item' }, stack: 'Advertising', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Search Engine', type: 'line', data: [862, 1018, 964, 1026, 1679, 1600, 1570] }, { name: 'Search Engine', type: 'pie', tooltip: { trigger: 'item', formatter: '{a} <br />{b} : {c} ({d}%)' }, center: [160, 130], radius: [0, 50], itemStyle: { normal: { labelLine: { length: 20 } } }, data: [ { value: 251, name: 'Yandex' }, { value: 1048, name: 'Google' }, { value: 147, name: 'Bing' }, { value: 102, name: 'Other' } ] } ] }; chart1.setOption(option); </script>

Setting in the examples

Name Description
{color} backgroundColor The background color or gradient for the outer chart area, Support rgba and defaults to null, transprent.
{Array} color List of color for the array series,, possible array is: ['#87cefa', 'rgba(123,123,123,0.5)','...']. When there are more series than colors in the list, new colors are pulled from the start again.
{boolean} renderAsImage Allows rendering as image in any browser but IE8
{boolean} calculable Specifies whether the drag-recalculate feature will be enabled. Defaults to false.
{boolean} animation Specifies whether the animation will be enabled. Defaults to true.
{Object} timeline Timeline at most one timeline control is allowed in one chart.
{Object} title Title, at most one title control is allowed in one chart.
{Object} toolbox Toolbox, at most one toolbox is allowed in one chart.
{Object} tooltip Tooltip, A small "hover box" with detailed information about the item being hovered over.
{Object} legend Legend, at most one legend is allowed in one single/combination chart.
{Object} dataRange DataRange, data range.
{Object} dataZoom DataZoom, data zoom.
{Object} roamController zoom and roam controller, use for the map.
{Object} grid A network of regularly spaced lines on a Cartesian coordinate system
{Array | Object} xAxis The horizontal axis array of a two-dimensional plot in Cartesian coordinates, and each item in the array represents one horizontal axis. According to Standard (1.0), at most two horizontal axes are allowed in one chart.
{Array | Object} yAxis The vertical axis array of a two-dimensional plot in Cartesian coordinates, and each item in the array represents one vertical axis. According to Standard (1.0), at most two vertical axes are allowed in one chart.
{Array} series The data array generated by data-driven chart, Each item in the array stands for a series' options and data.