dima117 / chart.scatter Goto Github PK

View Code? Open in Web Editor NEW

97.0 97.0 26.0 435 KB

Scatter chart plugin for Chart.js

Home Page: http://dima117.github.io/Chart.Scatter

License: MIT License

JavaScript 83.33% HTML 16.67%

chart.scatter's People

Contributors

Stargazers

Watchers

chart.scatter's Issues

this.hasData line 1062 reflects the initial data, breaks initial empty scenario

I might be missing something vital, however it seems like the this.hasData reflects the initial condition of the data.
So when the chart is initialized with empty arrays then nothing is plotted. addPoint does however not alter the state of hasData - so nothing will ever be rendered.

Am I right so far?

Bug only one point chart

Hi guys,

I have an issue with the Scatter chart when i have only one point in my data
it display nothing but a label like this : /2007, maybe a bug with the scale ?
here is a sample code to illustrate my problem

<!DOCTYPE html>
<html>
    <head>
        <script src="JS/vendor/jquery-1.11.3.min.js"></script>
        <script src="JS/Chart.Core.min.js"></script>
        <script src="JS/Chart.Scatter.js"></script>

    </head>
    <body>
        <div>
            <canvas id="MainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter" width="555" height="283" style="width: 555px; height: 283px;"></canvas>
        </div>
        <script>
            Chart.defaults.global.responsive = true;
            Chart.defaults.global.animation = false;



            //<![CDATA[

            Chart.defaults.global.responsive = true;
            //<![CDATA[
            var dataMainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter = [
            {label:"",fillColor: "#d2d2d2",strokeColor: "#d2d2d2",highlightFill: "#000",highlightStroke: "#000", data: [{x: new Date('2007-12-31T00:00:00'),y: 10053.7153826788}]}
            ];

            var optionMainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter = { 
            scaleLineColor : "black"
            ,scaleFontColor : "black"
            ,scaleShowGridLines : false
            ,tooltipFontColor : "#fff"
            ,tooltipCornerRadius : 0
            ,bezierCurve : false
            ,scaleShowHorizontalLines : true
            ,scaleDateTimeFormat : "dd/mm/yyyy"
            ,scaleDateFormat : "dd/mm/yyyy"
            ,scaleGridLineColor : "rgba(0,0,0,1)"
            ,scaleType : "date"
            ,scaleShowVerticalLines : true
            ,scaleLabel : "<%= value %> "
             };
            var myChart = new Chart(document.getElementById("MainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter").getContext("2d")).Scatter(dataMainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter, optionMainMasterContainer_FundMasterContainer_dedicatedFundScatterChart_ChartJsScatter);
            //]]>
        </script>
    </body>
</html>

customTooltips not working properly

When setting customTooltips like in Chart.js, an event is triggered only when a cursor hovers the dot. Please see this example:

customTooltips: function(tooltip) {
   if(!tooltip) {
      $('#tooltip').hide(); //code never executed
   }
   $('#tooltip').html(tooltip.text);
   $('#tooltip').show();
}

Thats why my custom tooltips allways remain visible...

Median Line?

Is it possible to add Median Line?

Showing legend

Hi, I'mtrying to add a legend to my chart. I did not find the description on project website, so I use the standard way to create legend in Chart.JS plot: I was added div to my page and set html to chart.generateLegend(). It works but instead of normal colored legend i get simple unmarked list with data labels as text. Nothing more.How do I get the correct legend?

Support for Angularjs?

Can you provide an example for how to use Chart.scatter with angularjs?

Line drawing issue

Hi,

I am using socket.io to push new points to the chart. When I call addpoint then update, the line is redrawn from the first point to the new point instead of from the last point to the new point.

Code is

    myTempChart.datasets[0].removePoint(0);
    myHumidityChart.datasets[0].removePoint(0);
    myTempChart.datasets[0].addPoint(date, temperature);
    myHumidityChart.datasets[0].addPoint(date, humidity);

    myTempChart.update();
   myHumidityChart.update();

I'm stumped on what the issue might be.

Strange jitter

Hi,

I found some strange jitter when my chart got a lot of data within it. Just like below image, it should like clear square-type chart, but when data value changed, it got jitters.

JSBin
Did i do something wrong with config? Thank you very much!

Mike

Setting up Chart.Scatter with proper files.

I'm a little confused on how to go about properly hooking everything up in order to get Chart.Scatter to work. Do I need to create a bundle file? I downloaded the master source zip file - do I only need to include the Chart.Scatter.js file? How does everything from that zip file get referenced? Sorry if these are trivial - I'm new to web development.

I've already added Chart.Scatter via npm to my project, but when I try to execute the .Scatter function, I get an error saying:

TypeError: (intermediate value).Scatter is not a function

I also get the error:

Uncaught TypeError: Cannot read property 'extend' of undefined'

in Chart.Scatter.js when I start up my webpage. Any ideas?

Programmatic Pan+Zoom

Is this kind of zoom/pan possible with this chart?

https://bl.ocks.org/mbostock/7ec977c95910dd026812

Support for scaleOverride, scaleSteps, scaleStepWidth, scaleStartValue from core

I tried using these options but nothing changed. So I thought maybe it's still not supported.

Time is always in UTC

Even if I set the option to false or modified the source code and changed the default configuration to false. Graph still shows UTC format.

Bug: graph data about scale (x and y values)

NPM support

It'd be great to be able to install this library as a npm module in addition to bower support.

Custom y-axis labels

Is there a possibility to have custom y-axis labels (like from an array)? I have a 6 line - line graph with date as the x axis, but my y axis is non-numerical, A,B,C,D,E,F (for example)

Thank you

Support for Bar Charts?

Is there a way to display points as bars?
Thanks,
Michele

TypeError: (intermediate value).Scatter is not a function

I grabbed Chart.Scatter.js with bower install, but I can't seem to get it working.
I keep getting the error: TypeError: (intermediate value).Scatter is not a function.

I wanted to use the date scale function.

Can anyone help me?

Format date in x axis

Hello @dima117.
The 'default' formart for one dateset I am working looks to be 'mmm d', but I would like to change the format to 'mm/yy'.
There is a way to change the format of a date in the x axis?
Thanks.

Increasing the width of canvas to more than 30000px hides the chart

I'm trying to re size the chart dynamically based on data array size.
So I'm re sizing the canvas width.
It works fine for smaller canvas widths, but when I increase the width beyond 30000px, the chart simply doesn't appear.
There is no error in console.
Is there any other way to re size the chart dynamically?

useUTC for datetime scales seems not to work with Safari

Hi,

useUTC=false for datetime scales seems not to work with Safari (Os X and IPhone)
Here a sample diagram:
https://gist.github.com/anonymous/16efe20dd5f69587af08
With Safari browser a time offset is shown.

Displaying the tooltip for multiple data at once.

I am wondering if there is a way to make the tooltip work like it does on the ChartJS Line type? Meaning that when you hover over a data point, it will use the multiTooltip to display the data for that x coordinate.

Is this possible at all?

xScaleOverride doesnt work

Hi DIma,

when setting the below configuration i expect to see only 5 steps (we can see it is working for y axis):
xScaleOverride: true,
// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded x scale
xScaleSteps:5,
//Number - The value jump in the hard coded x scale
xScaleStepWidth: 50,
// Number - The x scale starting value
xScaleStartValue: 0

please see example at - https://jsfiddle.net/ranstyr/75m29yhx/

BTW, do you support showXLabels (chartjs/Chart.js#521)?

Thanks,
Ran.

Date Scale X Axis not displaying properly on FireFox

My chart displays like this on FireFox,

there's no errors shown in the deverloper console.

But it displays correctly on Chrome

I am using the latest version of Chart.Scatter,

some code sample data generation/chart generation

var data_item = {
                    name: "data_item",
                    label: "Data Item",
                    strokeColor: color,
                    fillColor: color,
                    pointStrokeColor: color,
                    pointColor: "rgba(0,0,0,0)",
                    data: [{
                        r: 1,
                        x: new Date("03-03-16"),
                        y: 5,
                    }, {
                        r: 1,
                        x: new Date("03-07-16"),
                        y: 4,
                    }, {
                        r: 5,
                        x: new Date("03-08-16"),
                        y: 2,
                    }, {
                        r: 5,
                        x: new Date("03-12-16"),
                        y: 2,
                    }, {
                        r: 1,
                        x: new Date("03-20-16"),
                        y: 5,
                    }, ],
                }

var data_set = [data_item, data_item2, data_item3 ...]

var config = {
                scaleType: "date",
                responsive: true,
                animation: false,
                maintainAspectRatio: false,
                // pointDot : false,
                multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>",
                tooltipTemplate: "<%= datasetLabel %>: <%= value %>",
                scaleTimeFormat: " ",
            };
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Scatter(dataset, config);

Allow animation of chart using .update()

Calling myChart.update(); results in the following error:
TypeError: undefined is not a function (evaluating 'myChart.update()')
Does the scatter chart not work with the Chart.js API?

Hard-coded X Axis

Is it possible to hard-code an X-axis? I have a set of data from a year, but its sparse and not evenly distributed (for example, two datapoints from random days in Jan, five points in March, none in May, etc). Is it possible to hard-code the scale, so I have a nice Jan-Dec scale, despite not having data in that range.

Modify only newly drawn points on update.

Thanks for this library, I have found it helpful on a few occasions.

I have a question about a feature that I hope is present and I have just failed to find it.
The application I am building sends data over a websocket connection. It has a value and a timestamp. The desired endpoint is to have a live chart of the data coming in. Chart.Scatter does exactly what I need except on the animation front. When I add a new point and call update the whole graph transitions up from the bottom.

Is there a way to leave all existing points the same and only have transitions effect new points? so the graph will nicely squash up as more points will be coming in.
Slightly less favourable option but probably good enough, is there a way to turn transitions off so the graph just steps steps to the next view when myChart.update() is called?

How do you make the x and y scale equal

Great Library.
I would like to use this for some science examples but I need to find a way for the x scale to be equal to the y scale. Is there a way to do that?

Also in the documentation to be consistent with the examples
new Chart(ctx).Scatter(data, options);
should be changed to
var mychart=new Chart(ctx).Scatter(data, options);
So the other examples like
myChart.datasets[0].addPoint(5, 7);
will work.

Bezier curve tension

The regular line graph does support this with a value being i.e.

bezierCurveTension: 0.3

Support for this would be nice, if you want graphs to be less messy and more straight if the data is close to each other.

Example of short time difference generating curves:

documentation for xScaleOverride options

I was searching for a way to control x-axis labels on a date type scatter chart, and found the undocumented xScale options. However, I'm not sure what I'm expected to pass.

As an example, I'd like to only show a date label at every two weeks.

Test undefined data in range calculation

In function _calculateRange if the point value is not a number the range is undefined. So I have inserted the test of the value.

    _calculateRange: function () {

        var xmin = undefined,
            xmax = undefined,
            ymin = undefined,
            ymax = undefined;

        this._forEachPoint(function (point) {

            // min x
            if (!isNaN(point.arg) && (xmin === undefined || point.arg < xmin)) {
                xmin = point.arg;
            }

            // max x
            if (!isNaN(point.arg) && (xmax === undefined || point.arg > xmax)) {
                xmax = point.arg;
            }

            // min y
            if (!isNaN(point.value) && (ymin === undefined || point.value < ymin)) {
                ymin = point.value;
            }

            // max y
            if (!isNaN(point.value) && (ymax === undefined || point.value > ymax)) {
                ymax = point.value;
            }
        });

        return {
            xmin: xmin,
            xmax: xmax,
            ymin: ymin,
            ymax: ymax
        }

Compatible data structure to Chart.Line

I'd like to use Chart.Scatter with angular-chart.js but it doesn't work. I doesn't know the problem.

Невозможно задать дополнительные отступы для графика

Когда по оси задано кратное 10 значение, последняя точка идет без отступов.
http://joxi.ru/xAeJ55psBMGzry
Перечитал всю документацию, не нашел такой настройки.
Когда задано не кратное значение, то отступ добавляется автоматом.

Points color not updated on refresh

The color of points in the plot is not changed if update() is called. Here is an example to reproduce the issue: https://jsfiddle.net/rpdwmodc/1/. The script changes the color from orange to black after 3 seconds.
Changing strokeColor property works but not for pointColor.

LegendTemplate misplaced html tag close span before dataset

In Chart.Scatter.js line 201 the html tag </span> Is before <%=datasets[i].label. it should be after the dataset (but before the </li>)
Also in Chart.Scatter.min.js

Bug: scaleOverride floating point error

When incrementing with scaleStepWidth containing floating point numbers there is a rounding error that courses really long label values. This doesn't occur with the standard charts in chart.js, when using the same scaling. Made a hack fix by using Math.round in line 295.

labelsArray[index] = helpers.template(templateString, { value: (graphMin + Math.round((stepValue * (index)) * 100) / 100).toFixed(stepDecimalPlaces) });

Support Chart.js 2.x

Currently doesn't seem possible to use this with Chart.js 2.x given the version specified in package.json.

Chart.Scatter support for Polymer

Hi,

Polymer is a library to create custom HTML elements aka WebComponents. There was already a library to encapsulate Chart.js robdodson/chart-elements to create chart elements supported by Chart.js with minimal HTML. To draw a line chart you could declare it in your html with:

<chart-line data="{{data}}" options="{{options}}"></chart-line>

I have forked robdodson/chart-elements and updated it to Polymer 1.0 and added support for Chart.Scatter in the 1.0 branch.

Now you can create a scattered chart with

<chart-scatter data="{{data}}" options="{{options}}"></chart-scatter>

Please give it a try :)

Area fill for linear lines

Hi,

Had a look at the Scatter graph because of the time series support as per here. Works great. My lines are linear, and I'm wondering if Scatter supports the area fill, like the line graphs.

Add bower support

Ticks between steps

Can this chart have ticks between steps?

X axis with Date labels - limit on time covered by the axis?

The scatter chart is just what I have been looking for. I need to plot historical data dating back over a year (but only one data point per week). Initial tests worked fine, but I encountered something unexpected.

When plotting a chart with a Date/Time axis, as I increase the date range past a boundary, the chart simply doesn't display. It has worked fine with a small sample, so I increased the sample size until it stops displaying the chart. The boundary seems to be when the axis spans more than around 16 weeks. When I added day-by-day data, it broke after 113 days (16 weeks and 1 day).

FYI - I didn't have any problems plotting over 180 points over a couple of days (data every 15 minutes).

Browser: Chrome 42.0.2311.90

HTML code:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<script src="ChartJS_library.js"></script>-->
    <script src="ChartJS.Core.min.js"></script>
    <script src="ChartJS.Scatter.min.js"></script>
</head>
<body>
  Testing ChartJS plotter
  <br>Drawing Canvas
    <canvas id="header-canvas2" width="640" height="480"></canvas>
  <br>Adding script to populate the charts
    <script>
        var ctx2 = document.getElementById("header-canvas2").getContext("2d");
    var ChartData2 = [
    {
      data: [
         { x: new Date('2013-10-20'), y: 681.80 }
        ,{ x: new Date('2013-10-27'), y: 682.08 }
        ,{ x: new Date('2013-11-03'), y: 682.49 }
        ,{ x: new Date('2013-11-10'), y: 682.86 }
        ,{ x: new Date('2013-11-17'), y: 683.49 }
        ,{ x: new Date('2013-11-24'), y: 664.06 }
        ,{ x: new Date('2013-12-01'), y: 664.31 }
        ,{ x: new Date('2013-12-08'), y: 664.87 }
        ,{ x: new Date('2013-12-15'), y: 665.06 }
        ,{ x: new Date('2013-12-22'), y: 665.43 }
        ,{ x: new Date('2013-12-29'), y: 665.68 }
        ,{ x: new Date('2014-01-05'), y: 666.50 }
        ,{ x: new Date('2014-01-12'), y: 667.81 }
        ,{ x: new Date('2014-01-19'), y: 677.43 }
        ,{ x: new Date('2014-01-26'), y: 677.84 }
        ,{ x: new Date('2014-02-02'), y: 684.07 }
        ,{ x: new Date('2014-02-09'), y: 684.64 }
/* Including any of the data below causes the chart to remain blank
        ,{ x: new Date('2014-02-16'), y: 690.58 }
        ,{ x: new Date('2014-02-23'), y: 691.21 }
        ,{ x: new Date('2014-03-02'), y: 691.30 }
        ,{ x: new Date('2014-03-09'), y: 699.11 }
        ,{ x: new Date('2014-03-16'), y: 701.06 }
        ,{ x: new Date('2014-03-23'), y: 702.64 }
        ,{ x: new Date('2014-03-30'), y: 706.17 }
        ,{ x: new Date('2014-04-06'), y: 717.31 }
        ,{ x: new Date('2014-04-13'), y: 718.21 }
        ,{ x: new Date('2014-04-20'), y: 720.10 }
        ,{ x: new Date('2014-04-27'), y: 720.18 }
        ,{ x: new Date('2014-05-04'), y: 731.09 }
        ,{ x: new Date('2014-05-11'), y: 734.92 }
        ,{ x: new Date('2014-05-18'), y: 746.10 }
        ,{ x: new Date('2014-05-25'), y: 749.14 }
        ,{ x: new Date('2014-06-01'), y: 749.37 }
        ,{ x: new Date('2014-06-08'), y: 749.78 }
        ,{ x: new Date('2014-06-15'), y: 749.89 }
        ,{ x: new Date('2014-06-22'), y: 750.00 }
        ,{ x: new Date('2014-06-29'), y: 750.16 }
        ,{ x: new Date('2014-07-06'), y: 750.25 }
        ,{ x: new Date('2014-07-13'), y: 760.00 }
        ,{ x: new Date('2014-07-20'), y: 760.01 }
        ,{ x: new Date('2014-07-27'), y: 760.10 }
        ,{ x: new Date('2014-08-03'), y: 760.15 }
        ,{ x: new Date('2014-08-10'), y: 766.05 }
        ,{ x: new Date('2014-08-17'), y: 766.19 }
        ,{ x: new Date('2014-08-24'), y: 766.31 }
        ,{ x: new Date('2014-08-31'), y: 769.44 }
        ,{ x: new Date('2014-09-07'), y: 779.02 }
        ,{ x: new Date('2014-09-14'), y: 787.34 }
        ,{ x: new Date('2014-09-21'), y: 790.15 }
        ,{ x: new Date('2014-09-28'), y: 790.16 }
        ,{ x: new Date('2014-10-05'), y: 790.29 }
        ,{ x: new Date('2014-10-12'), y: 790.35 }
        ,{ x: new Date('2014-10-19'), y: 790.98 }
        ,{ x: new Date('2014-10-26'), y: 791.04 }
        ,{ x: new Date('2014-11-02'), y: 791.36 }
        ,{ x: new Date('2014-11-09'), y: 803.86 }
        ,{ x: new Date('2014-11-16'), y: 804.42 }
        ,{ x: new Date('2014-11-23'), y: 804.54 }
        ,{ x: new Date('2014-11-30'), y: 823.62 }
        ,{ x: new Date('2014-12-07'), y: 855.37 }
        ,{ x: new Date('2014-12-14'), y: 855.51 }
        ,{ x: new Date('2014-12-21'), y: 863.94 }
        ,{ x: new Date('2014-12-28'), y: 864.01 }
        ,{ x: new Date('2015-01-04'), y: 864.01 }
        ,{ x: new Date('2015-01-11'), y: 874.45 }
        ,{ x: new Date('2015-01-18'), y: 874.45 }
        ,{ x: new Date('2015-01-25'), y: 874.51 }
        ,{ x: new Date('2015-02-01'), y: 874.52 }
        ,{ x: new Date('2015-02-08'), y: 874.65 }
        ,{ x: new Date('2015-02-15'), y: 874.65 }
        ,{ x: new Date('2015-02-22'), y: 874.79 }
        ,{ x: new Date('2015-03-01'), y: 875.11 }
        ,{ x: new Date('2015-03-08'), y: 887.06 }
        ,{ x: new Date('2015-03-15'), y: 905.06 }
        ,{ x: new Date('2015-03-22'), y: 905.12 }
        ,{ x: new Date('2015-03-29'), y: 905.12 }
        ,{ x: new Date('2015-04-05'), y: 905.12 }
        ,{ x: new Date('2015-04-12'), y: 905.12 }
        ,{ x: new Date('2015-04-19'), y: 908.56 }
*/
      ]
    }
  ];
        new Chart(ctx2).Scatter( ChartData2,
      {
        showScale: true,
        scaleShowLabels: true,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: true,
        scaleLineWidth: 1,
        scaleLineColor: "red",
        scaleGridLineColor: "#999",
        scaleLabel: "<%=value%> Mb",
        scaleArgLabel: "<%=value%>mmm",
        scaleGridLineWidth: 1,
        scaleType: "date",
        bezierCurve: false,
        animation: false,
        pointDot: true
      }
    );
    </script>
  <br>Script complete
</body>
</html>

dima117 / chart.scatter Goto Github PK

chart.scatter's People

Contributors

Stargazers

Watchers

Forkers

chart.scatter's Issues

Recommend Projects

Recommend Topics

Recommend Org