Dojo 1.8 chart programmatic tutorial error - javascript

I have been going through some of the Dojo 1.8 tutorials, which are great, but have encountered a bug in the basic charting tutorial. The declarative example works fine, but the programmatic example has an error when it tries to render the chart.
Charting tutorial: http://dojotoolkit.org/documentation/tutorials/1.8/charting/
Working declarative example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-declarative.php
Errored programmatic example: http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/basic-programmatic.php
From my investigations it looks like the problem is with the code trying to use the 'IN' operand on a string, at which point it falls over.
The error in firebug looks like this: "TypeError: invalid 'in' operand t"
You'll need to download the non minified version of dojox/gfx/path.js and look at line 191 where you'll see this snippet of code:
if(t instanceof Array){
this._collectArgs(_12,t);
}else{
if("x" in t&&"y" in t){
_12.push(t.x,t.y);
}
}
I believe that the error is where the logic falls through into the "if("x" in t&&"y" in t)" line.
Any ideas?

it seems its an error in the tutorial, the 'labelOffset' is supposed to take a Number, but they are giving it a string, thus it fails, take the quotes away and it works, see this forum post.
Charting tutorial in 1.7 and 1.8

Right I've found the reason for the bug, but not the remedy.
Its the labelOffset value being a minus number, fancy that!
So if you change the "-20" to "20" it runs without error.
Full example including the minus value causing the bug...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Basic Programmatic Chart</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
</head>
<body>
<h1>Demo: Basic Programmatic Chart</h1>
<!-- create the chart -->
<div id="chartNode" style="width: 550px; height: 550px;"></div>
<!-- load dojo and provide config via data attribute -->
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>
<script>
// x and y coordinates used for easy understanding of where they should display
// Data represents website visits over a week period
chartData = [
{ x: 1, y: 19021 },
{ x: 1, y: 12837 },
{ x: 1, y: 12378 },
{ x: 1, y: 21882 },
{ x: 1, y: 17654 },
{ x: 1, y: 15833 },
{ x: 1, y: 16122 }
];
require([
// Require the basic 2d chart resource
"dojox/charting/Chart",
// Require the theme of our choosing
"dojox/charting/themes/Claro",
// Charting plugins:
//Require the Pie type of Plot
"dojox/charting/plot2d/Pie",
// Wait until the DOM is ready
"dojo/domReady!"
], function(Chart, theme, PiePlot){
// Create the chart within it's "holding" node
var pieChart = new Chart("chartNode");
// Set the theme
pieChart.setTheme(theme);
// Add the only/default plot
pieChart.addPlot("default", {
type: PiePlot, // our plot2d/Pie module reference as type value
radius: 200,
fontColor: "black",
labelOffset: "-20" <-- bug value here
});
// Add the series of data
pieChart.addSeries("January",chartData);
// Render the chart!
pieChart.render();
});
</script>
</body>
</html>
Just make the labelOffset value positive instead, and everything should run ok.
labelOffset: "20"

Related

Instead of creating new chart in ChartJS, the new updated chart keeps the old data and adds the new

I have been trying to solve this problem with ChartJS for a few days now, and I am completely stumped
My program shows the user a set of input elements they use to select data needing to be charted, plus a button that has an event to chart their data. The first chart works great. If they make a change to the data and click the button a second, third, or more time, all the data from the previous charts is plotted, PLUS their most recent selection.
It is behaving exactly like you might expect if the chart.destroy() object is not working, or perhaps would work if I created the chart object using a CONST (and could therefore add new data but not delete the beginning data).
I have tried all combinations of the browsers, chartjs and jquery libraries below:
Three different browsers:
• Chrome: Version 107.0.5304.121 (Official Build) (64-bit)
• Microsoft Edge: Version 107.0.1418.56 (Official build) (64-bit)
• Firefox: 107.0 64-bit
I have tried at least three different versions of Chart.js, including
• Versions 3.9.1
• 3.6.2
• 3.7.0
Jquery.js
• v3.6.1
• v1.11.1
Other things I have tried:
"use strict" (no luck)
In addition to destroying the chart object, removed the div containing the canvas, and appending it again.
using setTimeout() function before updating the chart after destroying it (because I thought maybe giving the destroy method more time might help)
type here
Software:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chart.js"></script>
<script type="text/javascript" src="js/dropdownLists.js"></script>
<script type="text/javascript" src="js/chartDataFunctions.js"></script>
<script type="text/javascript" src="js/chartJSFunctions.js"></script>
<body>
<div class = metadatasetup4" id = "buttons">
<button class="download" id="getchart" value="Get Chart">Chart</button>
<button class="download" id="downloadchart" value="Download">Download</button>
</div>
<div id = "bigchartdiv" class="bigchart">
<canvas id="myChart"></canvas>
</div>
</body>
<script>
$(window).on('load',function(){
//NOTE 1: In of my attempts to troubleshoot I tried strict mode (it didn't work)
//"use strict";
let data = {
labels: lbl,
datasets: [
]
};
let config = {
type: 'line',
data: data,
options: {
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min:0,
pointStyle:'circle',
},
y1: {
type: 'linear',
display: true,
position: 'right',
suggestedMax: 25,
min: 0,
pointStyle: 'cross',
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
},
}
}
};
// NOTE 2: The next line below, beginning with "var bigChartHTML =" was one of my later attempts to
// solve the problem. It didn't work, but my thought process was that if I removed
// the div containing the canvas, AND destroyed the chart object, that appending a "fresh"
// chart div to the body might be a work-around. This did not work.
var bigChartHTML = '<div id = "bigchartdiv" class="bigchart"><canvas id="myChart"></canvas></div>'
let ctx = document.getElementById('myChart').getContext('2d');
let bigChart = null;
// The getChartData() function below uses Ajax to populate various dropdown lists
// which enable the user to select the data is to be charted.
// There are no chartjs-related operations in getChartData()
getChartData();
$('#buttons').on('click','#getchart',function(){
if (bigChart!=null) {
//removeData(bigChart);
bigChart.destroy();
//bigChart = 1;
}
$("#bigchartdiv").empty(); //for this and next 2 lines, see NOTE 2 above
$("#bigchartdiv").remove();
$(bigChartHTML).insertAfter("#chartcontrols");
bigChart = new Chart(document.getElementById('myChart'),config);
//NOTE 3: I thought maybe bigChart.destroy() took time, so I tried
// using the setTimeout function to delay updating the chart
// (didn't work, but I left it in the code, anyway.)
setTimeout(function() {updateChart(bigChart)}, 2000);
//updateChart(bigChart);
});
// NOTE: The updateChart() function is actually included in "js/chartDataFunctions.js"
function updateChart(chart) {
/*
This section of the program reads the HTML elements then uses them
to make an Ajax request to sql server, and these become the
parameters for the newDataSet() function below.
*/
newDataset(chart,firstElement,newdataset,backgroundcolor,color);
}
// NOTE: The newDataSet() function is actually included in "js/chartJSFunctions.js"
// I show it here for brevity.
// It decides which axis (y or y1) to use to plot the datasets
// the dataset is pushed into the data, and chart.update() puts it in the chart object
function newDataset(chart,label,data,bgcolor='white',color='rgb(255,255,255)') {
var maxValue = Math.max(...data);
if (Number.isNaN(maxValue)) {
return;
}
if (maxValue == 0) {
return;
}
var axisID = 'y';
var ptStyle = 'circle';
//var pStyle = 'circle';
if (maxValue < 50) {
axisID = 'y1';
bgcolor = 'white';
//ptStyle = 'Star'
}
chart.data.datasets.push({
label:label,
yAxisID:axisID,
data:data,
borderColor:color,
backgroundColor:bgcolor,
//pointStyle:ptStyle
});
chart.update();
}
});
</script>
I found a work-around that solves my problem, but I still think this is a bug in ChartJS. Before calling bigChart.destroy(), I now do two things: First, reset the data object back to it's original value, and second, reset the config object back to it's original value, THEN call bigChart.destroy().
I think the destroy() method should handle that for me, but in my case, for whatever reason, it doesn't.
So, what I have is a work-around, not really a solution, but I'll take it.

Lightning Chart JS Blurry on Mac?

I am working on getting a basic LightningChart example up and running in electron, looking to write a cross-platform charting app for my industry.
I grabbed the demo HTML code from the website and plopped it into my app, here's how it looks.
As you can see the text is quite pixelated. Is this a Mac thing? Is it a chart setting?
It's not as bad in Windows:
Here's the code in my lightning.js source file.
// Replace the contents of this script tag if you want to test code from our examples:
// https://www.arction.com/lightningchart-js-interactive-examples/
// Extract required parts from LightningChartJS.
const {
lightningChart
} = lcjs //Note: #arction/lcjs is not needed here, when using IIFE assembly
// Create a XY Chart.
const chart = lightningChart().ChartXY({
// Set the chart into a div with id, 'target'.
// Chart's size will automatically adjust to div's size.
container: 'target'
})
.setTitle('My first chart') // Set chart title
const data = [
{ x: 0, y: 1.52 },
{ x: 1, y: 1.56 },
{ x: 2, y: 1.42 },
{ x: 3, y: 1.85 },
{ x: 4, y: 1.62 }
]
// Add a line series.
const lineSeries = chart.addLineSeries()
.setName('My data')
.add(data)
Literally taken right from their website.
It's inserted into this tag in the HTML
<!-- Create div to render the chart into-->
<div id="target" class="row content"></div>
Thanks in advance for the help!
Whelp, I figured it out, had to add this to the tag to enable support for high DPI devices. Jees!
<meta name="viewport" content="width=device-width, initial-scale=1.0">

How to get a shifting Plotly plot with JavaScript?

I am trying to create a flowing Plotly plot. However, I am not sure which Plotly parameters to use in order to achieve the result in the example image at the very bottom.
My Plotly is here: RandomSignalFlow
The HTML:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
The JS:
function rand() {
return Math.random();
}
Plotly.plot('graph', [{
y: [1,2,3].map(rand),
mode: 'lines',
line: {color: '#80CAF6'}
}]);
var cnt = 0;
var interval = setInterval(function() {
Plotly.extendTraces('graph', {
y: [[rand()]]
}, [0])
if(cnt === 100) clearInterval(interval);
}, 300);
So this would create the data flow, but the plot will be constantly compressing horizontally as the data flows in. I am after a tracking behaviour (as in the image bellow).
I tried using .shift() to crop the data's X and Y components but that did not work for some reason.
The project associated with the image is here.

CellView.highlight() breaking change?

My application uses Jointjs.
I recently upgraded from Jointjs v0.9.7 to v0.9.10 and since I did that cell highlighting does not seem to work. I simplified everything down to a test app and I can see that the highlight() function is called but the highlighted class is not set.
I put a simplified test page into a gist and a fiddle. It is also reproduced below in case it helps.
Has there been a breaking change? How is highlighting supposed to work in v0.9.10?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>
<body>
<div id="paper" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
<script>
//there is a problem with jointjs in the latest version of Chrome. This fixes it
SVGElement.prototype.getTransformToElement =
SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
var highlighted = false;
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
paper.on('cell:pointerclick', function (cellView) {
if (highlighted) {
cellView.unhighlight();
} else {
cellView.highlight();
}
highlighted = !highlighted
});
var element = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
attrs: { text: { text: 'my shape' } },
size: { height: 92.7051, width: 150 }
});
graph.addCell(element);
</script>
</body>
</html>
The default highlighter has changed in JointJS v0.9.10. When you highlight an element - an SVGPathElement with the joint-highlight-stroke class name that mimics the element shape is appended directly to the ElementView. This solves differences across the browsers with CSS property outline mostly unsupported for SVG Elements.
Available highlighters resides in the joint.highlighters namespace (stroke default, opacity, addClass for backwards compatibility).
In order to restore the original behaviour, please use the following.
// a highlighter definition
var myHighlighter = {
name: 'addClass',
options: {
className: 'highlighted'
}
}
// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);
Note that the new changes allow highlighting cellViews with multiple highlighters.
Demo
Sorry for inconveniences. The actual documentation for highlighters will appear in the JointJS repository ASAP.

Issues with dojox.charting and xDomain reference to dojo/dojox library

I have a web HTML page with some client-side JS codes based on dojox.charting. I don't have dojo library in my local web site (actually no web server). I use dojos' xDomain reference feature with src to google's hosting site like this:
<head>
...
<script type="text/javascript"
djConfig1="isDebug:true"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js">
</script>
<script type="text/javascript"
dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");
dojo.require("dojo.html");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.green");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.themes.MiamiNice");
dojo.require("dojox.charting.widget.Legend");
</script>
....
</head>
Here is the function to create curve chart, based on the codes in Dojo: Now With Drawing Tools.
function drawCurve(nodeChart, nodeLegend) {
var chart1 = new dc.Chart2D(nodeChart)
.setTheme(dc.themes.PlotKit.green)
.addPlot("default", {
type: "Default",
lines: true,
markers: true,
tension: 2
})
.addAxis("x", {
min: 0,
max: 6,
majorTick: { stroke: "black", length: 3 },
minorTick: { stroke: "gray", length: 3 }
})
.addAxis("y", {
vertical: true,
min: 0,
max: 10,
fixLower: "major",
fixUpper: "major",
majorTick: { stroke: "black", length: 3 },
minorTick: { stroke: "gray", length: 3 }
})
.addSeries("Series A", [
{ x: 0.5, y: 5 },
{ x: 1.5, y: 1.5 },
{ x: 2, y: 9 },
{ x: 5, y: 0.3 }
])
.addSeries("Series B", [
{ x: 0.3, y: 8 },
{ x: 4, y: 6, tooltip: "Custom tooltip"},
{ x: 5.5, y: 2 }
]);
var series = chart1.series;
var anim_a = new dc.action2d.Tooltip(chart1, "default");
var anim_c = new dc.action2d.Magnify(chart1, "default"); // not working
chart1.render();
var legendChart = new dc.widget.Legend(
{chart: chart1, horizontal: false}, nodeLegend.id);
}
My first question is that for the curve chart, the numbers along the y axis only displays 0 and 10. All the middle numbers 1 to 9 are not displayed. The values for x axis from 1 to 6 are visible. The original chart snapshot in the article does show y axis values as well, but the one on DojoToolKit Demos does show values along y axis. I am not sure what I missed in my codes. How can I enable displaying y axis values?
The next question is about the Magnify(). The DojoToolKit demo site's curve chart works fine but my chart's magnify feature does not work. I think this may be caused by xDomain reference. I may need to specify some specified js file from xDomain's dojox library. I am not sure which one I have to specify.
One thing I noticed is that my FireBug displays following errors after curve chart is drawn:
_4.fx.combine is not a function http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
_11.action is undefined http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8
I think those undefined errors may indicate I miss loading some dojox library files in my head section.
By the way, I dont' have a web server and I prefer to use dojo's xDomain reference option. In this way, I can edit a html file in any place and send it to other people. No need to download and install dojo source library.
I think I got the missing part:
dojo.require("dojo.fx");
When I added this line to my HTML's head setction see above, the animation part set by Mangify() is working. This is only for the case you set xDomain reference to dojox for dojox.charting library.
What I found this is by using Firebug to look at DojoToolKit's Event 2D web page. In the head section there is code:
<script src="http://../action2/Magnify.js" type="text/javascript"></script>
That page has debug enabled. As a result, in FireBug window, you will see the source codes of js in a nice layout. I saw three requirements, and one is for "dojo.fx". I tried to add this one in. Then no more errors and I can see animation of magnify effect when I move mouse over points in the curve of the chart.
One thing interesting about <script src=".."> is that if the js is xDomain referenced, the js source codes are displayed partially in one long long time. If you hav the dojo library installed on your web page, ie same domain, the dojo's source codes are displayed nicely.
Regarding the y axis values, I also find out easy way to display them (0 to 9):
.addAxis("y", {
vertical: true,
//min: 0
//max: 10
....
You can also comment out min only and leave max with 10 (0, 1, ... to 10). See DojoCampus.org for more detail information about axis settings.

Categories