====An Example====

This is the Javascript code for a bar-chart showing the **Pitch - Base** property of each asset across our longwall face.

<code javascript>
var xaxis = null;
var yaxis = null;
var svgbase = null;

//Create the page.
window.initPage = function () {
    reloadChart();    
}

//Load the data we need.
function reloadChart() {
    var propertyname = "Pitch - Base";
    var baseasset = "Roof Support #1";        

    ClearPage();

    //Build an AQL query for all of our points...
    var query = "'" + baseasset + "' ASSET 'Sequence' RELATIONSHIP 'downi' RELATED '" + propertyname + "' PROPERTY VALUES APPEND";

    //Load these points live.
    LoadLiveData(query);
}

//Draw our SVG file...
window.refreshContent = function () {    

    //These functions let the saving mechanism know what file type and name to use.
    SetPageName(propertyname + " Current Values");
    SetPageType("svg");

    //Build a list of the individual roof supports and their values.
    var points = [];
    for(var q=0;q<window.liveDataColumns.length-1;q++)
    {
        points.push({"v": window.liveData[window.liveDataColumns[q]],"x": q+1});
        supports.push(q+1);
    }    

    //Grab the SVG file
    var svg = d3.select(".focusimage");
    var svo = document.querySelector('#content');

    //Set up a margin and effective width / height
    var margin = {top: 10, right: 30, bottom: 30, left: 60};
    const width = canvasWidth - margin.left - margin.right;
    const height = canvasHeight - margin.top - margin.bottom;

    //No need to re-draw the axes if we are just updating - only do this if we've erased the image.
    var update = false;
    if (clearedDisplay == false) {
        update = true;
    }
    
    if (update == false)
    {
        //Clear and rebuild the SVG file
        svg.html('');

        //Create a group that we will draw inside
        svg = svg.attr("viewBox", "0 0 " + svo.offsetWidth + " " + svo.offsetHeight)
            .append("g")
                .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

        svgbase = svg;

        //Create the X axis.
        xaxis = d3.scaleBand()
            .domain(supports)
            .range([ 0, width ]);

        //Draw the X axis, flipping the titles
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xaxis))
            .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-90)");

        //Get the min and max values across the data
        var minvalue = d3.min(points, function(d) { return d.v; });
        var maxvalue = d3.max(points, function(d) { return d.v; });

        if (minvalue > 0) minvalue = 0;

        //Bump up the max value slightly to leave some room.
        maxvalue *= 1.08;

        // Add Y axis
        yaxis = d3.scaleLinear()
            .domain([minvalue, maxvalue])
            .range([ height, 0 ]);

        // Draw Y axis
        svg.append("g")
            .call(d3.axisLeft(yaxis));        
    }

    // Add the bars
    svgbase.selectAll(".bar")
        .data(points)
        .join(enter => enter.append("rect")
            .attr("class","bar tipped")
            .attr("x", function(d) { return xaxis(d.x); })
            .attr("y", function(d) { 
                if (d.v == null) return yaxis(0);
                if (d.v < 0) return yaxis(0);
                return yaxis(d.v); 
            })
            .attr("data-name", function(d) { return "Support " + d.x; })
            .attr("data-value", function(d) { return d.v.toFixed(2); })
            .attr("width", xaxis.bandwidth())
            .attr("height", function(d) { 
                console.log(d.v);
                if (d.v == null) return 0;
                if (d.v >= 0) return yaxis(0) - yaxis(d.v);
                return yaxis(d.v) - yaxis(0);
            })
            .attr("fill", function(d) {
                return ValueToColour(propertyname,d.v);
            }),
            update => update.attr("data-value", function(d) { return d.v.toFixed(2); })
                .transition().ease(d3.easeLinear).duration(1100).attr("y", function(d) { 
                    if (d.v == null) return yaxis(0);
                    if (d.v < 0) return yaxis(0);
                    return yaxis(d.v); 
                })        
                .attr("height", function(d) { 
                    if (d.v == null) return 0;
                    if (d.v >= 0) return yaxis(0) - yaxis(d.v);
                    return yaxis(d.v) - yaxis(0);
                })
                .attr("fill", function(d) {
                    return ValueToColour(propertyname,d.v);
                }));

    //Attach tooltips to the bars if they're new.
    if (clearedDisplay == true)
    {
        svgbase.selectAll('.bar').on('mouseover',function (ev) {
            ShowTooltip(ev);
        });
        svgbase.selectAll('.bar').on('mousemove',function (ev) {
            ShowTooltip(ev);
        });
        svgbase.selectAll('.bar').on('mouseout',function (ev) {
            HideTooltip(ev);
        });
    }
};

//Take the 'data-name' and 'data-value' properties and display them in tooltips.
window.toolTipUpdate = function (ob) {
    return ob.getAttribute("data-name") + ": " + ob.getAttribute("data-value");
};

</code>