Develop Reference

CanvasJs multiple charts created but only one chart is rendered

I want to dynamically create a CanvasJS chart depending on N amount of objects from a JSON array. If a JSON array has 3 objects, the web page should be able to display 3 charts.
<div class="container-fluid" id="spectraContainers">
</div>
Through the id "spectraContainers", I have a javascript function that dynamically creates a new div with a unique id. In that same function, a new chart is created with its unique id.
document.getElementById("chartContainers").innerHTML += '<div class="row"> <div id="chart_container_' + chartNumber + '" style="width: 100 %; height: 500px; ">Container </div></div>';
...
...
...
var chartContainerID = "chartcontainer_" + chartNumber;
var chart = new CanvasJS.Chart(chartContainerID, {
animationEnabled: true,
zoomEnabled: true,
theme: "light2",
title: {
text: chartTitle,
},
axisX: {
title: "x axis label",
gridDashType: "dash",
gridThickness: 2
},
axisY: {
title: "y axis label",
gridDashType: "dash",
gridThickness: 2
},
dataPointMaxWidth: 20,
dataPointWidth: 10,
data: [{
type: "column",
dataPoints: points
}]
});
chart.render();
I've verified that all values are valid. It seems like only ONE canvasJS chart (the third object from the json array) can be rendered in a page within this function. If I were to specifically generate a chart for index 0 or 1 in the json array, the specified index for the chart will be rendered.
I know it's possible to render multiple canvasJs charts by manually creating a new chart variable for each uniqueID. However, I would like to dynamically generate N-amount of charts. I am pretty new to javascript and would appreciate any advice!!

Using innerHTML replaces the contents of div element rather than appending child element. Try using append method.

How to change different tooltips for different datasets

This might be an easy question for someone to answer, but I am very new to Javascript and I am having trouble with this.
I'm creating a multigraph with charts.js and I want to set up 2 different tooltips for 2 different data sets.
I want the first line graph tooltip to display data point, data set label, and data label (example: 80 ml/pL 07/03/91), I want the second graph (flat dotted line) tooltip to display only the data point and data set label (example: 80 ml/pL).
I was able to create my own custom tooltip so it displays the data point, data set label, and data label, but I am having trouble creating a second custom tooltip for the next data set.
Fiddle here
tooltips: {
displayColors: false,
caretSize: 5,
bodyFontSize: 11,
callbacks: {
title: function() {},
label: function(tooltipItem, data) {
if(tooltipItem.datasetsIndex===0){
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]+ 'ml/pL'+ ' ' + data.labels[tooltipItem.index];
} else if (tooltipItem.datasetsIndex===1){
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]+ 'ml/pL';
}
}
},
},

SAP UI5 Gantt Chart color based on condition

How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?
Here's the code I am using to configure the sap.gantt.config.Shape :-
var oRectangle = new sap.gantt.config.Shape({
key: "Rectangle",
shapeDataName: "schedule",
shapeClassName: "sap.gantt.shape.Rectangle",
shapeProperties: {
time: "{startTime}",
endTime: "{endTime}",
height: 32,
fill: "green",
title: "{name}",
level: 0
}
});
The use case I am trying to address is :-
If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.
I have already tried expression binding like :
fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"
But that didn't give any result and filled the shape with the default BLACK color.
Is there some other way of getting it possible?
Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?

delete the attribute from your shape definition.
Before you define the oRectangle, put the following code segment:
sap.ui.define(["sap/gantt/shape/Rectangle"], function (Rectangle) {
var shapeRectangle = Rectangle.extend("sap.test.shapeRectangle");
shapeRectangle.prototype.getFill = function (oRawData) {
return oRawData.color;
};
return shapeRectangle;
}, true);
After that, you have to provide the property color to the order in your data model on the same level as startTime, endTime, etc...

Incorrect data point value in highcharts navigator series when extending min and max date

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});

Declaring a JS variable as a JS controlled HTML object

Situation:
I have a function that dumps input data into an HTML block element, eg:
function national(){
x=Number($('#nationalBudget').val());
a=x*2;
$('#one').text(a);}
Then it prints the input into any element with the id="one"
<span id="one"></span>
This is fine, but I would like to incorporate a jQuery Bargraph. The bargraph that I am using is fed by an array:
coolnessGraph = new Array(
[100000,'ROI w/ Local Spending'],
[200000,'ROI w/o Local Spending']
$("#ROIchart").jqBarGraph({
data: coolnessGraph, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#F8981D', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values
});
Problem:
I would like to replace the hard numbers (e.g. 100000 & 200000) in the array with the output that is dumped into my HTML object. I've tried the following:
var TestVariable = <span id="one"></span>;
coolnessGraph = new Array(
[TestVariable,'ROI w/ Local Spending'],
and just about every other iteration of syntax I could think up to make the process work. I also tried waiting to fire the graph after the first calculation has been run.
Is there an error my logic?...syntax?...any help would be greatly be appreciated.

If I'm reading correctly, you only need to pass $('#one').text(), or a variation of that, into the array. Am I missing something?