Git Product home page Git Product logo

highcharts_trendline's Introduction

Highcharts Trendline Example

This project illustrates how you can easily add a trendline to your Highchart charts.

Note: If you are looking for a more complete implementation, checkout the highcharts-regression plugin.

Usage

Include the regression.js script into your HTML page.

Given your source data array, supply a function which calls fitData(<source>).data to produce the regression data for the trendline.

E.g.

// E.g. source data
var sourceData = [
    [106.4, 271.8], [129.2, 213.4],
    [295.6, 432.3], [154.4, 398.1],
    [129.9, 133.2], [271.5, 432.1],
    [144.0, 134.7], [176.0, 399.2],
    [216.4, 319.2], [194.1, 542.1],
    [435.6, 665.3], [348.5, 435.9]
];

var chart_linear = new Highcharts.Chart({
    chart: {
      renderTo: 'linear'
    },
    plotOptions: {
      series: {
        enableMouseTracking: false
      }
    },
    series: [{
      type: 'scatter',
      data: sourceData
    },
    {
      type: 'line',
      marker: { enabled: false },
      /* function returns data for trend-line */
      data: (function() {
        return fitData(sourceData).data;
      })()
    }]
});

Examples

Checkout the demo HTML files for examples of how to plot various trendlines.

Credits

The code for the regression.js script was extracted from jqplot.trendline.js, by Chris Leonello.

highcharts_trendline's People

Contributors

joyarzun avatar modsushi avatar vigneshwaran-raveendran avatar virtualstaticvoid avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

highcharts_trendline's Issues

How can used this plugin with a line chart?

If the chart code is as follows:

chart3 = new Highcharts.Chart({
chart: {
renderTo: 'chartdiv'
},
title: {
text: 'Test Chart'
},
xAxis: {
categories: ['9 Aug', '10 Aug', '11 Aug', '12 Aug', '13 Aug', '14 Aug','15 Aug']
},
yAxis: {
title: {
min:10,
text: null
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Series 1',
type: 'line',
data: [98,115,117,104,117,102,105]
}]
});

How do you the insert the trend line? I tried a few things and none of them worked. ANy help would be appreciated.

Rechtschreibfehler

"Dieser Ausweismedien sind dem Kunden zugeordnet:" - da ist ein r zuviel

" Deakvtieren eines Gerätes führt zu unwiderruflichem Verlust der Kraft / Servo Einstellungen" -> " Deakvtieren eines Gerätes führt zu unwiderruflichem Verlust der Kraft-/Servo-Einstellungen"

How can I use with a dynamic series?

Hi, In my case, I use dynamic data for my series. How should I configure then?

Exemple:

            var series = {
                type: 'line',
                id: 'series',
                name: 'New Customers',
                color: 'red',
                data: []
            }

            $.each(result, function(i, item) {
                series.data.push([
                    'day ' + item.date,
                    item.total
                ]);

            });
            chart.addSeries(series);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.