I'm trying out a simplified version of the pie chart demo from Paths.js' website at http://andreaferretti.github.io/paths-js-demo/, to understand how it works when used with Ractive. I have most of it working locally, except for one error that I've not been able to resolve.
A working demo is at https://codepen.io/alexlibby/pen/xjvOvQ - I am trying to get the country names and population figures to display over the relevant segment in the pie chart. At the moment, it is showing an error in the browser console, and that country names / population figures are not shown:
Error: <text> attribute x: Expected length, "{pie.sector.centroid[0]}"
I've researched what I think could be the issue (in that the value being passed to the centroid attribute is incorrect), but I'm struggling to understand what it should be. I've checked on SO and can't find anyone with a similar issue.
I'm also using a more recent version of Ractive and the Path.js Pie plugins - is it possible that this could be causing an issue? I have used Browserify to assemble the Node dependencies into one file - my source code starts on around line 5 in the JS section, and finishes at line 26.
Could someone please help point me in the right direction?
You have to use mustaches instead of single braces: x={{pie.sector.centroid[0]}} y={{pie.sector.centroid[1]}}
Related
Currently i have following output
But i want this output as follows in which multiple line graphs in different Label. Also double legend and label names.
I tried many ways but didnt worked. Referred document from official website. Please help.
Thanks in advance.
Plugin used apache echarts js.
Change series.type to line and remove stack. Also maybe you need to place each series to own yAxis but it's hard to say without code.
I did a search and could not find an exact answer and I'm a bit of a newbie with ChartJS.
Right now I've got a chart that draws a vertical line on top of a line using an added plugin to ChartJS. My thought now is that I'm looking to make it so that the tooltip's value displays elsewhere not on the canvas. Pretty much I'm trying to recreate a Robinhood like experience.
I have the line and tracking already created. My only issue is that I want to have some text that displays the tooltip value and changes for each point. The red circle is what I'm looking to simulate for the tooltip. Instead of having it appear at the point, it should be fixed at a location and of course change values depending on the point.
I think I've read somewhere there is a method that can be used for ChartJS called getPointsAtEvent, but I'm not exactly sure how to properly use this, but if someone could help me, I'd be really grateful.
I got it to work out using customToolTips and using the tooltip.dataPoints.length. One issue I had when going through this though was that an error appears in the console when you go out of the canvas area, but doesn't stop anything from working.
I'm not exactly how to fix this one, but if anyone has encountered it, please let me know:
(http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
at ChartElement.customTooltips (dashboard:178)
at ChartElement.update (Chart.js:8660)
at ChartElement.handleEvent (Chart.js:8952)
at Chart.eventHandler (Chart.js:4679)
at listener (Chart.js:4609)
at HTMLCanvasElement.proxies.(anonymous)
I have a highcharts synchronization example working fine on JS Fiddle:
http://jsfiddle.net/profnimrod/5vcc6z40/18/
However, when I integrate this into a larger app I'm seeing something weird. When I do some debugging on the JS Fiddle version I see that in each point in the:
chart.series[0].points
array has the following fields:
However, when I view the same array in my larger app I see the following:
I am, as far as I can tell, utilizing the current (6.0.3) version of Highcharts in both cases. What's going on?
The difference in my chart options was that in my larger app I had the 'boost' option enabled. This is used to handle charts containing many 1000s of points. It seems that it uses a different 'point' class when in boost mode which explains the issue I observed above.
I am developing a angular2 application using highcharts, but i have a problem about showing a bar chart. I have applied their sample code of highcharts to my application. It works. But when i added extra series to the chart, the columns becomes unreasonably too thin. my result
I separately tried the sample code on JSfiddle with adding extra series to the code. It works however. ... workable example
I've recently faced a very similar issue and even posted a question about it.
The solution seems to be pretty easy - for me the problem was in outdated highcharts (5.0.8) and highcharts modules(exporting, boost, highcharts-more, heatmap) (v. 5.0.8), so if you cannot reproduce your local behavior in jsfiddle try setting particular version of highcharts libraries like I've done here.
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
However when I updated to highcharts 5.0.14 the problem disappeared.
Hope this helps!
UPDATE
The issue was with a boost.js module, in particular with seriesThreshold property was set to 10 by default (now it is 50). Please find a detailed answer with example here
If you don't mind scrollable high-chart then this issue can be resolved.
Instead of Highchart use HighStock library, it will provide additional "scrollbar" option which you can combine with X-axis max option to show the data properly.
Here is the Updated Link for same code
scrollbar:{
enabled:true
},
xAxis: {
max:0
// rest of the code}
This answer will be good help to go in details.
I have been working with 'googleVis' and R in order to produce a Line chart using Google charts APIs.
On Google API's tutorial I found that data conversion in Javascript is used to determine if the axes will be "continuous"(using Numeric Javascript type) and "discrete" (using String).
I believe with googleVis is the same, since datatypes are derived from R.
Problem is, in the following example (which I modified after taking it from the R demo function), the X axis values are equally spaced (hence, still discrete), despite they seem to be "Numeric"
library(googleVis)
df=data.frame(val1=c(10,13,100), val2=c(23,12,32))
Line <- gvisLineChart(df)
plot(Line)
Could someone please me help to understand this? Thank you very much!
Full disclosure: I love the googleVis package.
I see the same behavior you do, even after updating to the latest version of googleVis (not yet on CRAN). I don't know if this is a bug or not; the googleVis documentation for gvisLineChart mentions continuous data, but nothing I tried allows me to plot the X axis as numerical.
You can get clues as to what's happening when you change aspects of your code in generating googleVis charts and graphs if you right-click on the web page that gets displayed with the plot, and choose "View Page Source." This page is where the magic happens, and is the HTML output from the googleVis package.
The problematic line in this case is the one that reads "data.addColumn('string','val1');
In this line, the word 'string' should be 'number', and the val1 values should not be in quotes in the data section.
You can get the results you want, though, by using gvisScatterChart instead:
library(googleVis)
df=data.frame(val1=c(10,13,100), val2=c(23,12,32))
Line <- gvisScatterChart(df, options=list(lineWidth=2, pointSize=0))
plot(Line)