Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION

STATIC TO DYNAMIC CONVERSION

Viewing 5 posts - 1 through 5 (of 5 total)
  • July 25, 2018 at 4:10 pm #21965

    Hemel619619

    HELLO EVERYONE, HOW IS IT GOING? Hope everyone doing alright.

    I am a trainee web developer. My boss told me first to create a project about monitoring movement category of unique IMEI device on a particular spot on a particlar time slot. I made it with static data. Boss was happy to see that. After that he told me to create a live project when json data will be shown…that means dynamic chart. I have tried but i failed to do that. For your convenience let me post the whole coding here so that you can edit & repost here. It will be great great help. :)

    CODING:

    <!DOCTYPE html>
    <html>
    <head>
    <title>YOO YOO</title>
    <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
    <meta charset=”utf-8″>
    <style type=”text/css”>
    html,
    body{
    height: 100%;
    }
    #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
    }
    </style>
    </head>
    <body>
    <script src=”https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry”></script&gt;

    <div id=”info”></div>
    <div id=”map-canvas”></div>

    <script>

    function init() {
    var mapDiv = document.getElementById(‘map-canvas’);
    var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(23.777176, 90.399452),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);
    google.maps.event.addListener(distanceWidget, ‘distance_changed’, function () {
    displayInfo(distanceWidget);
    });

    google.maps.event.addListener(distanceWidget, ‘position_changed’, function () {
    displayInfo(distanceWidget);
    });
    }

    google.maps.event.addDomListener(window, ‘load’, init);

    /**
    * A distance widget that will display a circle that can be resized and will
    * provide the radius in km.
    *
    * @param {google.maps.Map} map The map on which to attach the distance widget.
    *
    * @constructor
    */
    function DistanceWidget(map) {
    this.set(‘map’, map);
    this.set(‘position’, map.getCenter());

    var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
    path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
    scale: 3
    },
    draggable: true,
    map: map

    });
    // Bind the marker map property to the DistanceWidget map property
    marker.bindTo(‘map’, this);

    // Bind the marker position property to the DistanceWidget position
    // property
    marker.bindTo(‘position’, this);

    // Create a new radius widget
    var radiusWidget = new RadiusWidget();

    // Bind the radiusWidget map to the DistanceWidget map
    radiusWidget.bindTo(‘map’, this);

    // Bind the radiusWidget center to the DistanceWidget position
    radiusWidget.bindTo(‘center’, this, ‘position’);

    // Bind to the radiusWidgets’ distance property
    this.bindTo(‘distance’, radiusWidget);

    // Bind to the radiusWidgets’ bounds property
    this.bindTo(‘bounds’, radiusWidget);
    }
    DistanceWidget.prototype = new google.maps.MVCObject();

    /**
    * A radius widget that add a circle to a map and centers on a marker.
    *
    * @constructor
    */
    function RadiusWidget() {
    var circle = new google.maps.Circle({
    strokeWeight: 2
    });

    // Set the distance property value, default to 50km.
    this.set(‘distance’, 40);

    // Bind the RadiusWidget bounds property to the circle bounds property.
    this.bindTo(‘bounds’, circle);

    // Bind the circle center to the RadiusWidget center property
    circle.bindTo(‘center’, this);

    // Bind the circle map to the RadiusWidget map
    circle.bindTo(‘map’, this);

    // Bind the circle radius property to the RadiusWidget radius property
    circle.bindTo(‘radius’, this);

    this.addSizer_();
    }
    RadiusWidget.prototype = new google.maps.MVCObject();

    /**
    * Update the radius when the distance has changed.
    */
    RadiusWidget.prototype.distance_changed = function () {
    this.set(‘radius’, this.get(‘distance’) * 1000);
    };
    /**
    * Add the sizer marker to the map.
    *
    * @private
    */
    RadiusWidget.prototype.addSizer_ = function () {
    var sizer = new google.maps.Marker({
    draggable: true,
    icon: {
    url: “https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png&#8221;,
    size: new google.maps.Size(10, 10),
    anchor: new google.maps.Point(4, 4)
    },
    title: ‘Drag me anywhere!’
    });

    sizer.bindTo(‘map’, this);
    sizer.bindTo(‘position’, this, ‘sizer_position’);

    var me = this;
    google.maps.event.addListener(sizer, ‘drag’, function () {
    // Set the circle distance (radius)
    me.setDistance();
    });
    };

    /**
    * Update the center of the circle and position the sizer back on the line.
    *
    * Position is bound to the DistanceWidget so this is expected to change when
    * the position of the distance widget is changed.
    */
    RadiusWidget.prototype.center_changed = function () {
    var bounds = this.get(‘bounds’);

    // Bounds might not always be set so check that it exists first.
    if (bounds) {
    var lng = bounds.getNorthEast().lng();

    // Put the sizer at center, right on the circle.
    var position = new google.maps.LatLng(this.get(‘center’).lat(), lng);
    this.set(‘sizer_position’, position);
    }
    };

    /**
    * Calculates the distance between two latlng locations in km.
    * @see http://www.movable-type.co.uk/scripts/latlong.html
    *
    * @param {google.maps.LatLng} p1 The first lat lng point.
    * @param {google.maps.LatLng} p2 The second lat lng point.
    * @return {number} The distance between the two points in km.
    * @private
    */
    RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
    if (!p1 || !p2) {
    return 0;
    }

    var R = 6371; // Radius of the Earth in km
    var dLat = (p2.lat() – p1.lat()) * Math.PI / 180;
    var dLon = (p2.lng() – p1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 – a));
    var d = R * c;
    return d;
    };

    /**
    * Set the distance of the circle based on the position of the sizer.
    */
    RadiusWidget.prototype.setDistance = function () {
    // As the sizer is being dragged, its position changes. Because the
    // RadiusWidget’s sizer_position is bound to the sizer’s position, it will
    // change as well.
    var pos = this.get(‘sizer_position’);
    var center = this.get(‘center’);
    var distance = this.distanceBetweenPoints_(center, pos);

    // Set the distance property for any objects that are bound to it
    this.set(‘distance’, distance);
    };

    function displayInfo(widget) {
    var info = document.getElementById(‘info’);
    info.innerHTML = ‘Position: ‘ + widget.get(‘position’).toUrlValue(3) + ‘, distance: ‘ + widget.get(‘distance’).toFixed(3);
    }
    </script>

    </body>
    </html>

    July 25, 2018 at 4:53 pm #21968

    sonerb

    There is nothing about “canvasjs”.

    July 25, 2018 at 8:59 pm #21973

    Hemel619619

    Sorry. What do you mean by that, sonerb?

    July 26, 2018 at 9:52 am #21979

    Vishwas R

    @hemel619619,

    Please take a look at tutorial on Live Updating Charts from JSON API & AJAX.

    If you are still facing issue, kindly create jsfiddle with the issue you are facing and share it with us along with sample JSON so that we can look into your code, understand it better and help you out.

    —
    Vishwas R
    Team CanvasJS

    July 26, 2018 at 11:12 am #21983

    Hemel619619

    OK I AM CREATING JSFIDDLE with the issue i am facing. I will provide some JSON data as well. actually my boss wants me to collect unique IMEI from that particular spot & present it into the table.

    It will be highly highly appreciated if you could try a little bit for me.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.