I have already gone through this link
Chart.js - Doughnut show tooltips always?
I have implemented the code in the same way on my machine but the chart is not appearing.
The following is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="Chart.js"></script>
</head>
<body>
<div>
<canvas id="chart" width="200" height="200"/>
</div>
</body>
JS:
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870"
}
]
var options =
{
tooltipTemplate: "<%= value %>",
onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
},
tooltipEvents: [],
showTooltips: true
}
var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);
Please can anybody help me out with this trouble?
Or you could forget about jquery leave the <head></head as was in the code you posted and substitute
var context = $('#chart').get(0).getContext('2d');
with
var context = document.getElementById("chart").getContext("2d");
You just have to include this line in your html file to include jquery
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
In the code above seems to miss the ref to jquery between <head></head> tags
Related
The chart appears but it'completely empty when I change the type to bar, and completely black when I keep horizontalBar.
If I try to cut my data leaving jest few rows the horizontalBar chart appears empty too
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<style>
#wrapper {
height: 1000px;
}
</style>
<body>
<div id="wrapper">
<canvas id="chart"></canvas>
</div>
<SCRIPT LANGUAGE=javascript>
function makeChart(products)
var Counter = products.map(function(d) {
return d.Counter;
});
var CumVol = products.map(function(d) {
return +d.CumVol;
});
var chart = new Chart('chart', {
type: "horizontalBar",
options: {
maintainAspectRatio: true,
legend: {
display: false
}
},
data: {
labels: Counter,
datasets: [
{
data: CumVol
}
]
}
});
}
// Request data using D3
d3
.csv("http://localhost:8080/cumvol.csv")
.then(makeChart);
</SCRIPT>
</body></html>
Counter;CumVol
1;0.009999999776482582
2;0.029999999329447746
3;0.06999999843537807
4;0.12999999709427357
5;0.13999999687075615
6;0.14999999664723873
7;0.1599999964237213
Here few rows of my csv file cumvol
Trying with another file everything is showed properly (I mean changing the name of the columns):
Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
Pete Sampras,286,Male
Ivan Lendl,270,Male
Jimmy Connors,268,Male
Chris Evert,260,Female
Novak Djokovic,223,Male
The reason is that in the two CSV files, the fields are not separated by the same character (comma vs. semicolon).
You may consider using d3-csv instead of d3.csv.
Please also take a look at this answer: https://stackoverflow.com/a/27432751/2358409
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [
{x:0,y:3},{x:1,y:4},{x:2,y:2},{x:3,y:5},{x:4,y:7},{x:5,y:5},{x:6,y:7},{x:7,y:8},{x:8,y:4},{x:9,y:4}
],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
Thats my Code which works fine. (I need to use XHTML)
My Problem is, I want to use a for Loop for the X and Y Values. But I dont know how to put the Array in data.
I tried something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<script src="./OurScript.js" type="text/javascript"></script>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart1"></canvas>
<script type="text/javascript">//<![CDATA[
var xwerte = [0,1,2,3,4,5,6,7,8,9,10];
var ywerte = [3,4,2,5,7,5,7,8,4,4];
var c = [];
var Ergebnis1;
for(var i=0;i<ywerte.length;i++)
{
var obj ="{" + "x:" + xwerte[i] + "," + "y:" + ywerte[i] + "}";
c.push(obj);
}
// alert(c);
var x = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
datasets: [{
label: "Test",
data: [c],
}]
},
options: {
responsive: true
}
});
//]]> </script>
</body>
</html>
I tried with "alert" and I got the right result. But how should I put "c" in data?
I think I dont see a little (hopefully) mistake.
I need to use XHTML and just JavaScript.
On Snippet there is a error, but as I said, I am using XHTML and there is no Error.
Usually I set up my objects and arrays how I need them at first and then fill them with data.
Set it up:
var chartData = {
datasets: [{
label: 'Test',
data: []
}]
}
Fill it with data:
for (var i = 0; i < yWerte.length; i++) {
chartData.datasets[0].data.push(
{
x: xWerte[i], // You don't need "xWerte", you can simply use "i" when it's always the increment
y: yWerte[i]
}
)
}
You don't need your c to save your data, you can just use it like I did. But if you want c you can save the result of the for-loop in the empty array c and then use chartData.datasets[0].data = c.
Working example with live-preview: https://jsbin.com/copiwefaza/edit?js,output
I am trying to parse some XML data into JSON using Javascript/Jquery for use in a Highcharts project. Unfortunately, I can't figure out what is wrong with my code as it will not even read the XML. So far I have:
xml:
<Row>
<Category>data</Category>
<actual>data</actual>
</row>
....
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div id="container" style="height: 400px; width: 500px"></div>
<script type = "text/javascript" src = "jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type = "text/javascript" src = "test.js"></script>
</body>
</html>
Javascript:
$(document).ready(function(){
var globalData = new Array();
// $("h1").click(function(){
// Load the data from the XML file
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml', function(xml) {
alert("it works");
// Split the lines
var $xml = $(xml);
// push series
$xml.find('Row').each(function(i, row) {
var seriesOptions = {
Category: $(series).find('Category').text(),
Actual: $(series).find('Actual').text(),
};
// add it to the options
globalData.push(seriesOptions);
});
});
// });
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: globalData
}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
});
I believe my actual problem may be that my xml-parsing syntax is incorrect but running this on the development console in Firefox reveals no errors. Hopefully the experts here can spot the issue(s)
Thanks for your time.
One imediate problem that I can see is using local path
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml',
$.get first parameter is url that is location on network it could be something like $.get('http://localhost/xmls/xmloutput.xml,...
I want to update my cvs file through a mouse click on a graph, like I create a graph by reading a data from the same cvs file and when I get a graph what I want is that whenever I click on a point it make that point equal to zero on y-axis and update the corresponding value in a cvs file equal to 0.
Please can someone help. Here is my code which can take values from cvs file but is not updating but the same code works fine if I take hard coded series of an array.
Don't understand why isn't these plot options working.
<!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>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'},
title: { text: 'Output'},
xAxis: { categories: []},
yAxis: {
title: { text: 'Units'} },
plotOptions: {
series: { cursor: 'pointer',
point: {
events: { click: function() {
var y = this.item(y);
var x = this.x;
chart.series[0].data[x].update(y -= y);} } } },
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series); });
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can catch click point action http://api.highcharts.com/highcharts#plotOptions.series.point.events.click and then use get new value from csv by ajax and use update() function http://api.highcharts.com/highcharts#Point.update()
I am using swfupload plugin(http://demo.swfupload.org/Documentation/) to upload multiple files. I have the following swfupload settings object defined. Everything is working fine except the cursor doesn't change to 'hand' form. Here is the code:
var initialize_swfupload_for_image = function () {
if ($('#image-attach').length == 0){
return;
}
var url = $('#image-attach').data('url');
var params = $('#image-attach').data('params');
var buttonStyle = '.image-link {color: #FFF' +
';text-align: center'+
';} ' +
'.image-link:hover {color: #0FF' +
';} ';
var settings = {
upload_url:url,
flash_url: "<%= asset_path('swfupload/swfupload.swf') %>",
flash9_url: "<%= asset_path('swfupload/swfupload_fp9.swf') %>",
http_success:[ 200, 201, 204 ],
file_post_name:"file",
file_types: "*.jpg; *.gif; *.png; *.jpeg",
file_upload_limit:1,
file_queue_limit:0,
file_size_limit:"10 MB",
prevent_swf_caching:false,
custom_settings:{
progressTarget:"divImageProgressContainer",
cancelButtonId:"btnImageCancel"
},
button_placeholder_id:"image-attach",
button_text: "<span class='image-link'>Edit Photo</span>",
button_text_style: buttonStyle,
button_width: 90,
button_height: 20,
button_cursor:SWFUpload.CURSOR.HAND,
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
button_action:SWFUpload.BUTTON_ACTION.SELECT_FILE,
file_queued_handler:fileQueued,
file_queue_error_handler:fileQueueError,
file_dialog_complete_handler:fileDialogComplete,
upload_start_handler:uploadStartImage,
upload_error_handler:uploadError,
upload_progress_handler:uploadProgressImage,
upload_success_handler:uploadSuccessImage,
upload_complete_handler:uploadCompleteImage,
queue_complete_handler:uploadCompleteImage,
post_params:params
};
if (FlashDetect.versionAtLeast(9)) {
swf_image = new SWFUpload(settings);
} else {
//intentionally left blank
//TODO: javascript fallback when swfupload doesn't work
}
Any insights on why the cursor isn't changing on hovering over the object will be really helpful.
I have experienced the same problem. In my case the culprit was a 'px' that I had added accidentally to the button_width and button_height properties: button_width: "20px".
Your problem is obviously not the same one but it might be related in that you might have passed an invalid value to SWFUpload.
I copied your code and after cleaning it from the custom stuff I had no trouble getting the hand to show (didn't even change anything). Here's the code, tested with swfupload.swf 2.2.0.1 and swfupload.js 2.2.0 2009-03-25 (note that swfupload.swf and swfupload.js are in the same folder as the html file):
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" src="swfupload.js"></script>
<script type="text/javascript" charset="utf-8">
var init = function () {
var settings = {
upload_url:'url',
flash_url: "swfupload.swf",
http_success:[ 200, 201, 204 ],
file_post_name:"file",
file_types: "*.jpg; *.gif; *.png; *.jpeg",
file_upload_limit:1,
file_queue_limit:0,
file_size_limit:"10 MB",
prevent_swf_caching:false,
custom_settings:{
progressTarget:"divImageProgressContainer",
cancelButtonId:"btnImageCancel"
},
button_placeholder_id:"image-attach",
button_text: "<span class='image-link'>Edit Photo</span>",
button_width: 90,
button_height: 20,
button_cursor:SWFUpload.CURSOR.HAND,
button_window_mode:SWFUpload.WINDOW_MODE.TRANSPARENT,
button_action:SWFUpload.BUTTON_ACTION.SELECT_FILE,
};
swf_image = new SWFUpload(settings);
}
</script>
</head>
<body id="index" onload="init()">
<div style="width:100px;height:100px;background-color:blue">
<div id="image-attach"></div>
</div>
</body>
</html>
My guess remains that maybe SWFUpload doesn't like one of the parameters (e.g. the <%asset stuff). Hope this helps anyway.