anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.
It looks like you did not include the basic jqPlot library, just the meter gauge add on.
Related
I'm working on customizing a chart I'm working on and no matter what I try anytime I try to add something in the customIcons section of the toolbar in the options for the apex chart I get the error "apexcharts:6 Uncaught (in promise) TypeError: Cannot read property 'bind' of undefined". For example, the code below works.
toolbar:{
customIcons:[],
.....
}
But if I try to actually have a custom icon it gets that error even with it blank like this.`enter code here
toolbar:{
customIcons:[{}],
}
........
When I do fill out the custom Icon sections it can properly show the custom image but it will receive that error still and no functions that happen after work including onclick functions for the Icon. I have tried looking for similar errors but I haven't seen someone have this error with apexcharts specifically any suggestions would be helpful.
in my situation what was causing it was the fact you have to have a click function defined or it will give you the bind error.
For what i'm seeing your customIcons should be placed inside tools, something like that:
toolbar: {
show: true,
tools: {
download: true,
customIcons: [{
icon: 'icon',
index: 0,
title: 'tooltip of the icon',
class: 'custom-icon',
click: function (chart, options, e) {
console.log('clicked')
}
}]
}
},
source: https://apexcharts.com/docs/options/chart/toolbar/
I am new here and a massive noob when it comes to coding. I have been teaching myself some basics, but I cannot seem to figure this one out.
I'm trying to integrate this piece of code in my website. It is an automaticcaly genenerated code from Eventbrite. Somehow it the whole thing is showing op twice in the front end of my website. I am using Divi builder with the code module. I hope someone can help. I have been googling around for over an hour now but I can't seem to find a fix.
<div id="eventbrite-widget-container-107705263342"></div>
<script src="https://www.eventbrite.nl/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '107705263342',
iframeContainerId: 'eventbrite-widget-container-107705263342',
// Optional
iframeContainerHeight: 425, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
</script>
I can't make layout running from scipt. I added these lines
var lay = cy.layout({name:'grid'})
lay.run()
But nothing happens.
If I manually go to a browser console after page rendering and run that same commands everything works.
I expect this to be a newbie JS question so any direction towards relevant info is also appreciated.
It's simple one line statement for run layout as below.
cy.layout({ name: 'circle' }).run();
Looks like layout should be synchronized with graph placement, for example
$.getJSON(
"http://path/to/json-with-nodes",
function (data) {
cy.json(data);
lay = cy.layout({name:'random'});
lay.run();
}
);
I am trying to use chart js library and build range selector..
i have iuncluded all library..
but still range selector not showing upo...
can you guys tell me why its not showing up...
proving my fiddle below...
its nopt workimg for this code..
http://jsfiddle.net/TRjGa/11/
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
I'm not sure what the result should look like, but you can't put the JS code inside the html in jsfiddle.
If I put it like this, there is at least smth. showing up =)
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
http://jsfiddle.net/v5LTM/
I have this page:
<script type="text/javascript" src="jQuery/Highcharts/highstock1.1.6.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts2.1.4.js"></script>
and in the page I use
$.getJSON(
"server/indice.server.php?row=" + row +"&item="+ item,
null,
function(data)
{
chartindice = new Highcharts.Chart(
{
chart:
{
renderTo: 'graph',
defaultSeriesType: 'line',
zoomType: 'x'
},
/////moore setting..
series:
[{
type: 'area',
name: titleindice,
data: indice,
showInLegend : false //disable the the show/hide icon
}]
});
});
and an highstock graph
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartHistory'
},
rangeSelector: {
selected: 2
},
series: [{
data: history,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
and they can't work together, just one or the other.
What can I do?
Got same trouble with conflicting Highchart and Highstock. here's the official solution:
Keep in mind that the Highcharts.Chart constructor and all features of
Highcharts are included in Highstock, so if you are running Chart and
StockChart in combination, you only need to load the highstock.js
file.
http://highcharts.com/errors/16
Highcharts is included in highstock.js, so please take look at the example, how use highcharts with highstock.js.
http://jsfiddle.net/sbochan/PtXhB/
Secondly I advice to use the newest highstock.
I have experienced the same problem when I tried to use Highstock chart and Angular Gauge,
And the problem was solved when I try to rearrange highstock highchart javascript library like this
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts-more.js"></script>
or (if you don't want to use additional graphics)
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
I hope it can be useful
you must delete this file:
highcharts.js
i tried and it works
Im my case, including only HighStock's file worked for HighChart's as well.
I have many charts, highchart's or highstock's, possible to be included on same page, and I just call HighStock.js once and it works for both !
Use just
highstock.js
and delete highcharts.js
And It's work well for me
And Good luck
Highstock contains most of HighCharts code. Have you tried including only highstock.js in your page to display both charts ?
I had same issue and got fixed by ordering my JS as below.
<script type="text/javascript" src="$javascript_folder/highstock.js"></script>
<script type="text/javascript" src="$javascript_folder/highcharts.js"></script>
I don't know its working fine according Ardi. Is works fine for me when i load highstock.js first followed by highcharts.