I am getting the following error in IE9
SCRIPT5022: Syntax error, unrecognized expression: ##chart1
jquery-2.0.3.min.js, line 4 character 14519
I am not sure why given the code which is shown below. I clearly do not add it to the HTML string and only have 1 when i reference it in the jqplot call. So why is it shooting out this error?
function createGraph() {
var HTMLstring = '<!DOCTYPE html>\n';
HTMLstring += '<HTML>\n';
HTMLstring += '<HEAD>\n';
HTMLstring += '<TITLE> Frequency Graph</TITLE>\n';
HTMLstring += '<!--[if lt IE 9]><script src="js/excanvas.js"></script><![endif]-->\n';
HTMLstring += '<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n';
HTMLstring += '</HEAD>\n';
HTMLstring += '<BODY>\n';
HTMLstring += '<div><span>Moused Over: </span><span id="infomouseover">Nothing</span></div>\n';
HTMLstring += '<div><span>Clicked: </span><span id="infoclicked">Nothing</span></div>\n';
HTMLstring += '<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>\n';
HTMLstring += '</BODY>\n';
HTMLstring += '</HTML>';
newwindow = window.open();
newdocument = newwindow.document;
newdocument.write(HTMLstring);
$(document).ready(function () {
freqchart = $.jqplot('#chart1', [
[
[2, 1],
[4, 2],
[6, 3],
[3, 4]
],
[
[5, 1],
[1, 2],
[3, 3],
[4, 4]
],
[
[4, 1],
[7, 2],
[1, 3],
[2, 4]
]
], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
$('#chart1').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#infomouseover').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data + ', pageX: ' + ev.pageX + ', pageY: ' + ev.pageY);
}
);
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#infoclicked').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data + ', pageX: ' + ev.pageX + ', pageY: ' + ev.pageY);
}
);
$('#chart1').bind('jqplotDataUnhighlight',
function (ev) {
$('#infomouseover').html('Nothing');
}
);
});
}
jqPlot() doesn't require a CSS style selector to find an Id. It handles that itself, thus currently it looks for #chart1 with an appended # twice.
<script>
//This will look for #chart1
$.jqplot('chart1', [data], options );
</script>
jsplot Docs
"Create the actual plot by calling the $.jqplot() plugin with the id of your target"
jqplot takes the element id as a parameter not an id selector so $.jqplot('#chart1', should be $.jqplot('chart1', etc.
http://www.jqplot.com/docs/files/usage-txt.html
Related
well... I am new with HighCharts. I read all the post but I am still struggling how to show additional data on the tooltip.
I created a quick sample plotting a 2D chart, the first 2 columns are x and y, and the other 3 columns are additional information I want to display on the tool-tip
https://jsfiddle.net/oscjara/0qnwxgsh/
Highcharts.chart('container', {
tooltip: {
shared: false,
headerFormat: '<b>{series.name}</b><br>',
valueDecimals: 2,
formatter: function() {
return '<b>' + this.series.name + '</b><br>' +
'X: ' + this.x + ' - ' +
'Y: ' + this.y + '<br>'+
'Z: ' + this.z;
}
},
series: [{
data: [
[0, 29.9, 0.21, 125.54, -0.2],
[1.2, 71.5, 0.25, 254.01, -21.2],
[..., ..., ..., ..., ...]]
}]
});
The array is plot a 2D chart with additional information, it is not for a 3D chart or multidimensional plot.
Any help will be highly appreciated.
You need to change the array of array to array of object
series: [{
data: [
{x:0, y:29.9, z:0.21},
Then you can refer to z using this.point.z
formatter: function() {
return '<b>' + this.series.name + '</b><br>' +
'X: ' + this.x + ' - ' +
'Y: ' + this.y + '<br>'+
'Z: ' + this.point.z;
}
Edit
To change the data :
data.forEach(point => {
var coords = {
x: point[0],
y: point[1],
z: point[2]
};
parsedData.push(coords);
});
Updated Fiddle
please find the attached fiddle to render 3d data using hightchart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 200,
viewDistance: 5,
frame: {
bottom: {
size: 1,
color: 'rgba(0,0,0,0.05)'
}
}
}
},
tooltip: {
shared: false,
headerFormat: '<b>{series.name}</b><br>',
valueDecimals: 2,
formatter: function() {
return '<b>' + this.series.name + '</b><br>' +
'X: ' + this.x + ' - ' +
'Y: ' + this.y + '<br>' +
'Z: ' + this.point.z;
}
},
title: {
text: 'Chart with rotation on angles demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
series: [{
data: [
[0, 29.9, 0.21],
[1.2, 71.5, 0.25],
[2, 59.9, 0.61],
[3, 39.9, 0.11],
]
}]
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="height: 400px"></div>
<div id="sliders">
<table>
<tr>
<td>Alpha Angle</td>
<td><input id="alpha" type="range" min="0" max="45" value="15" /> <span id="alpha-value" class="value"></span></td>
</tr>
<tr>
<td>Beta Angle</td>
<td><input id="beta" type="range" min="-45" max="45" value="15" /> <span id="beta-value" class="value"></span></td>
</tr>
<tr>
<td>Depth</td>
<td><input id="depth" type="range" min="20" max="100" value="50" /> <span id="depth-value" class="value"></span></td>
</tr>
</table>
</div>
let me know if it helps.
Thanks :)
#Core972 thanks for the help... This is how I figured the indexation of the array to be able for the tooltip. #Murtaza thanks as well for the interest.
I set a loop to index the series and when x and y match, the additional values gets assign to a, b, c and d local variables.
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
valueDecimals: 2,
formatter: function() {
var a, b, c, d;
for (var i = 0; i < series.length; i++){
if( (series[i][0] === this.x) && series[i][1] === this.y)
{
a = series[i][2];
b = series[i][3];
c = series[i][4];
d = series[i][5];
break;
}
}
return this.series.name + '<br>'
+ 'x:' + x + ' y:' + y + '<br>'
+ 'a:' + a + '<br>'
+ 'b:' + b + '<br>'
+ 'c:' + c + '<br>'
+ 'd:' + d + '<br>'
}
},
I have a tooltip setting as below in JS
function createDashboard4() {
var json_results = getData('http://localhost:9999/countcarbytype')
data_results = []
var Header = ['car Type', 'count', 'region',{'type': 'string', 'role': 'tooltip', 'p': {'html': true}}];
data_results.push(Header)
for (var i = 0; i < json_results.length; i++) {
var value = json_results[i];
var URL = ""+value["imageURL"][0]
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))
}
console.log(data_results)
var data = google.visualization.arrayToDataTable(data_results);
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'region'
}
});
// Define a table visualization
var table = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart4',
'options': { 'height': 400, 'width': 500, 'title': 'Count of cars by Model Type', 'legend': 'none','tooltip': { isHtml: true } },
'view': { 'columns': [0, 1] }
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the string filter to affect the table contents
bind(stringFilter, table).
// Draw the dashboard
draw(data);
return stringFilter;
}
google.setOnLoadCallback(drawVisualization);
I did an implementation of createCustomHTMLContent
function createCustomHTMLContent(imageURL, title, totalCount, region) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + imageURL + '" style="width:75px;height:50px"><br/>' +
'<table class="medals_layout">' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + title + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalCount + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + region + '</b></td>' + '</tr>' + '</table>' + '</div>';
}
However its giving me an error Uncaught Error: Row 0 has 3 columns, but must have 4. I am sure i already followed the procedure to add in a HTML tool tip.
What did i do wrong?
EDIT 1:
Sample data:
[{"_id":{"title":"Mercedes Benz C Class 220 CDI Elegance AT (2009) in Mumbai","region":"Mumbai"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27"]},{"_id":{"title":"Mercedes Benz C Class 220 CDI Sport (2012) in Coimbatore","region":"Coimbatore"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27"]}
closing bracket of the array is out of place...
change this...
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))
to this...
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"])]);
EDIT
also need to add the tooltip column to the chart view...
change...
'view': { 'columns': [0, 1] }
to...
'view': { 'columns': [0, 1, 3] }
I'm trying to enable tooltips for Flot for Wordpress and am having problems with it when I add in a certain function and I need this to work from what I've tried to decipher onnline.
I downloaded the latest version of tooltips for flot charts and loaded the script when the plugin is loaded.
The chart I have create loads perfect when the following js code is not in the code or when the function is empty like below too.
Can anyone tell me what's wrong with the code that is stopping my chart appearing?
Cheers in advance, Alan.
This is code I believe I need to make the tooltips work
function showTooltip(x, y, contents) {
$("<div id="tooltip">" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 20,
border: "2px solid #4572A7",
padding: "2px",
size: "10",
"background-color": "#fff",
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
This is what works when I remove the inside of the code
function showTooltip(x, y, contents) {
position: "absolute"
}
Here full code below:
echo ' <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.resize.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/excanvas.min.js"></script>
<link href="' . plugins_url( $path ) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css">
<div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div>
';
echo '
<script language="javascript" type="text/javascript" id="source">
var lie_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_lie'] . '],';
}
echo ' ];
var options_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_options'] . '],';
}
echo ' ];
var context_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_context'] . '],';
}
echo ' ];
var decide_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_decide'] . '],';
}
echo ' ];
var dataset = [
{
label: "Lie",
data: lie_results
}, {
label: "Context",
data: context_results
}, {
label: "Options",
data: options_results
},{
label: "Decide",
data: decide_results
}
];
var options = {
xaxis: { mode: "time", tickSize: [2, "month"] },
yaxes: [{ min: ' .$min_count . ', max: ' .$max_count . ' },{},{},{}],
points: { show: true, symbol: "circle", fill: true },
lines: { show: true, },
legend: { noColumns: 0, labelFormatter: function (label, series) { return "<font color=\"white\">" + label + "</font>";}, backgroundColor: "#000", backgroundOpacity: 0.9, labelBoxBorderColor: "#000000", position: "nw"},
grid: { hoverable: true, mouseActiveRadius: 8 }
};
jQuery(document).ready(function($){
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,dataset,options);
$("#placeholder").UseTooltip();
}
);
var previousPoint = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
console.log(x+","+y)
showTooltip(item.pageX, item.pageY,
x + "<br>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, contents) {
$("<div id=\'tooltip\'>" + contents + "</div>").css({
position: "absolute",
display: "none",
top: y + 5,
left: x + 20,
border: "2px solid #4572A7",
padding: "2px",
size: "8",
opacity: 0.85,
background: "#4572A7",
}).appendTo("body").fadeIn(200);
};
</script></div>';
When using javascript, get in the habit of checking the debugger console for errors. This is invalid javascript:
$("<div id="tooltip">" + contents + "</div>")
It produces:
SyntaxError: Unexpected identifier
Why? Because it's not properly quoted.
Try:
"<div id=\"tooltip\">" + contents + "</div>"
The quotes around tooltip are escaped.
I'm trying to display the open, high, low, close in the line or area chart's tooltip. Right now, the data for the line and the area charts is being sent in a JSON array which looks like this
{timestamp, close}
Now for OHLC or candlestick charts this JSON changes to
{timestamp,open, high, low, close}
I've tried this method which only works for OHLC and candlestick.
tooltip: {
valueDecimals: 2,
useHTML: true,
formatter: function() {
/*
* tooltip formatter function
*
*/
var d = new Date(this.x);
var s = '';
if (chartGlobalOptions.range.indexOf("m") >= 0) {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';
} else {
s += '<b>' + Highcharts.dateFormat('%b %e, %Y [%H:%M]', this.x) + '</b><br />';
}
$.each(this.points, function(i, point) {
if (point.series.name.indexOf("Volume") >= 0) {
/*
* if the series is volume, then don't show the decimals
*
*/
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 0) + '</b><br />';
} else if (point.series.type == 'candlestick' || point.series.type == 'ohlc') {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' : ' + Highcharts.numberFormat(point.point.close, 3) + '</b><br />';
s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
'<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
'<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low +
'<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';
}
else {
s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 3) + '</b><br />';
}
});
return s;
},
shared: true
},
What modifications are needed to be done in order to display ohlc values in the tooltip of the line chart ? I've been trying to find a solution for quite some time without any success.
Thanks,
Maxx
EDIT
Here is the series option that i'm setting
series: [{
type: chartGlobalOptions.chartTypes.name,
name: $('#symbol-name').text(),
data: data.prices,
id: 'Price Axes',
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: data.volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits,
approximation: 'close'
}
}]
And here is the data that i'm getting from the server.
{"prices":[{"x":1387377184000,"y":1.05,"high":1.06,"low":1.05,"open":1.06,"close":1.05},{"x":1387377509000,"y":1.04,"high":1.06,"low":1.04,"open":1.05,"close":1.04},{"x":1387378295000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387379370000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387380217000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381181000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381324000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387382146000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387383229000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03}],
"volume":[[1387377184000,0],[1387377509000,35600],[1387378295000,0],[1387379370000,25300],[1387380217000,0],[1387381181000,0],[1387381324000,4500],[1387382146000,1700],[1387383229000,4000],[1387383788000,2600],[1387384004000,1000],[1387384218000,2900],[1387385045000,0],[1387385840000,10000],[1387386013000,100],[1387386627000,6200],[1387386981000,0],[1387387439000,2500],[1387387728000,2500],[1387387950000,0],[1387388920000,0],[1387389210000,500],[1387389890000,15500],[1387390124000,400],[1387390988000,11900],[1387391264000,4900],[1387391832000,0],[1387392803000,0],[1387393369000,6200],[1387393774000,200],[1387394744000,0],[1387395716000,0],[1387395904000,2800],[1387396334000,15000],[1387396689000,0],[1387397664000,0],[1387398328000,12300],[1387398706000,7000],[1387400379000,13000],[1387463638000,0],[1387464573000,46200],[1387465371000,4000],[1387465588000,0],[1387465948000,33000],[1387466607000,0],[1387466883000,11400],[1387468648000,13500],[1387470272000,12800],[1387470693000,0],[1387471718000,0],[1387472674000,0],[1387472742000,0],[1387473768000,100],[1387474795000,0],[1387475319000,29500],[1387475698000,99100],[1387475822000,14400],[1387476297000,3400]]}
Here is how i'm setting the data in the server
$this->price[] = array (
$eachRow[ "timestamp" ] * 1000 ,
$eachRow[ "close" ] * 1 ,
$eachRow[ "high" ] * 1 ,
$eachRow[ "low" ] * 1 ,
$eachRow[ "open" ] * 1 ,
$eachRow[ "close" ] * 1
) ;
return json_encode ( array (
"prices" => $this->resultArray[ "prices" ] ,
"volume" => $this->resultArray[ "volume" ] ));
And i do a var data = JSON.parse(data); at the very beginning just after i get the values from the server. Please let me know what is wrong with my program. I mean if i hardcode the same values directly in the data object i get the correct result.
You need to add that info to your points, for example:
series: [{
//type : 'ohlc',
name: 'AAPL Stock Price',
data: [{
x: 1367884800000,
y: 100,
high: 150,
low: 90,
close: 120,
open: 100
}, {
x: 1367984800000,
y: 120,
high: 170,
low: 120,
close: 160,
open: 120
}, {
x: 1368084800000,
y: 160,
high: 160,
low: 90,
close: 120,
open: 160
}]
}]
jsFiddle demo: http://jsfiddle.net/UTsT4/
Note: when you will have a lot of points, and dataGrouping will be used, point info (opten/high/low/close) will be lost. So that will only work with disabled dataGrouping.
I want to display multiple series Data in tooltip on every column
tooltip: {
formatter: function() {
return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
'<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
}
},
and Data
series: [{
showInLegend: false,
name: 'Total Click',
data: [3000,200,50,4000],
color: '#9D9D9D'
}, {
showInLegend: false,
name: 'Total View',
data: [100,2000,3000,4000],
color: '#D8D8D8'
}]
I am using like this but in tool tip only one series data is showing at a time.
I want to display Data like this (Total View:100 and Total Click:3000 )
please try using this code
updated DEMO
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
point.y +'<span>');
});
return s.join(' and ');
},
shared: true
},
You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.shared and then in formater iterate on each point.
If anybody looking for scatterplot, here is solution to show shared tooltip.
formatter: function(args) {
var this_point_index = this.series.data.indexOf( this.point );
var this_series_index = this.series.index;
var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
var that_series = args.chart.series[that_series_index];
var that_point = that_series.data[this_point_index];
return 'Client: ' + this.point.name +
'<br/>Client Health: ' + this.x +
'<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
'<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}
Jsfiddle link to Solution