logo
Tags down

shadow

How can I draw a line to the highest datapoint in chart js?


By : user2174249
Date : October 18 2020, 08:10 PM
may help you . After some struggle I've answered the question. It was a lot more simple than I made the problem out to be. It turns out I just needed to calculate the ratio between the datapoints and the graph in pixels, and then implement a line at that point.
I've put this into a plugin with the API:
code :
/// default values
lineHeightAnnotation: {
  // defaults to have line to the highest data point on every tick
  always: true,
  // optionally, only have line draw to the highest datapoint nearest the user's hover position
  hover: false,
  // colors of the line
  color: '#000',
  // name of yAxis
  yAxis: 'y-axis-0',
  // weight of the line
  lineWeight: 1.5,
   /// sets shadow for ALL lines on the canvas
  shadow: {
    // color of the shadow
    color: 'rgba(0,0,0,0.35)',
    // blur of the shadow
    blur: 10,
    /// shadow offset
    offset: {
      // x offset
      x: 0,
      // y offset
      y: 3
    }
  },
  // dash defaults at [10, 10]
  noDash: true,
}
/**
 * Vars
 * maxY - the tallest data point on the graph
 * tickMax - the tallest tick on the y axis
 * bottomY - the lowest point of the graph
 * additionalOffsets = dataset.borderWidth * 2
 * 
 *                               bottomY * maxY      
 * highestDataY =   bottomY -  -------------------   + additionOffsets
 *                                   tickMax
 */
   afterDatasetDraw: (chart) => {
      // draw a dashed line when someone hovers over a data point
      if (chart.tooltip._active && chart.tooltip._active.length) {
        const activePoint = chart.tooltip._active[0];
        const ctx = chart.ctx;

        const x = activePoint.tooltipPosition().x;
        const yAxis = chart.scales['y-axis-0'];

        const tickMax = yAxis.ticksAsNumbers[0] // first index is always the tallest
        const tickLow = yAxis.ticksAsNumbers[yAxis.ticksAsNumbers.length - 1]
        const topY = yAxis.top; // clientRect.top + chart.padding.y
        const bottomY = yAxis.bottom; // clientRect.bottom

        let maxY = 1;
        let borderWidth = 0;
        const datasets = chart.config.data.datasets
        datasets.forEach((set, i) => {
          // get maximum Y value
          // get borderWidth of that dataset
          let point = set.data[activePoint._index].y
          if(point > maxY) {
            maxY = parseInt(point, 10) - parseInt(set.borderWidth, 10)
            borderWidth = parseInt(set.borderWidth, 10)
          }
        });

        let yBRatio = bottomY * (maxY - tickLow)
        let tMRatio = yBRatio / (tickMax - tickLow)
        let highestDataY = bottomY - tMRatio + (borderWidth * 2)

        // draw line
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([10, 10]);
        ctx.moveTo(x, highestDataY);
        ctx.lineTo(x, bottomY);
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = '#000';
        ctx.stroke();
        ctx.restore();
      }


Share : facebook icon twitter icon

nvd3.js : no mouseover datapoint effects in a line chart on updating the chart


By : Matheus Rodrigues
Date : March 29 2020, 07:55 AM
I hope this helps you . The code you need is actually much simpler than what you have. You only need to create the chart object once and don't need to call nv.addGraph() either. I've updated the jsfiddle here; the relevant code is also below.
code :
var chart = nv.models.lineChart();

chart.xAxis
  .axisLabel('Time (ms)')
  .tickFormat(d3.format(',r'));

chart.yAxis
  .axisLabel('Voltage (v)')
  .tickFormat(d3.format('.02f'));

var drawGraph=function(start) {
  d3.select('#chart svg')
    .datum(data(start))
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);
}

drawGraph(n);

$("button").click(function(){
  n += 50;
  drawGraph(n);
});

nvd3.js : no mouseover datapoint effects in a line chart


By : IWC
Date : March 29 2020, 07:55 AM
it fixes the issue You might have to change the your JSON structure so either number becomes y and timePeriod becomes x , so its can be accessible by data that is been passed into the lineChart():
code :
chart = nv.models.lineChart().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    });
chart.xAxis.tickFormat(function(d) {
        return d3.time.format("%d-%m-%y")(new Date(d));
    });
data = [{
    "values" : [{
        "x" : 1025409600000,
        "y" : 0
    }, {
        "x" : 1028088000000,
        "y" : 0.09983341664682815
    }, {
        "x" : 1030766400000,
        "y" : 0.19866933079506122
    }, {
        "x" : 1033358400000,
        "y" : 0.29552020666133955
    }, {
        "x" : 1036040400000,
        "y" : 0.3894183423086505
    }],
    "key" : "Line 1",
    "color" : "#ff7f0e"
}, {
    "values" : [{
        "x" : 1025409600000,
        "y" : 0.5
    }, {
        "x" : 1028088000000,
        "y" : 0.4975020826390129
    }, {
        "x" : 1030766400000,
        "y" : 0.4900332889206208
    }, {
        "x" : 1033358400000,
        "y" : 0.477668244562803
    }, {
        "x" : 1036040400000,
        "y" : 0.46053049700144255
    }],
    "key" : "Line 2",
    "color" : "#2ca02c"
}]

How to plot different colour for negative datapoint in line chart c#


By : ronelm2000
Date : March 29 2020, 07:55 AM
like below fixes the issue I want to create line chart by datagridview I need red colour plot line for negative values and green for positive values. I write the code but I get only green colour for all data points. , You need to color each DataPoint individually:
code :
int index = Dchart.Series[0].Points.AddXY(row.Cells[0].Value,
                                          row.Cells[8].Value);
DataPoint newPoint = Dchart.Series[0].Points[index];
newPoint.Color = newPoint.YValues[0] < 0 ? Color.Red : Color.Green;

How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?


By : Eric_wide
Date : March 29 2020, 07:55 AM
this will help Using Highcharts ... I have a series of values that corresponds with a series of times. Sometimes, the data value is null on a specific time and no marker is placed on the chart, which is good, but the line gets interrupted and basically starts a new chart on the next value that is not null. , Enable the connectNulls option:
code :
series: [{
    data: [...],
    connectNulls: true
}]

How to add unrelated array to Datapoint labels in an iOS-charts line chart?


By : Sapucaia
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Your assumption is not right. In IValueFormatter, you can construct any string for the corresponding value. The reason you are seeing only value or timeOfDay is because you are constructing String with """ notation that adds multiple lines whereas the label used for entry point may not calculate its size correctly because of this. You should create the String as below and see what you have got
code :
class ChartsFormatterToDegrees: IValueFormatter {

     var timesOfDay = [String]()
     var values = [Double]()  

     init(values: [Double], time: [String]) {
         timesOfDay = time
         values = values
     }

     func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String {
          if let index = values.firstIndex(of: value) {
              return "\(Int(value))° \(timesOfDay[index])"
          }
          return "\(Int(value))°"
      }
}
Related Posts Related Posts :
  • Prevent textarea from automatically scrolling when I change cursor position
  • Headless browser in Azure functions JavaScript?
  • Javascript to "fix" all hrefs of class with regex
  • How do I pass a value to list-item
  • Using component in entry component?
  • Working with different timezones in Javascript
  • Does MobX Observables have anything to do with RxJS ones?
  • Google extension how to inject my script to active tab and link with pop-up button?
  • Removing duplicate keys from object array
  • One @click event with multiple toggles
  • How to add TextToSpeech.talk("hi') action to a button
  • Not able to render vanilla webcomponent imported as template
  • How can I remove Materialize's select dropdown when using select2?
  • react-loadable multiple resource loading not working
  • Making SharePoint Lookup field multi selection in code with PNP/SP
  • input equal to a string for one array, and get string from same position from another array - JavaScript
  • Proper Method for Storing JavaScript Instances in Nan::ObjectWrap C++ Class
  • jQuery Calculate remaining characters length for input
  • Highcharts transform JSON into data without losing informations
  • How can I validate my file input name using regex?
  • Moment js interval for a day in 12 hours format
  • What would be the implementation of the function in this scenario
  • How to get text next a input tag using document.querySelector?
  • What could be reason of the error 'Maximum call stack size exceeded' inside Ember Data?
  • Leaflet polyline precision loss on zoom out
  • Convert Javascript regex to Typescript regex
  • Textext.js - Remove all tags and clean textarea
  • Array splice with unexpected results
  • Having trouble with multiple active states in ReactJS
  • Error 500 for some Ajax requests on server
  • Event call at the end of HTTP call
  • wooommerce add to cart based on gravity form radio button
  • Angular 6: table with *ngIF generates one <td> more than i need
  • how to load an external script with react?
  • Getting current stored value from database in a form on Cascading dropdowns in edit mode C# MVC
  • Best Way to Pass Query Parameters to URL Using Axios in Vue?
  • Javascript - issues with regex expression
  • JqxCombo values not setting from ajax result - Vue.js
  • How to embed Google Custom Search in React App?
  • Compare objects recursively and put duplicate key values into array
  • How do I add TypeScript types to a JavaScript module without switching to TypeScript?
  • How to remove obsolete callback from set event listener?
  • JavaScript - Inflation/Escalation with Total over X years
  • Perform calculation in higher order component in reactJS
  • React doesn't update component after state changes
  • Javascript - Collect data from mongodb from multiple collections then merge into array
  • Session.cookies.get_dict() return an empty dictionary
  • Performing logical operation inside Higher Order Component on prop set
  • how to force the browser to run the javascript every time it called
  • REGEX get all content after a series of special characters
  • deduce amount issue, not the same value foreach execute
  • Regex to get individual function bodies from group of functions
  • Stop animation from executing if coming from an internal link
  • How to retrieve total of "else if"
  • Multiple JS slideshows on one page
  • Importing async functions in Javascript
  • How to handle state on array of checkboxes?
  • React Native - Redux ~ Props updating when not getting called
  • Fast way to add elements into an Uint8ClampedArray typed array
  • How to retrieve values from a checkbox group generated dinamically with jquery when page loads
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org