I've created a simple column chart using dojo version 1.8 and I want to add a highlight effect on mouseover for each column.
Dojo's dojox charting API provides a nice class called Highlight that you should be able to instantiate injecting a chart instance and a plot name as below...
new Highlight(ChartInstance, "plotName");
Here is the docs to support this:
http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html#highlight
http://dojotoolkit.org/api/1.8/dojox/charting/action2d/Highlight
http://dojotoolkit.org/documentation/tutorials/1.8/charting/
Now I've followed this syntax but havent been able to get the effect to work, and no scripting errors are being reported in firebug. here is my test page...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test chart</title>
<script>
var dojoConfig = {
baseUrl: "./",
async: true,
isDebug: true,
parseOnLoad: true,
gfxRenderer: "svg, canvas, silverlight",//svg is preferred chart renderer
//here are the packages dojo will be aware of and related js files
packages: [
//dojo specific packages
{name: "dojo", location: "libs/dojo"},
{name: "dojox", location: "libs/dojox"}
]
};
</script>
</head>
<body>
<!-- create the chart div-->
<div id="chartContent"></div>
<!-- load dojo and provide config via header script -->
<script src="libs/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/domReady!"]);
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Columns",
"dojox/charting/axis2d/Default",
"dojox/charting/action2d/Highlight",
"dojo/domReady!"
],
function (Chart, Theme, ChartType, Default, Highlight){
chartData = [
{ x: 1, y: 19021 },
{ x: 2, y: 12837 },
{ x: 3, y: 12378 },
{ x: 4, y: 21882 },
{ x: 5, y: 17654 },
{ x: 6, y: 15833 },
{ x: 7, y: 16122 }
];
var chart = new Chart("chartContent", {title: "test bar chart"});
chart.setTheme(Theme);
chart.addPlot("barPlot", {type:ChartType, interpolate: false, tension: "S", markers: true, hAxis: "x", vAxis: "y"});
chart.addAxis("x", {title: "horizontal axis", titleOrientation: "away", min:0});
chart.addAxis("y", {title: "vertical axis", vertical: true});
chart.addSeries("bar series", chartData, {plot: "barPlot"});
new Highlight(chart, "barPlot");
chart.render();
}
);
</script>
</body>
</html>
To run the page you'll need to adjust the dojo and dojox locations to match your own set up, you can also just point to the online versions of them by swapping in the full URL for each in the config.
When you load it in the browser, you should see a column chart, and notice that the highlight instance has had no effect on the mouseover for each column.
Any ideas, perhaps I've missed something simple here?
A lot later, but still, here is what I figured:
Highlight is not working with GRADIENTS as fills.
I'm assuming this comes from the fact that Highlight will be checking what colors are used, and if lighter then 50%, uses the lighter color... When the theme includes a gradient, it returns two values and it breaks.
I stumble on the same issue while using a custom theme with gradients, removing the gradients and using solid colors solved the problem.
So any theme with a gradient is not going to support Highlight.
Ok I've now discovered the problem, and it was fairly annoying to be honest!
it was all to do with the Claro theme, I changed this to one of the others, in this case I used the MiamiNice theme, and would you believe it, the mouseovers now work!!!!
Code snippet for those that are interested:
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice", <-- here it used to end /Claro
I'll put this on the dojo community forum.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
Does anybody know how I can integrate highcharts into a dojo front end? The error message I receive with this code is...
Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous> dojo.html:24:27
Eventually I will have to get this working for the ESRI web app builder which is built on dojo so I am hoping the dojo versions are the same. Would somebody let me know how to check that as well? I know an adaptor was made for this in 2014 (https://github.com/ben8p/highcharts.com-dojo-adapter) however I could not find documentation on how to use it and the owner of this repo was unable to offer further assistance as they have not worked on this project for some time.
Cheers and thanks in advance
Using dojo with Highcharts is not officially supported. It seems to work with Highcharts 5, but It is always recommended to use the latest version.
<script src="https://code.highcharts.com/5/highcharts.js"></script>
Demo:
https://jsfiddle.net/BlackLabel/wy3mu4pt/
Dojo adapter for highcharts is one of our community wrappers. As I noticed in the github project it is tested with Highcharts 3.0.7 version, so it might not be compatible with our latest highcharts version as well. The only possibility to get the answers to the specific dojo adapter's questions is to contact the author.
I am using Plotly js in my recent angular project. I implemented the library successfully by using its angular based wrapper.
There is one thing that I tried to implement in many ways but failed. I am trying to use my custom color palette for its charts.
I find a work around by passing the colour in the chart data layout like,
data = [{
values: allValues[0],
labels: allLabels,
type: 'pie',
name: 'Starry Night',
marker: {
colors: [['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)', 'rgb(36, 55, 57)', 'rgb(6, 4, 4)']]
},
domain: {
row: 0,
column: 0
},
hoverinfo: 'label+percent+name',
textinfo: 'none'
}
and it worked but it's not the perfect way because I need to add this in every chart data and need to take care of how many data points are there so I push those many color codes.
Is there any way I can provide my color palette in somewhere like config so that every time a chart gets initialize it start taking colors from the custom-defined palette.
The layout property takes a property colorway which takes a list of colour names/codes.
public graph: any = {
data: [],
layout: {
colorway: ["red", "green", "blue", "goldenrod", "magenta"],
autosize: true,
}
}
But I haven't yet figured out how to set this globally.
I've created a simple Highcharts scatter plot with three data points. It uses the highcharts-regression plug-in to add a series showing the linear regression line. I would like tooltips to display for the data points but not for the regression line, so I have disabled the tooltip like this:
series: [{
regression: true,
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
],
regressionSettings: {
tooltip: {
enabled: false // <---- I expect this to disable the tooltip
},
}
}]
http://jsfiddle.net/f34mza2q/1/
As you can see from the jsfiddle, the tooltips still pop up for the regression line. How can I turn off the tooltips here (and still keep them for the data points)?
I've tried a couple of other things:
adding a style: 'display: "none"' to regressionSettings.tooltip
setting regressionSettings.enableMouseTracking to false
Neither seemed to have any effect.
UPDATE: Based on ppotaczek's answer below, here's what I did to turn off tooltips for all regression lines on the chart:
Highcharts.chart('mychart', {
// ...
events: {
load: function() {
var trendlines = this.series.filter(c => c.options.isRegressionLine);
for (i in trendlines) {
trendlines[i].update({
enableMouseTracking: false
});
}
}
},
//...
});
This highcharts-regression plugin is not official Highcharts plugin, but please look at the documentation: https://api.highcharts.com/highcharts/series.line.tooltip, you can not disable tooltip for individual series in the way you try. You should use enableMouseTracking property, but it is not supported in regressionSettings. To workaround, you can use update method on created regression series in this way:
load: function() {
this.series[1].update({
enableMouseTracking: false
});
}
Live demo: http://jsfiddle.net/BlackLabel/dt42v3uz/
API: https://api.highcharts.com/highcharts/series.column.enableMouseTracking
as mentioned in documentation HIGHCHARTS REGRESSION the tooltip object fellow the stander configuration of highchart disabling or enabling for the entire chart.
unless you want to search the generated html/css and remove the tooltips with jquery.
I've been trying to get graphing working, all the data seems to be graphing, however the tooltip doesn't move from the far right. This of course is a issue since I cannot then mouse over specific points to see the data.
Here is a JS fiddle example of what's happening: https://jsfiddle.net/kp7eyf8o/6/
NOTE: for some reason the stack overflow JSfiddle gives me an error, but the URL should show my issue.
var chart = c3.generate({
bindto: '#test',
data: {
x: 'x',
columns: [
['x', '2016-01-01', '2016-02-02', '2016-03-03', '2016-04-04', '2016-05-05', '2016-06-06', '2016-07-07', '2016-08-08', '2016-09-09', '2016-10-10', '2016-11-11', '2016-12-12'],
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, ],
['2016 Projected', 3916752.11, 4626643.23, 5146264.25, 6148854.32, 6640724.57, 7409783.48, 8263054.46, 8488001.54, 8837809.1, 9068047.68, 9402019.15, 9513505.72, ],
['2015 Actual', 3256870.0, 3825580.0, 4394290.0, 5550000.0, 6044000.0, 7100000.0, 7700000.0, 8154000.0, 8860000.0, 9200000.0, 9500000.0, 9600328.45, ]
],
colors: {
'2016 Actual': '#2cd554',
'2016 Projected': '#1bc4fc',
'2015 Actual': '#fdaf5a'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
culling: false,
format: '%b'
}
},
y: {
tick: {
format: d3.format("$,.2f")
}
}
},
});
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet" />
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script>
<div id="test"></div>
I saw someone mention using 'xs: {x .... y....} but I wasn't able to get that working. I need the X axis to be dates (hard coded right now but in my app I'm using dates associated with one dataset I'm looping through), and the Y axis to be $.
C3 tooltips seem to break when data arrays of different lengths are entered into the columns. You can try putting null values into the shorter array so that the tooltip can move properly.
JS Fiddle: https://jsfiddle.net/stancheta/7zgny2yd/
['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, null, null, null],
we have some graphics using
highcharts 2.5.1 back in 2011 bundled with Jquery 1.4.2
and everything works OK but we save some other javascript plugins and they we need to upgrade them as well latest releases have some bug fixed and we want to take advantage of them and they also need Jquery upgrade as well but when i upgrade to latest jquery version
jquery-1.11.1.min then highcharts seems not longer works??
what can i do to make it works as using JQuery 1.4.2
sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
generates the right output
if i change the JQuery version like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
generates something like.
i see something like
also tested con JQuery 1.10
Check the compatibility page of highcharts
jQuery
1.4.3 - 1.10.x for all browsers.
2.0.x for modern browsers.
Try using 1.10.x if you can. If you still see the issue, I would suggest create a jsFiddle demonstration of the issue & report here. SO Experts or Highcharts support team can assist you while you are using an officially supported version of jQuery.
EDIT
Your code works well, check out # http://jsfiddle.net/jugal/9g3679zk/
You may also need to upgrade the Highcharts js
EDIT 2
Using Highcharts 2.1.5 # http://jsfiddle.net/jugal/9g3679zk/1/ The charts don't load as you have showed, on resizing window it does redraw and chart comes up.
Upgrading to 2.2 seems to fix it # http://jsfiddle.net/jugal/9g3679zk/2/ You most likely should be at be able to upgrade from 2.1 to 2.2 with your existing license.