JSFiddle

hamedit4pme's public fiddles

  • UI bootstrap modal

    modal opens another modal created for this SO: http://stackoverflow.com/questions/34243879/trigger-modal-on-form-ngsubmit

  • Highcharts Demo

    author(s): Øystein Moseng

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>

  • Map with curved lines

    Lines between points can be curved. To achieve this, you must specify <a href="http://docs.amcharts.com/3/javascriptmaps/LinesSettings#arc"><code>arc</code></a> property in your <a href="http://docs.amcharts.com/3/javascriptmaps/LinesSettings"><code>linesSettings</code></a> config. Allowed values are from -1 to 1. You can also specify <a href="http://docs.amcharts.com/3/javascriptmaps/MapLine#arc"><code>arc</code></a> for individual lines in case you need curve to be more or less intense.

  • examen

    examen

  • examen

    examen

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>

  • Simple Pie Chart

    Our pie chart uses intelligent way to arrange it's labels so that they would not overlap. You can try adding even more labels by pressing EDIT button and adding more items to the data provider - the labels will be arranged so that they wouldn't overlap. Of course, at some big number of labels they can start overlapping, but in most cases you don't have this number of slices in pie chart. <h2>Grouping of small slices</h2> Our pie chart can group small slices into the "Others" slice automatically. Try add <code>groupPercent: 5</code> to the charts config - you will see that the smallest slices are grouped into one now. This will also help to avoid overlapping labels, if you have really a lot of them.

  • Map with dynamic Pie charts

    Since any amCharts instance, bet it map or chart of any type, can be shown on the same page without any conflicts, we can use all of them to create a nice infographics. This demo shows, how we can place various Pie charts on a map. First of all, we're going to "disguise" pie charts as map images. A map image is any image that can be placed at specific latitude/longitude coordinate. A regular circle image would go into <code>images</code> array in <code>dataProvider</code> and would look something like this: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "type": "circle" } ]</pre> Since we're not aiming for simple circles, but would rather display a nice interactive pie chart, we're going to replace the <code>type</code> part with a proprietary <code>pie</code> block, which as you probably already guessed, will contain Pie chart's config: <pre>"images": [ { "title": "North America", "latitude": 39.563353, "longitude": -99.316406, "width": 150, "height": 150, "pie": { "type": "pie", "pullOutRadius": 0, "labelRadius": 0, "dataProvider": [ { "category": "Category #1", "value": 1200 }, { "category": "Category #2", "value": 500 }, { "category": "Category #3", "value": 765 } ], "labelText": "[[value]]%", "valueField": "value", "titleField": "category" } } ]</pre> Since JavaScript Maps does not support this kind of config out-of-the-box, we're going to use an event handler <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#positionChanged"><code>positionChanged</code></a> to: <ol> <li>Create custom HTML container for each image in <code>dataProvider</code>;</li> <li>Position those containers over the map, right where the map image would be;</li> <li>Use the Pie chart config container in image data to create an actual live chart;</li> <li>Update position of the chart containers when the map is zoomed or moved.</li> </ol>