Having difficulty making this example
https://dc-js.github.io/dc.js/examples/compare-unfiltered.html
work with rowcharts.
JS Fiddle here https://jsfiddle.net/v3na78c2/2/
In the jsfiddle it partially works but only the first chart after resetAll is clicked. Other charts don't render at all.
In my environment I get the following exception.
dc.js:8802 Uncaught TypeError: child.rescale is not a function
at dc.js:8802
at Array.forEach (<anonymous>)
at Object.rescale (dc.js:8801)
at Object._chart.compose (dc.js:9085)
at metrics.js:1085
at Array.forEach (<anonymous>)
at createCharts (metrics.js:1011)
at Class.<anonymous> (metrics.js:1358)
at fn (backburner.js:638)
at invoke (backburner.js:258)
Related
I added kendo chart on a page according to the documentation.
But started to get next error 5 times per each kendo ui chart
Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
Charts are drawn but those errors break pdf export. When I use same datasource as in my app on kendo ui dojo.telerik editor there is no error.
I know there might be dozens of possible reasons but I'm a bit locked with that for next few days. So I decided to try luck on stackoverflow in case anyone had anything similar.
Any ideas?
I had the same error, and for me it was related to the <kendo-chart-series-item-labels> component.
I had as property rotation="auto" but the rotation property should be only a number. Removing the property solved it.
<kendo-chart [chartArea]="{ height: 300 }">
<kendo-chart-series>
<kendo-chart-series-item
type="column"
colorField="color"
[gap]="1"
[spacing]="0.25"
[color]="barColor"
[data]="chartData"
[stack]="true"
field="TotalSum"
categoryField="TransactionType"
[tooltip]="{ visible: false }"
>
<kendo-chart-series-item-labels
font="bold 16px unity-medi"
color="#3c3c3c"
rotation="auto"
[margin]="30"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
solution: remove rotation property inside the kendo-chart-series-itme-labels component
Kendo API documentation for this component here: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesLabelsComponent/
Of course, in your case, it may come from a different component.
Maybe double check if you have a property inside a kendo-chart or one of its child component that requires only numbers while you may be passing a string or something else to it?
I am trying to display tip when mouse is anywhere on the graph which will look like below( see India Total Cases) :
I tried this solution but it gives me an error:
slider_chart.html:962 Uncaught TypeError: child._hideDot is not a function
at SVGCircleElement.<anonymous> (slider_chart.html:962)
at Pt.each (d3.v5.min.js:2)
at slider_chart.html:952
at Array.forEach (<anonymous>)
at SVGSVGElement.<anonymous> (slider_chart.html:951)
at SVGSVGElement.<anonymous> (d3.v5.min.js:2)
Line no 935-983:
https://blockbuilder.org/ninjakx/241d14a27427dd89133e1b07919ee9b6
I am trying to implement it for 1st graph then will do the same for rest of the graphs but I am getting this error not a function. I tried searching on google but could not find any solution for it.
My 1st chart (total_chart) is defined under function total_cases_chart() Line no. 863-983.
I tried creating a angular2 service which would read the json file and return the contents which would be consumed by the component and draw a bubble-chart using D3.
The http service is returning me the json contents but there is some issue in generating D3 bubblechart. I am not able to get the exact error for not generating the chart in plunker. My plunker url
But when I tried in my localhost, the chrome browser gives me the error as below
angular2-polyfills.js:487 Unhandled Promise rejection: EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: ReferenceError: d3 is not defined
ORIGINAL STACKTRACE:
ReferenceError: d3 is not defined
at new BubbleChartComponent (http://localhost:55568/appScripts/BubbleChartComponent.js:18:22)
at AppView._View_BubbleChartComponent_Host0.createInternal (BubbleChartComponent_Host.template.js:20:36)
at AppView.create (https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js:22641:23)
at ComponentFactory.create (https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js:7668:34)
at https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js:8215:40
at https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js:8192:20
at ZoneDelegate.invoke (https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:349:29)
at Object.onInvoke (https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js:2185:31)
at ZoneDelegate.invoke (https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:348:35)
at Zone.run (https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js:242:44)
any idea what is it I am missing?
Hia guys,
I'm currently learning to use HighCharts in order to graph some data.
After learning to set up on a local page, it was time to load the data dynamically / though ajax.
The chart loads fine, with series defined like:
var series1=[];
var series2=[];
var series3=[];
I then have a button, which fires an ajax request, and these arrays are filled with data, pulled from an sql database, formatted, and sent back to the webpage :D
(this has taken a while)
Now - with these arrays filled, I'm looking to get HighCharts to draw this data.
I've tried to use chart.refresh(); on the end of my ajax but this seems to give the error:
Uncaught TypeError: Object #<Object> has no method 'refresh'
I'm a little stumped and struggling to make progress - a nudge in the right direction would be very much appreciated!
Edit:
chart.series[0].setData(series1);
Is what needs firing after the arrays have been filled up.
Without seeing the rest of your code here is a wild guess:
You have set up your chart with these 3 series already "created" in the HighCharts options. You are loading the page, defining your HighCharts options (including the 3 series - as empty series), then firing the ajax call to populate the three series of data.
You are not actually pushing the new data in each series to the chart, however. You are just setting the vars to new values after they have been sent to HighCharts - refreshing (if even a valid HighCharts call) HighCharts does "nothing" because it is not re-reading the 3 var values.
Also, note that chart.refresh does not appear to be a valid HighCharts call. There is chart.redraw that you can try - but I do not think this will help in your case because of how you are defining your data series elements (again, no idea because the important part - telling HighCharts there is new data in code was not presented). Have a look at the API as well for pointers on dynamically assigning data.
How are you updating the series values? How are you telling the chart there is new data? It would be helpful to see the rest of the code because 3 lines of var x=[] is not really useful.
Here is a basic way to set the data of a series using setData:
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
I have a button, onclick of which I'm doing an AJAX call to one of my pages (which contains jqplot elements).
Now, the AJAX req/res works fine for the first click of the button.
When I click my button for the second time, I get an exception saying,
Uncaught Error: can't load XRegExp twice in the same frame
And it points to the jQuery-min file. Any idea on how I can solve this issue?
I have tried this solution and it does not work.
I think the handler is getting "attached" before the DOM element in question actually exists.
Try using jquery.on().