Time Series aren't working - zingchart
I was trying to set up a Zingchart timeline series but it isn't working properly. The line is incorrect, the date doesn't get converted and the y axis shows also comepletely wrong entries.
Is there anyone who can see what I'm doing wrong?
Thanks a lot
<script>
jQuery(document).ready(function($) {
zingchart.render({
"id":"myChart2",
"adjustLayout": "true",
"scale-x":{
"transform":{
"type":"date",
"all":"%d.%m.%Y",
"item":{
"visible":"false"
}
},
"auto-fit":"true"
},
"data":{
"type":"line",
"title":{
"text":"Series Data Objects"
},
"series": [
{
"line-color":"#ff0000",
"values": [["825552000000","248.22"],["828057600000","248.08"],["830822400000","256.50"],["833500800000","255.54"],["835920000000","259.12"],["838771200000","238.70"],["841449600000","240.49"],["844041600000","241.09"],["846633600000","241.36"],["849312000000","253.61"],["851990400000","259.85"],["854668800000","293.11"],["857088000000","297.88"],["859420800000","308.32"],["862358400000","319.51"],["864950400000","332.99"],["867628800000","359.04"],["870307200000","367.30"],["872812800000","358.41"],["875577600000","362.73"],["878256000000","335.60"],["880675200000","338.64"],["883526400000","333.78"],["886118400000","347.69"],["888624000000","374.74"],["891302400000","414.51"],["893894400000","425.38"],["896400000000","455.20"],["899164800000","449.35"],["901843200000","444.80"],["904521600000","373.21"],["907113600000","331.78"],["909792000000","350.40"],["912384000000","361.39"],["915062400000","352.06"],["917568000000","339.32"],["919987200000","351.13"],["922838400000","373.90"],["925430400000","400.78"],["928108800000","403.39"],["930700800000","411.89"],["933292800000","412.81"],["936057600000","423.43"],["938649600000","432.41"],["941328000000","434.90"],["943920000000","460.06"],["946512000000","488.37"],["949276800000","526.76"],["951782400000","546.37"],["954460800000","552.29"],["957052800000","550.44"],["959731200000","557.94"],["962323200000","565.27"],["965001600000","580.34"],["967680000000","592.46"],["970185600000","593.84"],["972950400000","586.73"],["975542400000","587.99"],["978220800000","574.41"],["980899200000","591.06"],["983318400000","584.99"],["985910400000","556.95"],["988588800000","564.08"],["991267200000","573.05"],["993772800000","562.91"],["996537600000","524.32"],["999216000000","497.57"],["1001635200000","397.34"],["1004486400000","411.61"],["1007078400000","428.81"],["1009756800000","442.50"],["1012435200000","429.54"],["1014854400000","421.18"],["1017532800000","450.53"],["1020124800000","472.24"],["1022803200000","498.40"],["1025222400000","468.36"],["1028073600000","429.21"],["1030752000000","421.15"],["1033344000000","377.54"],["1036022400000","358.54"],["1038528000000","377.31"],["1041292800000","367.59"],["1043971200000","345.28"],["1046390400000","333.31"],["1049068800000","339.64"],["1051660800000","380.18"],["1054252800000","393.14"],["1056931200000","400.88"],["1059609600000","413.35"],["1062115200000","442.21"],["1064880000000","452.48"],["1067558400000","477.75"],["1069977600000","481.48"],["1072742400000","489.31"],["1075420800000","526.61"],["1078012800000","540.60"],["1080691200000","535.48"],["1083283200000","562.73"],["1085702400000","566.69"],["1088553600000","595.42"],["1091145600000","582.42"],["1093910400000","575.98"],["1096502400000","584.63"],["1099008000000","574.38"],["1101772800000","582.98"],["1104451200000","603.91"],["1107129600000","635.69"],["1109548800000","666.30"],["1112227200000","676.75"],["1114732800000","659.07"],["1117497600000","673.11"],["1120089600000","694.10"],["1122595200000","740.74"],["1125446400000","756.92"],["1128038400000","780.60"],["1130716800000","756.80"],["1133308800000","752.26"],["1135900800000","769.52"],["1138665600000","820.12"],["1141084800000","865.22"],["1143763200000","889.63"],["1146182400000","936.09"],["1149033600000","894.71"],["1151625600000","877.78"],["1154304000000","895.81"],["1156982400000","925.75"],["1159488000000","949.28"],["1162252800000","992.61"],["1164844800000","1021.22"],["1167350400000","1089.17"],["1170201600000","1164.23"],["1172620800000","1156.02"],["1175212800000","1195.74"],["1177891200000","1293.23"],["1180569600000","1339.80"],["1183075200000","1349.97"],["1185840000000","1359.15"],["1188518400000","1330.35"],["1190937600000","1336.06"],["1193788800000","1402.84"],["1196380800000","1187.53"],["1198800000000","1302.28"],["1201737600000","1125.40"],["1204243200000","1140.95"],["1206921600000","1094.89"],["1209513600000","1142.30"],["1212105600000","1145.74"],["1214784000000","1095.27"],["1217462400000","1033.11"],["1219968000000","1055.30"],["1222732800000","931.33"],["1225411200000","708.98"],["1227744000000","621.59"],["1230595200000","616.87"],["1233273600000","603.03"],["1235692800000","552.63"],["1238457600000","539.30"],["1241049600000","638.71"],["1243555200000","684.26"],["1246320000000","695.27"],["1248998400000","742.61"],["1251676800000","791.45"],["1254268800000","813.03"],["1256860800000","796.28"],["1259539200000","773.35"],["1262131200000","802.69"],["1264723200000","839.72"],["1267142400000","823.41"],["1269993600000","893.27"],["1272585600000","918.51"],["1275264000000","887.80"],["1277856000000","877.87"],["1280448000000","905.59"],["1283212800000","917.29"],["1285804800000","950.25"],["1288310400000","997.97"],["1291075200000","1010.56"],["1293667200000","1091.59"],["1296432000000","1108.11"],["1298851200000","1125.12"],["1301529600000","1139.23"],["1304035200000","1172.38"],["1306800000000","1159.70"],["1309392000000","1079.62"],["1311897600000","992.65"],["1314748800000","910.04"],["1317340800000","842.27"],["1320019200000","865.83"],["1322611200000","835.59"],["1325203200000","827.32"],["1327968000000","889.40"],["1330473600000","939.11"],["1333065600000","947.00"],["1335744000000","952.62"],["1338422400000","890.97"],["1340928000000","892.26"],["1343692800000","900.41"],["1346371200000","892.48"],["1348790400000","918.34"],["1351641600000","917.96"],["1354233600000","908.92"],["1356652800000","934.70"],["1359590400000","992.75"],["1362009600000","1018.12"],["1364428800000","1029.32"],["1367280000000","1034.59"],["1369958400000","1048.29"],["1372377600000","1036.88"],["1375228800000","1063.80"],["1377820800000","1109.08"],["1380499200000","1140.76"],["1383177600000","1180.44"],["1385683200000","1203.78"],["1388361600000","1227.91"],["1391040000000","1266.04"],["1393545600000","1277.03"],["1396224000000","1316.99"],["1398816000000","1335.68"],["1401408000000","1326.99"],["1404086400000","1335.88"],["1406764800000","1316.64"],["1409270400000","1307.37"],["1412035200000","1264.57"],["1414713600000","1260.85"],["1417132800000","1286.13"],["1419897600000","1270.55"],["1422576000000","1149.42"],["1424995200000","1263.92"],["1427760000000","1321.38"],["1430352000000","1344.94"],["1432857600000","1355.69"],["1435622400000","1305.78"],["1438300800000","1330.99"],["1440979200000","1317.52"],["1443571200000","1296.63"],["1446163200000","1337.35"],["1448841600000","1397.59"],["1451433600000","1423.16"],["1454025600000","1358.41"],["1456704000000","1397.02"],["1459382400000","1477.83"],["1461888000000","1510.31"],["1464652800000","1584.98"],["1467244800000","1541.25"],["1469750400000","1633.75"],["1472601600000","1755.57"],["1475193600000","1781.34"],["1477872000000","1763.37"],["1480377600000","1730.74"],["1483056000000","1799.97"],["1485820800000","1888.34"],["1488240000000","2006.37"],["1490918400000","2073.79"],["1493337600000","2197.66"],["1496188800000","2250.52"],["1498780800000","2256.34"],["1501459200000","2294.53"],["1504137600000","2264.10"],["1506643200000","2350.68"],["1509062400000","2407.96"],["1512000000000","2473.35"],["1514505600000","2539.02"],["1517356800000","2590.74"],["1519776000000","2530.56"],["1521417600000","2502.57"]]
},
]
}
});
});
</script>
<div id="myChart2" class="chart"></div>
JSFiddle
The reason the chart line is not displaying correctly is because of the way you formatted your values. You have your values in quotation marks like this: ["825552000000","248.22"].
The way the values should be formatted is WITHOUT quotation marks. The values should be formatted as such: [825552000000,248.22].
Once you remove the quotation marks on all of your values the chart line will display correctly.
Hope this helps.
Related
How to render on the same page both asciimath and TeX using mathjax
My usage scenario is to have asciimath as the primary formula engine. However, for some cases I might need more powerful features which I can find only using TeX. Is there a way to have different open/close clauses one for the regular ascii math (say ` ) and one for TeX using, say $( and )$ ? So I want to have mix of ascii math and TeX formulae on the same page.
Sure, you can use both!
First simply configure both (assuming MathJax 3):
<script>
MathJax = {
loader: { load: ["input/asciimath", "[tex]/html"] },
tex: {
packages: { "[+]": ["html"] },
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"]
]
},
asciimath: {
delimiters: [["`", "`"]]
}
};
</script>
Then use the delimiters to signal to MathJax if you want AsciiMath or Latex:
<div>
$$\sum_{n = 100}^{1000}\left(\frac{10\sqrt{n}}{n}\right)$$
</div>
<div>
`sum_(n = 100)^(1000)(frac(10sqrt(n))(n))`
</div>
Remember that AsciiMath requires you to determine whether you want display style or not for the entire document with setting displaystyle: false / true, you can't have both, side by side, as you can for Latex:
asciimath: {
displaystyle: true
}
Code sandbox: https://codesandbox.io/s/mathjax-3-0ve5d
AmChart export change font color on export
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo
Show attribute in search result template only if contains highlighted matches
I have several attributes set as attributesToRetrieve. In my template though only some of these are displayed. Roughly something like this:
<div id="results">
<div>{{_highlightResult.attr1.value}}</div>
<div>{{_highlightResult.attr2.value}}</div>
<div>{{_highlightResult.attr3.value}}</div>
</div>
This way the attributes will be rendered in any case, and highlighted if they contain a matched word.
Now I'd like to add another section where all other attributes can be displayed but only if they contain a matched word to be highlighted, something like:
<div id="results">
<div>{{_highlightResult.attr_1.value}}</div>
<div>{{_highlightResult.attr_2.value}}</div>
<div>{{_highlightResult.attr_3.value}}</div>
<!--
The following div will be rendered and displayed only
if any of these special attributes contain an highlighted word.
Only an attribute containing a matched word will be displayed
-->
<div class="other-attr">
{{_highlightResult.Long_SpecialAttr_1.value}}
{{_highlightResult.SpecialAttr_2.value}}
{{_highlightResult.SpecialAttr_3.value}}
</div>
</div>
As mentioned in the comment, this section will be rendered and displayed only if any of these special attributes contain an highlighted word, also only an attribute containing a matched word will be displayed.
Plus as you can see there is a Long_SpecialAttr_1, it's a long text attribute, wich I'd like to have it displayed as a snippeted attribute.
To give a better idea (maybe) what I'm trying to achieve for this additional section is something like the one Google display below every search results, a sort of text blob text with ellipsis containing the marked words of these attributes.
Is this possible? I'm using algolia instasearch.js, thank you!
UPDATE
Thanks to #Jerska for his answer, unfortunately a small bit of code wasn't working in my case, specifically:
['highlight', 'snippet'].forEach(function (type) {
data['_' + type + 'Result'].forEach(function (elt) {
elt.display = elt.matchLevel !== 'none';
});
});
giving me an error in the console stating data._snippetResult.forEach() is undefined. So I modified that bit with this:
for(var el in d._snippetResult)
{
// create new property with bool value, true if not "none"
d._snippetResult[el].display = d._snippetResult[el].matchLevel !== 'none';
};
First of all, just to clarify the settings of your index before going forward, Algolia also highlights the attributes in attributesToSnippet.
Also, to have an ellipsis on the attributes you snippet, you can set snippetEllipsisText.
So you might want to use these settings in your index:
attributesToHighlight: ['attr_1', 'attr_2', 'attr_3', 'SpecialAttr_2', 'SpecialAttr_3'],
attributesToSnippet: ['Long_SpecialAttr_1:3'], // Snippet should contain max 3 words
snippetEllipsisText: '…' // This is the utf-8 "Horizontal ellipsis" character
On the front-end side, in instantsearch.js you can use the transformData parameter on almost any widget to be able to access and/or modify the data passed to the template.
In this specific example, we'll want to have a look at transformData.item on the hits widget.
The first step would be to log the data:
search.addWidget(
instantsearch.widgets.hits({
transformData: {
item: function (data) {
console.log(data);
return data;
}
}
})
);
This will allow you to see that kind of response:
_highlightResult: {
attr_1: {
value: 'lorem <em>ipsum</em> dolor <em>sit</em>',
matchLevel: 'full',
matchedWords: ['ipsum', 'sit']
},
attr_2: {
value: 'lorem <em>ipsum</em> dolor',
matchLevel: 'partial',
matchedWords: ['ipsum']
},
attr_3: {
value: 'lorem',
matchLevel: 'none',
matchedWords: []
},
// ...
},
_snippetResult: {
Long_SpecialAttr_1: {
value: 'lorem <em>ipsum</em> dolor …', // Let's assume Long_SpecialAttr_1 was equal to 'lorem ipsum dolor sit'
matchLevel: 'full'
}
}
Unfortunately here, the API is a bit inconsistent since as you can see, snippeted attributes don't have the matchedWords attribute that highlighted attributes have. You can choose to set it both in attributesToSnippet and attributesToHighlight if you really want the info.
However, for your use-case, we just need matchLevel. What we want, is to display elements only if matchLevel !== 'none'. Unfortunately, Hogan.js, the underlying template engine of instantsearch.js doesn't allow for much flexibility, so you can't just put this comparison in your template.
A solution could be to precompute these conditions inside the transformData:
transformData: {
item: function (data) {
['highlight', 'snippet'].forEach(function (type) {
var group = data['_' + type + 'Result'];
for (var attr in group) {
if (!group.hasOwnProperty(attr)) continue;
var elt = group[attr];
elt.display = elt.matchLevel !== 'none';
};
});
data.displaySpecial = false ||
data._snippetResult.Long_SpecialAttr_1.display ||
data._highlightResult.SpecialAttr_2.display ||
data._highlightResult.SpecialAttr_3.display;
return data;
}
}
And then use these new attributes in your template:
<div id="results">
<div>{{{_highlightResult.attr_1.value}}}</div>
<div>{{{_highlightResult.attr_2.value}}}</div>
<div>{{{_highlightResult.attr_3.value}}}</div>
<!--
The following div will be rendered and displayed only
if any of these special attributes contain an highlighted word.
Only an attribute containing a matched word will be displayed
-->
{{#displaySpecial}}
<div class="other-attr">
{{#_snippetResult.Long_SpecialAttr_1.display}}
{{{_highlightResult.Long_SpecialAttr_1.value}}}
{{/_snippetResult.Long_SpecialAttr_1.display}}
{{#_highlightResult.SpecialAttr_2.display}}
{{{_highlightResult.SpecialAttr_2.value}}}
{{/_highlightResult.SpecialAttr_2.display}}
{{#_highlightResult.SpecialAttr_3.display}}
{{{_highlightResult.SpecialAttr_3.value}}}
{{/_highlightResult.SpecialAttr_3.display}}
</div>
{{#displaySpecial}}
</div>
(By the way, to render HTML, you should use {{{ ... }}} instead of {{...}}, I've replaced them here)
Percentages on Slices of ZingChart Pie Chart
(I asked a similar question once before, but the issue has cropped up again.)
I have a very simple pie chart using ZingCharts, but even though all of the examples on the ZingCharts site show percentages on each slice, I can't get the percentages to show. Note that I am using value boxes. I am using the most recent version of ZingCharts from the CDN: https://cdn.zingchart.com/zingchart.min.js
Note that I am looking for the percentage to appear ON the slice, not in the value box which is text attached to each slice by a line.
Here is my code:
<div id="pie-chart"> </div>
<script>
var slices = var slices = slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"plot":{
"value-box":{
"visible":true,
"placement":"out",
"text":"%t (%v)"
}
},
"series": slices
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
</script>
I want to use a standard pie chart, not a pie chart with more effects.
To show the percentage value on charts, you would need to use the %npv (node-percent-value) token instead of %v which displays the raw value. More information in the pie chart types page : http://www.zingchart.com/docs/chart-types/pie/
Note that the default functionality for a value box is
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.
var slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"series": slices,
"plot" : {
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
}
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>
Zing scatter chart node at border gets chopped off
I am using zing chart in my application with scatter & Line chart, everything working fine but the only problem is the scatter chart node circle gets chopped off when it is at extreme end of the chart. Tried increasing margin, setting offset, z-index and nothing worked for me till now, any solution is appreciated. Regards, Smruti
At this time of writing, the only way I can think of is to adjust your scale-x and scale-y values manually based off of the values you are inserting into the chart. Perhaps a function to preprocess the data to determine a maximum value before rendering a chart would be best. In the example below, I am creating 2 charts. One with set values but does not compensate for markers cutting off the edge, and another which has a helper function to increase the maximum y value by 10%.
HOWEVER! There is an unreleased attribute that will be on the next release we are scheduling within the next week or two. It exposes an attribute called mask-tolerance which will allow markers to bleed past the plot area. Keep an eye out for that as that is the optimum solution. --I'm on the ZingChart team; let me know if you have any further questions.
var myConfig = {
type: "scatter",
plot : {
marker : {
size : 10
}
},
series : [
{
values : [35,42,67,89,25,100,67,100]
}
],
plotarea :{
padding : "10px"
},
scaleY : {
values : "0:90:10"
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 200,
width: 300
});
function preProcessData(){
var myValues = [35,42,67,89,25,100,67,100];
var maxVal = Math.max.apply(null,myValues);
var maxScale = maxVal + Math.floor(maxVal * 0.10);
return {
type: "scatter",
plot : {
marker : {
size : 10
}
},
series : [
{
values : myValues
}
],
plotarea :{
padding : "10px"
},
scaleY : {
values : "0:"+maxScale+":10"
}
};
}
zingchart.render({
id : 'myChart2',
data : preProcessData(),
height: 200,
width: 300
});
<html>
<head>
<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
</head>
<body>
<div id='myChart'></div>
<div id="myChart2"></div>
</body>
</html>