66219

how to programmatically make a line chart point active/highlighted

I'm using chart.js 2.0 beta2 and have several line charts on a page and a slider. I'd like to highlight the data point on each line chart that matches the slider position (they all have the same number of points). I can't figure out how to easily make a point active in the code. Thanks for any tips.

Answer1:

SOLUTION FOR 2.0 BETA

Extend the chart controller of your choice, and fire off a simulated click event to show the tooltip. Here is some code that works for 2.0 (here is a fiddle):

var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fill: false, backgroundColor: "rgba(220,220,220,0.2)", borderColor: "rgba(220,220,220,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(220,220,220,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(220,220,220,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, tension: 0.1, data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", fill: true, backgroundColor: "rgba(220,220,220,0.2)", borderColor: "rgba(220,220,220,1)", pointBorderColor: "rgba(220,220,220,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(220,220,220,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, data: [28, 48, 40, 19, 86, 27, 90] } ] }; var options = { responsive: false }; Chart.helpers.extend(Chart.controllers.line.prototype, { fireSliderEvent: function(point, canvas, boundingRect){ var mouseX = Math.round((boundingRect.left + point._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / this.chart.chart.currentDevicePixelRatio); var mouseY = Math.round((boundingRect.top + point._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / this.chart.chart.currentDevicePixelRatio); var oEvent = document.createEvent('MouseEvents'); oEvent.initMouseEvent('click', true, true, document.defaultView, 0, mouseX, mouseY, mouseX, mouseY, false, false, false, false, 0, canvas); canvas.dispatchEvent(oEvent); }, highlightPoints: function(point){ var canvas = this.chart.chart.canvas; var boundingRect = canvas.getBoundingClientRect(); var points = this.getDataset().metaData; this.fireSliderEvent(points[point], canvas, boundingRect); } }); var ctx = $("#canvas"); var myLine = new Chart(ctx, { type: 'line', data: data, options: options }); var highlight = function(dataset, point){ myLine.data.datasets[dataset].controller.highlightPoints(point); } $("#slider").slider({ max: myLine.data.datasets[0].data.length-1, slide: function( event, ui ) { highlight(0, ui.value); } });
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>

<div id="slider" style="width: 500px;"></div>
<canvas id="canvas" height="300" width="500"></canvas>

    

Answer2:

SOLUTION FOR 1.x

You should extend the chart type and add your own method to select the point. Here is some code that will show the tooltip for each point depending on slider position:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var lineChartData = {
    "datasets": [{
        "data": [
            "85",
            "87",
            "70",
            "80",
            "78",
            "69",
            "150",
            "93",
            "59",
            "88"],
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(220,220,220,0.5)",
            "pointColor": "rgba(220,220,220,1)",
            "strokeColor": "rgba(220,220,220,1)"
    }],
        "labels": [
        "2013-01-01",
        "2013-01-04",
        "2013-01-15",
        "2013-02-03",
        "2013-03-25",
        "2013-04-03",
        "2013-04-14",
        "2013-05-27",
        "2013-05-27",
        "2013-08-03"],
};

var options = {showTooltips: false};

Chart.types.Line.extend({
    name: "LineAlt",
    highlightPoints: function(datasetIndex, pointIndexArray){
        var activePoints = [];
        var points = this.datasets[datasetIndex].points;
        for(i in pointIndexArray){
        	if(points[pointIndexArray[i]]){
          	activePoints.push(points[pointIndexArray[i]]);
          }
        }
        this.showTooltip(activePoints);
    }
});

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).LineAlt(lineChartData, options);

var highlight = function(index){
	myLine.highlightPoints(0, [index]);
}

$("#slider").slider({
  max: lineChartData.datasets[0].data.length-1,
  slide: function( event, ui ) { highlight(ui.value); },
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="slider" style="width: 500px;"></div>
<canvas id="canvas" height="300" width="500"></canvas>    


Recommend

  • How to style this select element?
  • How to get both dynamic numericupdown and textbox values in c# windows forms
  • Drawing lines between the Icosahedron vertices without wireframe material and with some line width u
  • Display values in Pareto chart using Chart.js 2.0.2
  • Android: unable to click the bottom TextView after translate animation within a FrameLayout
  • This tag and its children can be replaced by one and a compound drawable: picture and text
  • How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on q
  • Open Collapse Tab in Hover in Bootstrap
  • How to make the text hidden in hover
  • How can I get the field number that contains a MAC address with sed or awk?
  • Removing line separation of widgets on Tkinter
  • How to align and tags side-by-side?
  • Page split is not working in jsPDF
  • Form inside Boostrap Modal does not reset
  • Wordpress Full Width Footer not working
  • Center text with background CSS “shape”
  • Overlay over image on hover
  • css3 jagged edge with transparent bg
  • how to programmatically make a line chart point active/highlighted
  • Grow :before content width from center
  • D3.js Focus + Context Overflow
  • List bullets not displaying correctly in Internet Explorer
  • Plotting multiple corrplots (R) in the same graph
  • CSS :focus Not Working in iOS
  • Convert DateTime Format c#
  • Changing div heights using CSS grid
  • mysql what is the right syntax for this conditional update statement
  • css background transition in opera goes through black
  • QT: set stylesheet for a QMenu object
  • How to parse labeled values of columns into a Pandas Dataframe (some column values are missing)?
  • Position absolute not working inside position fixed
  • date: illegal option — d, Find difference between two dates
  • How to transform Byte[](decoded as PNG or JPG) to Tensorflows Tensor
  • Stitching 2 images (OpenCV)
  • is it possible to insert a line break in this tooltip?
  • How to resolve this packager error on react native Android
  • Installing PHP 7 on digitalocean
  • Problems installing Yesod for Haskell
  • Mysterious problem with floating point in LISP - time axis generation
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)