I am going through all of our PHP (V7.3) pages and upgrading all charts to the latest version.
On some pages where the chart data is part of a sub page or created from an AJAX call I get this error all the time
Uncaught TypeError: Cannot read property 'axis' of undefined
at vo.parse (chart3.min.js:13)
at vo._insertElements (chart3.min.js:13)
at vo._resyncElements (chart3.min.js:13)
at vo.buildOrUpdateElements (chart3.min.js:13)
at oo.update (chart3.min.js:13)
at new oo (chart3.min.js:13)
at eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:18:19)
at eval (<anonymous>)
at jquery.min.js:2
at Function.globalEval (jquery.min.js:2)
My code has changed from:
<canvas id='chart_canvas' width='620' height='300'></canvas>
<script>
var data = <?php echo json_encode($data); ?>;
var ctx = document.getElementById("chart_canvas").getContext("2d");
var myNewChart = new Chart(ctx).Line(data, {
pointHitDetectionRadius: 5
});
</script>
to this:
<canvas id='chart_canvas' width='620' height='300'></canvas>
<script>
var data = <?php echo json_encode($data); ?>;
const config = {
type: 'line',
data,
options: {
responsive: true,
}
};
var myChart = new Chart(
document.getElementById('chart_canvas'),
config
);
</script>
The data varialble is:
var data = {"labels":["2021-07-17","2021-07-18","2021-07-19","2021-07-20","2021-07-21","2021-07-22","2021-07-23","2021-07-24","2021-07-25","2021-07-26","2021-07-27","2021-07-28","2021-07-29","2021-07-30","2021-07-31","2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06","2021-08-07","2021-08-08","2021-08-09","2021-08-10","2021-08-11","2021-08-12","2021-08-13","2021-08-14","2021-08-15","2021-08-16","2021-08-17"],"datasets":[{"label":"Jobs Created","fillColor":"rgba(26, 188, 156,0.2)","strokeColor":"rgba(26, 188, 156,1)","pointColor":"rgba(26, 188, 156,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(26, 188, 156,1)","data":{"2021-08-17":"2"}}]};
I know the code is ok because I have tried it in https://playcode.io/
I just cannot understand the error message and there is nothing i have found on Google, appreciate any pointers.
In your data you only have 1 item. This will be very hard to see on the chart because there will be no line to draw between items.
Adding to that, the data in your datasets should be formatted like this.
It looks like you are trying to combine Primitive and Object styles when you should be using either one. Because you are already giving labels, you only need to give the data like this: [10, 20, 30]
you can also give the data like you currently are giving. You just don't need the labels.
found the culprit - prototype-1.7.js
removed it and all works perfectly
Related
`<script>
Chart.pluginService.register({
beforeDraw: function (chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = chart.config.options.elements.center.text,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
// chart1
var data = {
labels: ["Red", "Blue"],
datasets: [{
data: [50],
backgroundColor: ["#BEFF60", "#36A2EB"],
hoverBackgroundColor: ["#BEFF60", "#36A2EB"]
}]
};
var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
type: 'doughnut',
data: data,
options: {
title: {
display: true,
text: 'OEE Chart'
},
elements: {
center: {
text: parseInt(<?php echo json_encode($OEE); ?>) + '%', //set as you wish
}
},
cutout Percentage: 85,
legend: {
display: false
}
}
});
</script>
`
I have few questions here.
I have already created Plugins Service and doughnut chart code where I standardize everything including having a text in between the doughnut chart - how can I small changes the Plugin Service so that where I can add picture send towards backwards and bring the text infront?? - Is it possible this same Plugin Service used after modification answers given by anyone where for other charts but dont want to add the picture and text as other charts will be either bar graph or line chart etc... can anyone guide me with these kind of things. I'm not sure how to do it.. any advice??
If lets say I want to do chartsJS for stepped line chart how is that?? I tried using the same Plugin Service but failed. if if each type of chart need to use different plugins I can do it... but the issue I will create their separate files and call them in PHP index folder (as the main file running the website but when I add the JavaScript link and add call the name from the JS file into the PHP index file failed. Hopefully someone can guide me or advice me on this
when i use the same PluginService(which is used for doughnut chart) i cannot show the results for barchart , line chart etc using the same PluginService when i pass <php json() file ?> from the database file i created to pass the data into data[] in chartJS
-dscsccsss\\\\\\
I've finally managed to get my php code working for my google charts column chart. When I run my php I get the following output
{"cols":[{"id":"id","label":"second","type":"number"},
{"id":"threads","label":"threads","type":"number"}],"rows":[{"c":[{"v":1},{"v":1411}]},
{"c":[{"v":2},{"v":1411}]},{"c":[{"v":3},{"v":1409}]},{"c":[{"v":4},{"v":1408}]},{"c":
[{"v":5},{"v":1407}]},{"c":[{"v":6},{"v":1408}]},{"c":[{"v":7},{"v":1408}]},{"c":[{"v":8},
{"v":1410}]},{"c":[{"v":9},{"v":1410}]},{"c":[{"v":10},{"v":1412}]},{"c":[{"v":11},
{"v":1415}]}]}
Using this other post as a guide, here, I believe that my output is correct. However I am not entirely sure since my column chart is still not being displayed, on my webapp.
This is the code I am using to show my chart
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 json = $.ajax({
url: 'databaseQuery.php',
dataType: 'json',
async: false
}).responseText;
var data = new google.visualization.DataTable(json);
var options = {
title: 'Active Threads',
is3D: 'false',
width: 800,
height: 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I have a table the displays fine, which is also getting its data from a mysql server and shows the same data the graph should just in a table.
I have been going over this code and can't seem to find the mistake. Can anyone point the mistake(s) out or suggest a better way of doing it? If the error is in my JSON, what should it look like for it to work properly?
Also the table from my database looks like this
id threads
1 1411
2 1411
3 1409
4 1408
5 1407
6 1408
7 1408
8 1410
9 1410
10 1412
11 1415
There's nothing wrong with your code as shown. I've just created a test page basically cut and paste from your markup and it worked perfectly.
I'd suggest you try replacing the ajax call with inline json initialisation and see if that works for you.
var json = {
"cols":[
{"id":"id","label":"second", "type":"number"},
{"id":"threads","label":"threads","type":"number"}
],
"rows":[
{"c":[{"v":1},{"v":1411}]},
{"c":[{"v":2},{"v":1411}]},
{"c":[{"v":3},{"v":1409}]},
{"c":[{"v":4},{"v":1408}]},
{"c":[{"v":5},{"v":1407}]},
{"c":[{"v":6},{"v":1408}]},
{"c":[{"v":7},{"v":1408}]},
{"c":[{"v":8},{"v":1410}]},
{"c":[{"v":9},{"v":1410}]},
{"c":[{"v":10},{"v":1412}]},
{"c":[{"v":11},{"v":1415}]}
]
};
var data = new google.visualization.DataTable(json);
If that works, then you'll at least have confirmed the problem is somewhere in the ajax call or the php backend.
One other thought: this may seem obvious but it's worth double checking that you do have an element on your page with the chart_div id?
<div id='chart_div'></div>
I am having problems plotting my pie chart using jqplot.
After getting my results from php i have converted it to json using json_encode. The output is
{"a":2,"b":1,"c":5,"d":650}
Now when i try to put these results into my javascript
<script class="code" type="text/javascript">
$(document).ready(function(){
// method 1
//var data1 = document.getElementById("dataArray").value;
//eval('data1 = '+data+';');
// method 2
var data1 = <?php echo json_encode($data); ?>;
var plot1 = jQuery.jqplot ('Chart', [data1],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
I've tried two methods, the first to put it inside a hidden field, and the second to retrieve straight from PHP. Both of which result in Uncaught. No plot target specified errors in my Chrome console.
What is it I am doing wrong here?
Thanks guys.
As Asad mentioned, my stupid mistake was that Chart was not specified as an element. So yeah if anyone else ever comes into the same problem, be sure to check that out. :)
I'm trying to read in values from a db using php (mySQL) then have them show on a graph in flot. I know the values are read in correctly and I'm not getting any errors but the graph won't show.
Little help?
Thanks in advance.
<?php
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
$graphdata[] = array( (int)$row[0], (int)$row[1] );
}
?>
/////
<div id="placeholder" style="width:600px;height:300px"></div>
<script language="javascript" type="text/javascript">
var dataset1 = <?php echo json_encode($graphdata);?>;
var data = [
{
label: "Random Values",
data: dataset1
}
];
var plotarea = $("#placeholder");
$.plot( plotarea , data);
</script>
The contents of your pastebin show that the JSON string you're outputting is invalid JSON.
var data = [{ label: "Random Values",data: dataset1}];
will validate if it's changed to:
var data = [{"label": "Random Values","data": "dataset1"}]
That's just an example, but I suspect that Flot is looking for a slightly different format, so you'll have to verify exactly what they're looking for against their documentation. I'm going through the same exercise right now with FusionCharts, so I'm feeling your pain. jsonlint.com is your friend on this one, output your JSON and verify it frequently. I'd also recommend that to initially get it working, start with just a string of JSON (even one that you copy from their examples) that you put right in your code. Get the chart working first, then work on getting your PHP to duplicate the example JSON string separately.
Try delaying creating the graph until the DOM is loaded:
jQuery(document).ready(function ($){
var plotarea = $("#placeholder");
$.plot( plotarea , data);
});
Hi I have posted two values for latitute and longitute to a php page using a form, then on the php page I am displaying a googlemap and want to use the two values i posted as the latitude and longitute to plot on the map. I think iv done everything right but it doesnt seem to pick up the values.any ideas? cheers!
<script type="text/javascript">
function initialize() {
var lat= "<?php echo $_POST['coordinates']; ?>";
var long= "<?php echo $_POST['coordinatestwo']; ?>";
var latlng = new google.maps.LatLng(lat,long);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Your current location!"
});
}
</script>
</head>
<body onLoad="initialize();">
long is a reserved word in JavaScript. Try lng (no 'o') as your variable name instead.
var lng= "<?php echo $_POST['coordinatestwo']; ?>";
If you view source in your browser, do you see the php values there? If not then there is something wrong with your form. We would need to see more code.
But chances are it's the long being a reserved word issue I mentioned above.
Don't use long as a variable name (it's a reserved word). Also, you don't need quotes around numeric values. Try this:
var lat = <?php echo floatval($_POST['coordinates']); ?>;
var lng = <?php echo floatval($_POST['coordinatestwo']); ?>;
EDIT: Tip - if you use a (good) editor with color highlighting and syntax checking for JavaScript, this is an error that would be highlighted (mine reports: "strict warning: long is a reserver identifier").
I have a working jsFiddle here:
http://jsfiddle.net/rcravens/RFHKd/
Mostly your code. I added the following:
A 'div' with an ID of map_canvas
A style to this div giving it width and height.
Included the script to load google maps.
Hope this helps.
Bob
#paul elliot: That doesn't look like all your code..? See this example to fill in the bits your code is missing: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html