ckylec4's public fiddles
-
Custom HTML Elements as Map Markers
This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <strong><div></strong> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <strong>top</strong> and <strong>left</strong> style properties. The code uses JavaScript Maps' built-in API functions <strong>longitudeToX()</strong> and <strong>latitudeToY()</strong> to translate marker's longitude and latitude into screen coordinates.
-
Custom HTML Elements as Map Markers
This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <strong><div></strong> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <strong>top</strong> and <strong>left</strong> style properties. The code uses JavaScript Maps' built-in API functions <strong>longitudeToX()</strong> and <strong>latitudeToY()</strong> to translate marker's longitude and latitude into screen coordinates.
-
Custom HTML Elements as Map Markers
This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <strong><div></strong> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <strong>top</strong> and <strong>left</strong> style properties. The code uses JavaScript Maps' built-in API functions <strong>longitudeToX()</strong> and <strong>latitudeToY()</strong> to translate marker's longitude and latitude into screen coordinates.
-
Custom HTML Elements as Map Markers
This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <strong><div></strong> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <strong>top</strong> and <strong>left</strong> style properties. The code uses JavaScript Maps' built-in API functions <strong>longitudeToX()</strong> and <strong>latitudeToY()</strong> to translate marker's longitude and latitude into screen coordinates.
-
Simple Column Chart
If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.