I tried to replicate the example shown at Syncfusion but the Sparkline chart isn't rendered at all, neither shows any error. I'm doing it with NextJS.
import { SparklineComponent, Inject, SparklineTooltip } from '#syncfusion/ej2-react-charts'
import { useEffect, useState } from 'react'
function MySparkline () {
const [domLoaded, setDomLoaded] = useState(false)
useEffect(() => {
setDomLoaded(true)
}, [])
return (
<>
{domLoaded &&
<SparklineComponent
id='sparkline'
height='100px'
width='70%'
dataSource={[
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 }
]}
xName='xval'
yName='yval'
type='Area'
>
<Inject services={[SparklineTooltip]}/>
</SparklineComponent>
}
</>
)
}
export default MySparkline
In my page I call it like this
<MySparkline />
Any help would be very appreciated. Thanks
I have prepared the sample in NextJS with sparkline chart. Control is rendered fine without any exception. Please check with the below sample and screenshot.
Screenshot :
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sparkline-1298560420.zip
Related
I've created online cluster in mongodb atlas then created mongodb stitch app, in the stitch javascript editor, how can I get the index of x when match it ? example :
{
"_id": 5646546,
"items":[ {"x": 12, "y": 4} , {"x": 12, "y": 4} ]
}
so when x= 12 the index should be 0
You can write a javascript function in stitch like below :
const getIndex = (inputArray, match) => {
return inputArray.findIndex(element => element.x == match);
};
let obj = {
_id: 5646546,
items: [
{ x: 12, y: 4 },
{ x: 12, y: 4 }
]
};
let obj2 = {
_id: 5646547,
items: [
{ x: 121, y: 4 },
{ x: 12, y: 4 },
{ x: 122, y: 4 }
]
};
console.log(getIndex(obj.items, 12)); // prints 0
console.log(getIndex(obj2.items, 122)); // prints 2
var options = {
chart: {
height: 150,
type: 'rangeBar',
},
plotOptions: {
bar: {
horizontal: true,
endingShape: 'flat',
columnWidth: '70%',
barHeight: '70%',
distributed: false,
colors: {
ranges: [{
from: 0,
to: 0,
color: undefined
}],
backgroundBarColors: [],
backgroundBarOpacity: 1,
},
dataLabels: {
position: 'top',
maxItems: 100,
hideOverflowingLabels: true,
}
}
},
dataLabels: {
enabled: true
},
tooltip: {
y: {
formatter: function(value) {
return moment(new Date(value)).format("HH : mm : ss :")
}
}
},
series: [{
data: [{
x: 'TEAM A',
y: [1358447400000, 1358620200000]
}]
}],
xaxis: {
labels: {
formatter: function (value, timestamp) {
return timestamp//moment(new Date(value)).format("HH : mm : ss :")
},
}
}
// [{
// data: [{
// x: 'Team A',
// y: [1, 5]
// }, {
// x: 'Team B',
// y: [4, 6]
// }, {
// x: 'Team C',
// y: [5, 8]
// }, {
// x: 'Team D',
// y: [3, 11]
// }]
// }, {
// data: [{
// x: 'Team A',
// y: [2, 6]
// }, {
// x: 'Team B',
// y: [1, 3]
// }, {
// x: 'Team C',
// y: [7, 8]
// }, {
// x: 'Team D',
// y: [5, 9]
// }]
// }],
}
var chart = new ApexCharts(
document.querySelector(el),
options
);
Using Apex Chart I want to plot time stamp. Above code is from documentation. But when I run it its not working when i change to number only it works. What is missing in my code
I have a graph with two plot-lines.I need to color the column portion with different color after crossing each plot-lines. But zones makes different column different color not the portion above plot-lone. I have tried Zones & Thresholds but haven't got any solution for column chart.
There are solutions for line chart but they don't work for column chart.
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
events: {
load: function () {
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
subtitle: {
text: ''
},
useUTC: false,
xAxis: [{
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
hour: '%I:%M %P'
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value:,.0f}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
plotLines: [peakPlotLineOption, averagePlotLineOption],
title: {
text: 'Consumption (kWh)',
style: {
color: Highcharts.getOptions().colors[1]
}
}}
, { // Secondary yAxis
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} kWh',
style: {
color: Highcharts.getOptions().colors[0]
}
},
visible: false
}],
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
series: [{
name: 'ABC',
type: 'column',
data:
[
{ x: Date.UTC(2017, 6, 2, 0), y: 49.9, bId: 1 },
{ x: Date.UTC(2017, 6, 2, 1), y: 71.5, bId: 2 },
{ x: Date.UTC(2017, 6, 2, 2), y: 106.4, bId: 3 },
{ x: Date.UTC(2017, 6, 2, 3), y: 129.2, bId: 4 },
{ x: Date.UTC(2017, 6, 2, 4), y: 144.0, bId: 5 },
{ x: Date.UTC(2017, 6, 2, 5), y: 176.0, bId: 6 },
{ x: Date.UTC(2017, 6, 2, 6), y: 135.6, bId: 7 },
{ x: Date.UTC(2017, 6, 2, 7), y: 148.5, bId: 8 },
{ x: Date.UTC(2017, 6, 2, 8), y: 216.4, bId: 9 },
{ x: Date.UTC(2017, 6, 2, 9), y: 194.1, bId: 10 },
{ x: Date.UTC(2017, 6, 2, 10), y: 95.6, bId: 11 },
{ x: Date.UTC(2017, 6, 2, 11), y: 54.4, bId: 12 },
{ x: Date.UTC(2017, 6, 2, 12), y: 45, bId: 13 },
{ x: Date.UTC(2017, 6, 2, 13), y: 62, bId: 14 },
{ x: Date.UTC(2017, 6, 2, 14), y: 35, bId: 15 }
],
tooltip: {
valueSuffix: ' kWh'
},
yAxis: 0,
zones: [{
value: 50,
color: '#90ed7d'
}, {
value: 100,
color: '#FFDE00'
},{
color: '#CE0000'
}]
}
, {
// Series that mimics the plot line
color: '#ee8176',
name: 'contract capacity',
dashStyle: 'Solid',
marker: {
enabled: false
},
events: {
legendItemClick: function (e) {
if (this.visible) {
this.chart.yAxis[0].removePlotLine(averagePlotLine);
}
else {
this.chart.yAxis[0].addPlotLine(averagePlotLineOption);
}
}
},
yAxis: 0
}, {
// Series that mimics the plot line
color: '#9fa7b1',
name: 'max demand',
dashStyle: 'Solid',
marker: {
enabled: false
},
events: {
legendItemClick: function (e) {
if (this.visible) {
this.chart.yAxis[0].removePlotLine(peakPlotLine);
}
else {
this.chart.yAxis[0].addPlotLine(peakPlotLineOption);
}
}
},
yAxis: 0
}
]
});
JsFiddle Colulmn chart
By default Highcharts doesn't support that kind of coloring.
The workaround here is to mimic zones using stacking mechanism and dividing a point into multiple ones that reflect zones. Every series contains points from one zone:
var zones = [{
color: 'green',
start: 0
}, {
color: 'yellow',
start: 30
}, {
color: 'red',
start: 80
}];
//(...)
function prepareSeries(series) {
var newSeries = [],
data = series.data;
series.data = [];
// create separate series for each zone
zones.forEach(function(z, i) {
newSeries.push({
data: []
}); // copy series properties
});
// create new points and add them to new series array
data.forEach(function(p) {
for (var i = 0; i < zones.length; i++) {
var currentZone = zones[i],
nextZone = zones[i + 1],
zoneSeries = newSeries[i];
zoneSeries.color = currentZone.color;
if (nextZone && p.y > nextZone.start) {
zoneSeries.data.push({
x: p.x,
y: nextZone.start - currentZone.start
});
} else if (p.y > currentZone.start) {
zoneSeries.data.push({
x: p.x,
y: p.y - currentZone.start
});
}
}
});
newSeries.reverse();
// one legend for all created series
for (var i = 1; i < newSeries.length; i++) {
newSeries[i].linkedTo = ':previous';
}
return newSeries;
}
Live demo: http://jsfiddle.net/kkulig/g77od3wr/
linkedTo causes that all series are connected (there's only one legend item). tooltip.shared: true and tooltipFormater are used for restoring the previous formatting of the tooltip (total value instead of all series listed).
I just started using Ricksaw for animated graphs and I'm trying to set up my x-axes to list months. Not in a particular time series (yet), but just to correspond with specific data points. I have a fairly simple coding program to try and do this but I can't seem to modify the x-axes labels. Is there an easy way to do this? Also, how would I do something similar for the y-axis? Thanks!
< script >
var myGraph = new Rickshaw.Graph({
element: document.querySelector("#mychart"),
renderer: 'multi',
width: 500,
height: 250,
min: 0,
max: 18,
series: [{
name: "Population1",
color: "steelblue",
renderer: 'lineplot',
data: [{
x: 0,
y: 10,
}, {
x: 1,
y: 3,
}, {
x: 2,
y: 8,
}, {
x: 3,
y: 15,
}, {
x: 4,
y: 12,
}, {
x: 5,
y: 8,
}, {
x: 6,
y: 3,
}, {
x: 7,
y: 5,
}, {
x: 8,
y: 2,
}, {
x: 9,
y: 1,
}, {
x: 10,
y: 4,
}, ]
}, {
name: "Population2",
color: "green",
renderer: 'bar',
data: [{
x: 0,
y: 5,
}, {
x: 1,
y: 3,
}, {
x: 2,
y: 8,
}, {
x: 3,
y: 6,
}, {
x: 4,
y: 3,
}, {
x: 5,
y: 12,
}, {
x: 6,
y: 13,
}, {
x: 7,
y: 14,
}, {
x: 8,
y: 12,
}, {
x: 9,
y: 8,
}, {
x: 10,
y: 9,
}, ]
}]
});
var xTicks = new Rickshaw.Graph.Axis.X({
graph: myGraph,
orientation: "bottom",
element: document.querySelector("#xaxis")
});
var yTicks = new Rickshaw.Graph.Axis.Y({
graph: myGraph,
orientation: "left",
element: document.querySelector("#yaxis")
});
var graphHover = new Rickshaw.Graph.HoverDetail({
graph: myGraph
});
var myLegend = new Rickshaw.Graph.Legend({
graph: myGraph,
element: document.querySelector("#mylegend")
});
var toggling = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: myGraph,
legend: myLegend
});
myGraph.render(); < /script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>
<body>
<div style="margin-bottom:10px; margin-left:20px" id="mylegend"></div>
<div style="display:block; float:left; width:20px; height:280px; padding-bottom:10px;" id="yaxis"></div>
<div>
<div style="margin-left:20px;" id="mychart"></div>
<div style="margin-left:20px" id="xaxis"></div>
</div>
</body>
try something like this
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
tickFormat: function(x){
return new Date(x).toLocaleString();
},
ticks: 4
});
xAxis.render();
I keep getting this error:
Uncaught TypeError: Cannot call method 'map' of undefined
When running this code:
var testdata = [
{
label: "One",
x: 5,
y: 10
},
{
label: "2",
x: 6,
y: 15
},
{
label: "3",
x: 5,
y: 25
},
{
label: "4",
x: 10,
y: 0
}
];
nv.addGraph(function () {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height / 2 - 40;
var chart = nv.models.multiBar()
.stacked(true)
.width(width)
.height(height);
d3.select("#lschart svg")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
Problem is test_data is formatted incorrectly. It should be wrapped in an array containing an object which defines the fields "keys" and "values"
var testdata = [
{
keys: "returns",
values: [
{
label: "One",
x: 5,
y: 10
},
{
label: "2",
x: 6,
y: 15
},
{
label: "3",
x: 5,
y: 25
},
{
label: "4",
x: 10,
y: 0
},
]
}
];