avdaredevil / highcharts-chart Goto Github PK
View Code? Open in Web Editor NEWPolymer Element wrapper for highcharts library. Seamlessly create various types of charts from one element.
License: MIT License
Polymer Element wrapper for highcharts library. Seamlessly create various types of charts from one element.
License: MIT License
Hi there,
I am trying out this nice web component and everything worked fine until the highcharts module pulled via bower updated the patch level from 5.0.9 to 5.0.14.
I put together two examples to show this behavior:
https://github.com/hadjian/highcharts-chart-broken-with-5.0.14
https://github.com/hadjian/highcharts-chart-working-with-5.0.9
The one, that is working explicitly pulls highcharts version 5.0.9 in bower.json. Both projects are based on the polymer starter example and include the highcharts-chart component via src/polytest-app/polytest-app.html. Including the component directly in index.html seems to work in both cases. Apologies in advance, if I made some newcomer mistake.
Regards,
Pedram
Hello,
This is a dull question but I have been trying to make the xAxis option to work (just adding a vertical line to a line chart) without success so far.
I am really stuck with this and I will appreciate any help. The plot is fine, it just dont show the vertical marker at all.
Thanks.
How to use multiple series data? I tried to use the addSeries function but it wouldn't recognize it.
Also, what dependencies have to be added if RequireJS is being used?
Hey there,
i've an issue when trying to render highcharts inside a // .
It doesn't render the chart at all (not to mention that it doesn't get the items inside the data-attribute).
Snippet:
<div class="card card--1-5 text-center animated fadeInUp">
<div class="card__chart">
<highcharts-chart
index$="[[index]]"
id$="[[index]]"
style="min-height: auto;"
type='pie'
tooltip-options='{"enabled":false}'
color-by-point='true'
highchart-options='{"chart":{"height":"150px"},"plotOptions":{"pie":{"colors":["#2f84e5","#f5f8fb"],"dataLabels":{"enabled":false},"innerSize":"80%","center":["50%","50%"]}}}'
chart-options='{"backgroundColor": null}'
data='[50,50]'
title=''>
</highcharts-chart>
</div>
</div>
Do you have any idea how to debug this one or fix it?
It works fine when it's not inside another template-tag..
Hi,
I am using polymer version #1.9 - 2. and i have installed highcharts-chart using command below
bower i highcharts-chart#polymer-1.0
and i have imported the highcharts component and used like below
when i inspect the svg conent is not getting loaded inside highcharts-chart component.
</highcharts-chart>
Could you please help in resolving this issue.
Is there a way to render the Highcharts word cloud in Polymer?
Have the following support in Highcharts-Behavior:
plotOptions
link to plot optionschartOptions
link to chart optionsUse case: After doing bower install
, it is common to expect that everything that is needed to run the application is installed in bower_components
.
Behavior: Highcharts is loaded directly from their website.
Expected behavior: Should be installed via bower
.
How do you feel about this? I could do a pull request if it's alright with you.
Overriding default options seems counterintuitive.
Consider people moving from using Highcharts directly to using this element. They will copy-paste their configuration and expect the chart to look the same, since it is the same configuration. However, they will now have to hunt down the options that have been overwritten, both in the documentation of this element (to find out what has been overwritten) and in Highcharts' documentation, to figure out what was the original default value.
This also make it difficult for people which are already familiar with the Highcharts API, since they are familiar with the default values, and will have to go through the same process.
A really unintuitive example is the legend: it is vertical by default, in contrast to horizontal in Highcharts. Setting legend-position
to { align: 'center', verticalAlign: 'bottom', layout: 'horizontal' }
is not enough, since we also have to set legend-pos
to { x: 0, y: 0 }
.
I am trying to use multiple yAxes for my chart. Usually in high charts I would use an array with multiple yAxis objects inside. In your docs it looks like that attribute is not meant for arrays.
I have my chart set up like this:
<highcharts-chart type="spline" data='{{chartData.series}}' title='Test' xAxis='{{chartData.xAxis}}' yAxis='{{chartData.yAxis}}'></highcharts-chart>
And my chartData object:
chartData = { series: [{}], xAxis: {title: {text: "X Axis"} }, yAxis: [ {title: {text: "Y Axis 1"} }, {title: {text: "Y Axis 2"}, opposite: true } ] }
I do not see an xAxis or yAxis title.
I tried using the same code on the demo of your webcomponents page (here's a screenshot), but it didn't seem to work there either.
Can you tell me if I'm doing something wrong or if this is a bug?
Great job on the web component by the way!
Thanks!
I am using highcharts-chart" with lit-element:
"highcharts": "^7.1.2",
"highcharts-chart": "^3.0.1",
import 'highcharts-chart/highcharts-chart';
<highcharts-chart id="chart" type="pie" .data="${this.data}"
selected-points="${this.selectedPoints}"
title='${this.title}' x-zoom x-label="" y-label="" color-by-point="true" legend="true">
But getting the error :
highcharts-behavior.js:5 Uncaught ReferenceError: Highcharts is not defined
at Module.rv95 (highcharts-behavior.js:5)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.iJsM (highcharts-chart.js:1)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.LB6A (selectable-pie-chart.js:1)
at webpack_require (bootstrap:785)
at fn (bootstrap:150)
at Module.4g6G (infrastr-grid-filter.js:1)
I created some charts, very nice element btw, but i'm not able to create a gauge, could you please give me some infos?
Hi,
Thanks for having created this component !
I am planning to use it in my Polymer 2.x project.
I can initiate an upgrade to polymer 2.x but just wondering if you could create a branch for that (because it is going to be a full Polymer 2.x upgrade not hybrid).
Please let me know what your thoughts are on this.
Cannot get chart to render in IE11 including the demo site ones https://avdaredevil.github.io/highcharts-chart/
It's possible to use in angular 4 app?
Hi,
I ve got a problem with x axis zoom. When i set data dynamically in the chart and i clicked on the "All" button, after 2-3 minutes the selection in the zoom time panel decreases step by step.
Do you have a solution?
Thanks
Hi,
I'm trying to use the annotation as shown here
I really don't know how to include them in your code, any tips?
is there a way to specify the height of a graph? I want to stack four spline charts vertically in the viewport and have them be relatively sized 25%. I'm using iron-flex-layout for the structure but the graphs are overflowing their containers.
Hi, thanks for providing this component. Saved me a lot of time.
Is the height-responsive attribute supposed to mean to expand the chart to its container? If so I can't seem to get it to work.
I tried:
<div style="height:1000px">
<highcharts-chart height-responsive data="[1,2,3]"></highcharts-chart>
</div>
And so I would expect to see a chart of height 1000px but I'm not.
Have I misunderstood what this attribute is for?
Many thanks.
Hello,
Sooo, I am using this very cool component in an application using electron+polymer which reads real time data from a microcontroller, via serial port.
All is good, however I have had some trouble shifting the plotted data as the new data is read. (See pic)
Now, my problem is that I cannot find a way to control the (xmin,xmax) but using reRender(), the documentation in highcharts has an example using a function for the Axis called setExtremes, which I have not been able to find in this component.
What I do is to fill in an array with data and after a number has been reached push - shift - reRender, but I was wondering if there is some other way of doing so which would allow more binding and customisation on the fly?
This is the markup of the element and the properties:
<div id="hccontainer">
<highcharts-chart id="hcplot"
type="line"
plot-options=[[plotOptions]]
title="Sensor A0 time-series"
x-axis=[[xoptions]]
y-axis=[[yoptions]]
></highcharts-chart>
</div>
The options which are kind of irrelevant:
xoptions:{
type: Object,
value:{
//min: 0,
maxPadding: 0.05,
minPadding: 0.05,
//hendOnTick: false,
//tickAmount: 10,
//type: 'datetime',
//tickPixelInterval: 150,
//maxZoom: 20 * 1000
},
notify:true,
},
yoptions:{
type: Object,
value:{
min: -1.0,
max: 5.5,
tickAmount: 8,
},
notify: true,
},
plotOptions:{
type:Object,
value:{
line: {
marker: {
enabled: false,
}
}
},
},
here is my plot function:
`
plotdata: function(){
if ((this.sensor)&&(this.sensor.instance)){
_this=this
this.sensor.instance.scale(0,5).on('data', function(){
if (_this.drawswitch==true){
_this.tseries.push([_this.pltindex*(_this.freq/1000.0),_this.sensor.instance.value])
if(_this.pltindex>100){
_this.tseries.shift()
}
if (_this.pltindex%2==0){
_this.$.hcplot.reRender()
_this.$.hcplot.setData(_this.tseries)
}
_this.pltindex++
}
})
}
},
`
I would really appreciate any suggestion to have some more control over the real time updates which i would like to be able to manipulate from the gui somehow.
Thanks,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.