Why is my canvasjs chart not loading? - javascript

I have a problem. My chart doesn't render at all.
this is the JSON data that the service is returning.
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}][{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
here is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="jquery/jquery-1.11.1.js"></script>
<script src="jquery/jquery.canvasjs.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$.getJSON('data.php', function (result) {
var chart = new CanvasJS.Chart('Container', {
title:{
text: 'Results of Survey',
},
data: [
{
type: 'column',
dataPoints: result
}
]
});
chart.render();
});
});
</script>
</head>
<body>
<div id="Container" style="width: 800px; height: 380px;"></div>
</body>
</html>

Your data is malformed. If you are trying to do multi-series, see this doc:
http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/
This:
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
Should be:
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
You have repeating column labels though which is why I mentioned the docs above. Are you trying to do multiple series instead of a column chart?
Edit:
This code displays your data fine assuming you are doing a straight column chart:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

Related

Screen blank after loading highcharts-3d.js

I am using csvURL function to create a highchart. Below script works, however the moment I add highcharts-3d.js to create a 3D chart, the screen turns blank.
<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 src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
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>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I inserted this inside the head:
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
What do I have to do to create a 3D chart? Obviously, my method is not working.
By the way, sorry for the wide spaces. I'm limited to using a notepad, and the tab arrangements do not paste beautifully here.
Script tag has typos and added incorrectly. change this
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
to
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<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 src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
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>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

How can I get independent y-axes for two different series in a Highcharts chart

I appreciate any and all help as I am very new to JS. I am trying to make a chart with 2 lines that have independent y-axes ranges so that one line doesn't look so flat. The data is from a CSV. The graphs are here: http://achouman-com.stackstaging.com/tester2-highcharts.html
This is my 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>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="/Highstock-6.1.0/code/js/highcharts.js"></script>
<script src="/Highstock-6.1.0/code/js/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
data: {
csvURL: 'http://achouman-com.stackstaging.com/example.csv'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
max: 800,
title: {
text: 'Price (Dollars)'
}
}
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The CSV looks like this. It's example data. The real data is millions of rows, so I can't hardcode the data in the code.
Index (xaxis),Dollars,Algorithm out
1,3,300
2,4.3,257
3,2.1,357
4,4.8,368
5,3.4,469
6,2.3,464
7,3.2,358
8,2.5,357
9,2.4,678
10,2.8,457
11,3.7,468
12,3.6,236
13,3.5,347

DIV to onclick event

How can I make the second DIV into an on click event? I have both of them displaying right now. I want to display one then when you click it displays the second one and back and forth.
I have never used HTML or JavaScript before so bear with me.
<html>
<head>
<DIV class="container"><HGROUP>
<H1>University of Illinois Hospital and Health Sciences</H1>
<H2>Storage Availability Charts and Graphs</H2></HGROUP><NAV
class="navbar"></div>
<DIV class="container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Storage', 'Terabytes'],
['Raw', 95],
['Usable', 34],
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'EEI VNX5700',
pieStartAngle: 100,
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</div>
<DIV class="container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Unallocated', 'Used', 'Free'],
['Cerner fast pool', 1000, 400],
['General fast pool', 1170, 460],
['Raid', 970, 644]
]);
var options = {
title: 'Unallocated',
vAxis: {title: 'Pools', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</div>
<body>
<div id="piechart" style="width: 700px; height: 400px;"></div>
</body>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</head>
</html>
If you want them to switch visibilities you should give them each a seperate id.
Then you will need to use javascript (jquery is an easy way to work with javascript)
The jquery code would look something like this
$('#div1').click(function(){
$('#div2').show();
$('#div1').hide();
});
$('#div2').click(function(){
$('#div1').show();
$('#div2').hide();
});
To use jquery get the library here: http://jquery.com/
If you don't want to use jquery here are simple show/hide functions:
<script>
function show(id) {
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='block';
}
return false;
}
function hide(id) {
if(document.getElementById(id).style.display=='block') {
document.getElementById(id).style.display='none';
}
return false;
}
</script>
then just add those to your div onclick: <div id='div1' onclick='show("div2");hide("div1")'></div>
Ok if you want a div to be hidden when the page loads you can do (in jquery) $('#idOfDiv').hide() then to get the div to toggle you can do a $('#idOfDiv').toggle() Now if you want something to be an onClick even all you have to do is put it all in a
$("#secondDiv").hide();
$( "#firstDiv" ).click(function() {
$('#secondDiv').toggle();
});
$( "#secondDiv" ).click(function() {
$('#firstDiv').toggle();
});
example: http://jsfiddle.net/AFPT2/1/

JQPlot Plugin Size

In this code I am using jqplot plugin which I took from this site http://www.jqplot.com/deploy/dist/examples/line-charts.html. What I want is to change the size of height and width. How to do this ?
My code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQPlot</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px; height:250px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var line2 = [['23-May-08', 323], ['20-Jun-08', 222], ['25-Jul-08', 123], ['22-Aug-08', 43],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 544],
['23-Jan-09', 654], ['20-Feb-09', 234], ['20-Mar-09', 543], ['24-Apr-09', 323]];
var plot1 = $.jqplot('chart1', [line1, line2], {
title: 'Data Point Highlighting',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 300
},
cursor: {
show: false
}
});
});
</script>
</body>
</html>
The size of the plot drawn depends of the dimensions of the container DIV, just change the CSS for width and height (instead of 600px and 250px).
<div id="chart1" style="width:600px; height:250px;"></div>
The width and height need to be specified for the container div itself.
Check out the source of the example.
<div id="chart1" style="height:300px; width:500px;"></div>

Changing the width of the y-axis label area in jqplot

Ok, I've got a bar chart.
And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.
I've tried changing the css, but it gets overidden by JS.
I tried scanning thru the jqplot library to find out where it happens but i got lost.
Any ideas? is there just an option i can set?
You can see here:
Here is my html file:
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
$(function() {
graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
});
function graph_me(div_name, labels_in, values_in) {
var labels = labels_in.reverse();
var values = values_in.reverse();
$.jqplot(div_name, [values], {
series:[{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
varyBarColor: true
}
}
],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: labels,
tickOptions: {
showGridline: false,
markSize: 0
}
}
}
});
}
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>
You could try this in your css:
.jqplot-yaxis {
margin-left:-80px !important;
width:80px !important;
}

Categories