chartjs / chart.js Goto Github PK

Can you show an example of how to set the segment stroke to 0 with the options? I see the segment stroke option listed below, but not sure how to tie this

var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(data);

segmentShowStroke : false

calculateScale() repeatedly uses calculateOrderOfMagnitude() to calculate the decimal logarithm of, for example, the span between the minimum and maximum scale values.

calculateOrderOfMagnitude() has a problem in that it rounds towards zero (it calls Math.floor() on the result). This has the effect of making the scale range smaller than what is needed to draw all data points without clipping. You might want to change this to Math.ceil() instead, which will always yield values that are a bit larger, and thus should cover everything.

Some more changes for robustness may be helpful: make sure that what you pass to calculateOrderOfMagnitude() is never zero or negative (Math.log(0) returns -Infinity, Math.log(-1) returns NaN, etc.), and split the loop which adapts the number of scale steps according to the minimum/maximum number of steps so that each part of the loop either only scales up or down, but not both (if the parameters are slightly wrong, you might end up with an infinite loop).

I have a line graph that I need the Y-axis labels to be displayed as integers than floats, as my data has no floats added to it, you should enable an option to set display as floats or integers.

Demo (from what I mean): http://jsfiddle.net/SNLAw/

From the Line Chart documentation,

"The line chart requires an array of labels for each of the data points. This is show on the X axis."

I would like to be able to add a large set of data points to a line chart, but not have a label for each data point. For instance, showing the months of the year on the x axis but having several data points between January and February. I know the project is young, but would you agree this is a good direction to go? I feel the x axis labels and data set should be decoupled.

Is there current support for tooltips when hover over points? or planned support for this.

Thank you!

I poked around and hoped I would find some the docs in your repo, or a separate repo for the docs, but I could not find them. Are they not open source as well?

The reason I asked is because I wanted to fix a typo on http://www.chartjs.org/docs/ under Doughnut Charts:

"They are aso excellent..."

Sorry to submit a typo this way, I really wish I could have issued a pull request.

Awesome lib, thanks for coding! Any chance for a stacked bar chart?

It would be great if it would be possible to set also default values in chart.js for values like pointStrokeColor and all the other color values or even all available options.

Thanks for Awesome library. Can you place all your sample html into examples folder.
I could not find site index.html. Can you place it in the repo.

I did not find any hint on how to include a legend in the documentation.

Is this supported? Charts look good, but a legend is needed to let reader know about the data series he is looking at...

Is it planned to support an array for a data value?

For example:
data : [[1,28],[2,48],[4,40],[6,19]]

So that the value '28' will be plottet on position '1', the value '48' will be plottet on position '2' and so on...

This would also allow to leave out some values when plotting 2 graphs with missing values on their datasets...

Add a way to use multiple datasets with an own yaxis for each dataset.

When adding two lines to one chart there is always the issue that there are a few missing data values in each line.
i.e.
Jan Feb Mar Apr
Line 1 has values for Jan, Feb and Apr
Line 2 has values for Feb, Mar

At the moment there HAS to be a value for any label.

Please add the possibility to add a "null" value which causes the line connecting from the value before to the value after without plotting a value for the "null" part.

Screenshot attached.

When I use a line graph with:

var lineChartOptions = {
   scaleOverride   : true,
   scaleSteps      : 10,
   scaleStepWidth  : 20,
   scaleStartValue : 0
}

The "0" is placed where "20" should go, and the "20" is placed where the "40" should go.... on up to 180. The scale should be from 0 (at the lower-left corner) up to 200. And, of course, the scale labels don't line up with the graphs of the data. For example, a dataset looking like:

data : [ 100, 100, 100, ... ]

will line up with label "80"

Make it easier to identify new versions by adding a version comment in the source or use the github version tag system.

Instead of declaring all of the generic variables and functions on every instantiation of Chart - wrap everything in an IIFE that returns the constructor and move the variables/functions outside the contructor. I tried this in a fork: https://github.com/rasmusfl0e/Chart.js/blob/master/Chart.js

Also: consider having Pie et al inherit from Chart so they automatically get context/width/height etc without having to pass them around.

I guess you meant "object oriented" over "object orientated"

Nick,

Many thanks for building Chart.js! (and with nice documentation? Oh my, you've spoiled your users already)

Just wondering if you had decided upon an open source license for your code, perhaps BSD or MIT like jQuery/Mootools/etc?

Take care,
Steve

The example code at the documentation pages don't seem to respect the line breaking.
I've found it with IE10 on windows 7. It works fine with Chrome.

I'm attending some introduction level MOOCs so please bear with me :)

Is changing major axis to be vertical a sort of "trivial" change?

Now, i have set width and height to the canvas element. But height and width of chart should be changed based on the Device.

I tried with bootstrap span element, it does not work. Any clues?

hi, awesome library, thank you very much for it.

i have problem specially with Unicode Characters Like Arabic, sometimes labels words are to long, is there a way to tilt them ?

thanks in advanced.

In the first example in the docs

//Get the context of the canvas element we want to select
var ctx = document.getElementbyId("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

Should in fact be

//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

Note the capital B.

This caused me(a non-js user) to flounder around for 20 minutes looking for what the problem was. Sorry if I'm submitting this in the wrong place.

I often have to display yearly/monthly statistics, which dont start/stop at the first/last element, because the data begins/ends in the middle of a month. The line chart allows to define less data elements then labels, and cuts the line with the last element. This is fine if the end of the dataset is missing. To begin in the middle of a graph the following change is neccessary. With this change you simply set not existing elements at the beginning of the data to null or undefined.

    function drawLines(animPc){
      var j;
      var start;

      for (var i=0; i<data.datasets.length; i++){
    ctx.strokeStyle = data.datasets[i].strokeColor;
    ctx.lineWidth = config.datasetStrokeWidth;
    ctx.beginPath();

    for (j=0; j<data.datasets[i].data.length && (typeof(data.datasets[i].data[j]) == 'null' || typeof(data.datasets[i].data[j]) == 'undefined'); j++);
    start = j;
    ctx.moveTo(xPos(j), xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[j],calculatedScale,scaleHop)))

    for (; j<data.datasets[i].data.length; j++){
      if (config.bezierCurve){
        if (j > 0 && typeof(data.datasets[i].data[j-1]) != 'null' && typeof(data.datasets[i].data[j-1]) != 'undefined')
          ctx.bezierCurveTo(xPos(j-0.5),yPos(i,j-1),xPos(j-0.5),yPos(i,j),xPos(j),yPos(i,j));
      }
      else{
        ctx.lineTo(xPos(j),yPos(i,j));
      }
    }
    ctx.stroke();
    if (config.datasetFill){
      ctx.lineTo(xPos(start) + (valueHop*(data.datasets[i].data.length-1-start)),xAxisPosY);
      ctx.lineTo(xPos(start),xAxisPosY);
      ctx.closePath();
      ctx.fillStyle = data.datasets[i].fillColor;
      ctx.fill();
    }
    else{
      ctx.closePath();
    }
    if(config.pointDot){
      ctx.fillStyle = data.datasets[i].pointColor;
      ctx.strokeStyle = data.datasets[i].pointStrokeColor;
      ctx.lineWidth = config.pointDotStrokeWidth;
      for (var k=0; k<data.datasets[i].data.length; k++){
        ctx.beginPath();
        ctx.arc(yAxisPosX + (valueHop *k),xAxisPosY - animPc*(calculateOffset(data.datasets[i].data[k],calculatedScale,scaleHop)),config.pointDotRadius,0,Math.PI*2,true);
        ctx.fill();
        ctx.stroke();
      }
    }
      }

      function yPos(dataSet,iteration){
    return xAxisPosY - animPc*(calculateOffset(data.datasets[dataSet].data[iteration],calculatedScale,scaleHop));   
      }
      function xPos(iteration){
    return yAxisPosX + (valueHop * iteration);
      }
    }

Hi,
it would be realy nice if we could display the max value shown in the graph above the top of a bar f.e. or a dot displayed in the line graph

Graph doesn't work for values larger than 1M.

Is there a way to fix this?

Thank you

I was creating a dashboard and I love the visual style Chart.js allows you to create. But I notices that the doughnut chart looks a little out of place.

Is there an easy way to you can add a border to each of the chart segments individuality, as you can with the bar, line, & radar charts? That way they can have a solid segment border and a transparent file to match. If I need more about JS I would whip up a pull request myself.

I have attached an image for reference.

At least in the Radar chart, the first dataset is shifted by 1 relatively to the labels. The second dataset is correctly aligned.
Each additional dataset shifts an additional -1.
I'm using Chrome, but the figures in the documentation also don't fit to the data from the documentation, so the issue is not only with me.
Just check the Radar plot in the documentation:
Data from the first dataset:
"Eating" = 65,
"Drinking" = 59
but the graph shows:
"Eating" = 40
"Drinking" = 65

The documentation gives this example code:

//Get the context of the canvas element we want to select
var ctx = document.getElementbyID("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

Here getElementbyID should of course be getElementById.

Hi,

First of all this is an absolutely beautiful charting library. Thank you!
I just wanted to let you know about an issue I encountered trying the library.
When the canvas width is less than or equal to the data length the drawing fails and all the points get drawn at the first point. It would be good if you could put some error message in the console in this case as the canvas length is smaller than the number of data points. But this issue also persists when the canvas length is exactly same as the data length. I had to add few extra pixels to get it to work.
Again thank you for this library.

Regards,
Madu

It wouldn't hurt to have the license file in the root. Just to make sure everyone has it.

Hi,

Any plans on making them interactive. Right now, you don't have tooltips etc for mouse pointers yeah ?

Regards,
/Nuwan

I just want to try this new library but i can't...

http://grab.by/l5NE

http://grab.by/l5Oo

I have the error "Uncaught TypeError: Cannot read property 'length' of undefined "

Bar chart axis should always include a 0.

Bars must begin at zero because of the way we read them. We compare their heights (vertical bars) or lengths (horizontal bars), which only represent the differences in values accurately when they begin at zero. For example if the scale begins at 50, a bar that represents a value of 70 would be twice as high or long as a bar that represents a value of 60, resulting in an inaccurate representation of the difference between them.

— Stephen Few

If there is a need to break this it should be set up as an option override.

Test: http://jsfiddle.net/QwCKB/

Let´s say my line graph starts at point value of 20. When I use the normal scale, it starts at 20. However, if I were to use a custom scale, the graph will start at a diminished value, such as 10.

please add a component.json file and all the entries, then add this awesome project to bower.js

First of all, thanks for this new clean & lightweight charting library ;)

I'm already using it and I think I found an issue with the pixel alignment of the axis and grid:

Even if the grid line width is set to one 1, the lines are drawn between two pixels, resulting in a blurry, half transparent line.

So i've tried an ugly hack consisting of adding 0.5px to the origin coordinate here:
https://github.com/nnnick/Chart.js/blob/master/Chart.js#L965

yAxisPosX = width-widestXLabel/2-xAxisLength + 0.5;
xAxisPosY = scaleHeight + config.scaleFontSize/2 + 0.5;

The result is much better:

I don't know if this problem is the same for everyone or if it's only on my system (Ubuntu 12.04 & Chrome).

This is probably not the best way to fix this but I hope it helps. I would be happy to pull request if this bug is confirmed and I found a clean way to fix it.

Bar charts turn very strange when negative values exist in the data.

Test: http://jsfiddle.net/egMGx/

Would be great to illustrate how the data variable for any chart can be updated from another source vs. hard coding it, as shown in the examples - for example, can I use this with a text file with the values? or even pull data directly from an API source like google analytics? thx

See: http://jsfiddle.net/MVWWC/

I think this could be handled more gracefully, such as with an error message. As it is, the chart is wrong/misleading.

Would be great to add sparkline charts ... please see http://public.tableausoftware.com/static/images/no-vis-available.htm?static=bandlines/0-Intro.png&msg=1

I could not find a way to set labels for chart. For example, there is must be way to specify what is Y-Axis and X-asis.

In Pie and Doughnut Chart, what each section is meant for?

Is there any way to achieve this? or Am i missing anything in docs?

When the line grapher is fed arrays with more than 10 values, it starts extending the "max" value of the horizontal scale (and the gridlines) out further than any of the data or labels.

Try altering the line.html demo file to let you make any size of data:
PHP:

<?php
    $labels = array();
    $redline = array();

    // ///////////////////////////////////
    // Change the 11 to be larger and larger numbers to see the effect
    // ///////////////////////////////////
    for($i=0; $i < 11; $i++) {
        $labels[] = "";
        $redline[] = 200;
    }
?>
<script>
        var lineChartData = {
            labels : <?php print json_encode($labels); ?> ,
            datasets : [
                {
                    fillColor : "rgba(220,0,0,0.5)",
                    strokeColor : "rgba(220,220,220,0)",
                    data : <?php print json_encode($redline); ?>
                }
            ]

        }

        var lineChartOptions = {
            pointDot        : false,
            scaleOverlay    : true,
            scaleOverride   : true,
            scaleSteps      : 10,
            scaleStepWidth  : 50,
            scaleStartValue : 0
        }

        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, lineChartOptions);
</script>

When you start getting to some decent numbers, like 200 data points or so, it starts getting bad. Really bad.

Is there a way to have multiple axis at one side of a chart? If not, do you plan to have this option in a newer release?

Hi, first of all, congratulations, the API is becoming awesome (i first see it on hacker news 💃 )

Second, I think it would be great to add something on line charts, at least, that says what is de x and/or y values in some point.

It is just a suggestion, but I really found it very useful, even with all the problems related to personalization.

Thanks, and keep up the good work.
Cheers.

It should be possible to make a radar graph with only one dataset. Right now the graph is weird and fails to show the single dataset correctly. Workaround is to crreate a similar dataset containing just zeros but that leaves a datapoint in the center.

Could someone provide an example of how to change the defaults?
I am trying to remove the point dots on the line chart but am not having any luck.

Here's my code:
var lineChartData = {
labels : ["Year","Week","Current"],
datasets : [{
fillColor : "rgba(173,215,116,0.4)",
strokeColor : "#4a9c45",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointDot : false,
data : [3,2.5,currentPrice]
}]
}
var myLine = new Chart(document.getElementById("chart").getContext("2d")).Line(lineChartData);