Angular 2+ is used for new part of Spring MVC application where Highcharts is used. Later, highcharts charting (angular-highcharts) is added to new components written in angular 2+ technology. The same Highcharts 6 version is used at both sides.
At the time angular charting component is initialized Highcharts is already loaded in web page and following Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16 is thrown.
Highcharts is not reloaded by angular component and H.error(code, true) is executed.
What is the best way to resolve this conflict?
Should additional Highcharts_X global variable for legacy web application be created? I don't prefer this approach because it is productively used by Higcharts and then it should be changed in the source code at many places.(?)
Is it possible to tell angular-higcharts that the library is already loaded and to use that one?
Or to let it be reloaded without breaking JS with the error?
You can use Global defined Highcharts instead of load Highcharts twice.
For example:
//import * as Highcharts from 'highcharts/highstock';
declare var Highcharts: any;
You must remove loading module string and declare any Variable for build with no problems.
I'm using angular5 with library "#swimlane/ngx-charts": "^8.0.0"
I need to add a library to use combo-chart because in ngx-charts the default install not include combo-chart .
This is a demo of ngx combo charts.
This is the source code of combo-chart.
I need to use the combo chart in my project.
Please how do I integrate the combo chart inside an angular5 project?
This post in a github discussion explains why components like combo-chart (useful but a bit more complex) aren't included in the ngx-charts library. Instead, those use cases are featured in the demo section, where you can view the source code and the final look and feel.
As far as I can tell, the best way to integrate the combo-chart is to create a combo-chart.component in your own project and copy the source code into it. You will need to include the ngx-charts library and change any imports that rely on the local structure of the demo to point to that library instead.
For example, in combo-chart.component.ts
import { NgxChartsModule, <other imports> } from '../../src';
would become
import { NgxChartsModule, <other imports> } from '#swimlane/ngx-charts';
Is there any way to use Google Charts in a React app? I have found react-google-charts which I have got working a bit, but it seems to lack much of the API of Google Charts, or is at the very least is undocumented. I'm also a little shy to use something in production that NPM stats show only has ~400 downloads in the last day.
However I can't find Google Charts alone on NPM and no way simply to import Charts from 'google-charts' like I had initially expected.
My next thought was to see if there is a way to import a library as a global variable.
1) How can I do that
2) If that's possible how do I include it in a react component like import { Line } from '???'
Use Webpack externals
By defining a library as external webpack simply export the global symbol for the library, much like (say for jQuery)
{
1: function(...) {
// simplified for illustrating
module.exports = jQuery;
}
}
So you could do something similar to this:
Add a <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> or newer url from Charts homepage
In your webpack configuration add:
externals: {
charts: 'google.charts' // or any other alias you want, can be a regex too! check Webpack's doc for more
}
And import it as:
import chart from 'charts'
// do something!
charts.load('current', {'packages':['corechart']});
Make sure to load Google Charts before loading your bundle.
For the ReactJS part, you need some way to get hold of the native DOM element in your script, by using refs or something.
P.S. I am not a react guy so maybe someone with react background may help
I am trying to integrate DyGraph in a web site that uses require.js for loading modules.
It is possible to load DyGraph using require?
I looked at the code and did not see any define() in there.
I came across this project where it looks like it needs to be "wrapped".
https://github.com/mgmarino/kanso-dygraphs
Has anyone done this before?
Thanks.
The latest dygraphs was fine to load with just:
// put this in your require config
paths: {
'dygraphs' : 'bower_modules/dygraphs/dygraph-combined',
}
...
require('dygraphs');
console.log(Dygraph); // Dygraph is added to global scope
I am using just the BokehJS part of Bokeh since i am building a more production oriented system.
Unfortunately it seems that the actual BokehJS part of Bokeh is not documented that much, which makes it difficult to find the needed information, such as how to format data for the bokehJS object.
What I am trying to do is to make a simple line graph, however instead of having just one line i would like to have multiple lines, and the possibility of making a legend describing each line. Its a very basica plot, however i did not find any way to do this in bokehJS.
In order to make a plot with a single line i execute the following javascript:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot({type:'line'}, {x:[1,2],y:[4,5]}, {})
,'.mydivcontainer');
How do i alter this so that i can have 5 lines in the same plot as well as a legend, basically similar to this which is written in standard bokeh:
from collections import OrderedDict
import pandas as pd
AAPL = pd.read_csv("aapl.csv", parse_dates=["Date"])
MSFT = pd.read_csv( "msft.csv", parse_dates=["Date"])
IBM = pd.read_csv( "ibm.csv", parse_dates=["Date"])
xyvalues = OrderedDict(
AAPL = AAPL[("Date", "Adj Close")],
MSFT = MSFT[("Date", "Adj Close")],
IBM = IBM[("Date", "Adj Close")],
)
df = pd.concat(xyvalues, axis=1, names=["l0", "l1"])
from bokeh.charts import TimeSeries
ts = TimeSeries(
df, title="timeseries, pd_input",
filename="stocks_timeseries.html")
ts.legend("top_left").show()
(Taken from the release note: http://continuum.io/blog/bokeh-0.6 )
Thank you very much in advance for your help
it's definitely true that the developing and documenting the JS interface has lagged behind the other interfaces (python mostly, but also scala and Julia and soon R). We plan to improve this, but as you can imagine there are lots of competing priorities.
But I will mention another option, in case it is useful to you. It is possible to create the plot JS from python, and then use the JS directly. That is you only use python to set things up, then you can throw the python away. You can use functions in bokeh.embed to turn your python plot object graph into JS that you can embed however you like.
With more recent version of Bokeh, you can also easily grab ahold of the plot objects (for instance data sources) to update the plot directly from JS. See, for instance:
https://github.com/bokeh/bokeh/blob/master/examples/embed/spectrogram/spectrogram.coffee#L187
ahhh now i have seemed to figure this one out.
To enable multiple lines, it seems i can do like this:
Bokeh.Plotting.show(
Bokeh.Plotting.make_plot([{type:'line'},{type:'line'}], [{x:[1,2],y:[4,5]},{x:[1,4],y:[2,5]}], {})
,'.mydivcontainer');
Great :)