We Keep Coding

zing chart are not being render in Canvas

I am trying to plot some heavy data on zing Chart. Zing charts are normally plot inside a div but for my case my page became leggy after loading 200k points inside zing chart div-tag. In the doc it says to load large data in Canvas.
In the performance documentation of zing chart; in the end of document there is Render type, it says to load in canvas but its not working. according to doc
Render Type
The render method is where you can define the output, which can either render Canvas or SVG. If you are rendering a large dataset, the performance of Canvas will benefit you because DOM explosion happens when rendering in SVG.
Here is my code any suggestion or help.
function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
zingchart.DEV.SORTTOKENS = 0;
zingchart.DEV.PLOTSTATS = 0;
zingchart.DEV.RESOURCES = 0;
zingchart.DEV.KEEPSOURCE = 0;
zingchart.DEV.COPYDATA = 0;
zingchart.DEV.MEDIARULES = 0;
zingchart.SYNTAX = 'dashed';
$('#lineChart_f').remove();
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
let configTimeAndAngle = {
"type": "line",
plot: {
mode: 'fast',
'hint-ts': true
},
legend: {
layout: "1x2", //row x column // items means in one two we added two items as legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
'scale-x': {
zooming: true,
labels: timeArray,
'max-items':8,
transform: {
type: 'date'
},
item: {
'font-size':10
}
},
'scale-y': {
'auto-fit': true,
guide: {
'line-style': "solid"
},
item: {
'font-size':10
}
},
tooltip: {
// text: 'Time : %kt (X) Freq : %%node-value (Y).',
text: 'Time : %kt (X) Freq : %v (Y).',
alpha: 0.9,
backgroundColor: '#F44336',
borderColor: '#B71C1C',
borderRadius: 2,
borderWidth: 1,
padding: '5 10'
},
gui: {
behaviors: [
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [
{
"values": frequency_array_ff,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
"values": frequency_array_fh,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
};
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});
}
Updated
I have tried to plot like this but still issue. Above chart is also updated and we i need to change how I pass time ? my time format is like 2022-10-10 23:24:03 an array of time like this so in the 'scale-x': { labels: timeArray} i add time like this
"series": [
{
values: [],
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
values: [],
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
configTimeAndAngle.series[0].values.push([frequency_array_ff]);
configTimeAndAngle.series[1].values.push([frequency_array_fh]);
configTimeAndAngle.series[0]=values.[frequency_array_ff];
configTimeAndAngle.series[1]=values[frequency_array_fh];
configTimeAndAngle.series[0]=frequency_array_ff;
configTimeAndAngle.series[1]=frequency_array_fh];

I've managed to create you a demo in a studio application with over 200k nodes, maybe you can use this setup with canvas in the render method for reference and see how it goes. I hope this helps.

To be honest I also had the same issue all day, then I saw this and I have found the issue on your question. you have use canvas instead use div and while rendering use
// this is your code
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
instead just use
$('#canvas_div_f').append(
'<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);
and while render set output to canvas.
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});

How to configure ZingChart width and height?

I'm trying to use ZingChart. Trying to build gauge widget. Question is for those who worked with zingChart. How to configure width and height of space around chart. So here is what i'm saying about:
White container is a div with 100% width and height. All yellow space is plotarea of the zingChart, and in the center is gauge.
I want to cut all yellow space at the top and bottom around gauge. How to configure that?
Here is my chart config in react:
import React from 'react'
import './PlanGauge.sass'
import 'zingchart/es6'
import ZingChart from 'zingchart-react'
import WidgetTile from '../WidgetTile/WidgetTile'
function PlanGauge({ title }) {
const widgetConfig = {
minValue: 0,
maxValue: 150000,
currentValue: 100000,
}
const chartConfig = {
type: 'gauge',
'scale-r': {
aperture: 180,
values: `${widgetConfig.minValue}:${widgetConfig.maxValue}`,
ring: {
size: 12,
'background-color': '#F2F4F6',
tick: {
visible: false,
},
},
center: {
visible: false,
},
tick: {
visible: false,
},
item: {
//Scale Label Styling
visible: false,
},
},
plot: {
size: '100%',
},
series: [
{
values: [widgetConfig.currentValue],
'background-color': '#000',
'border-color': 'red',
indicator: [4, 4, 0, 0, 0.9],
},
],
plotarea: {
marginTop: 0,
marginBottom: 0,
backgroundColor: 'yellow',
},
}
return (
<WidgetTile title={title}>
<ZingChart data={chartConfig} />
</WidgetTile>
)
}
export default PlanGauge

Please set padding in the ZingChart configuration's plot object to control the area around it. The Plot object controllers the styling of the chart.

Set margin in the ZingChart configuration.
plotarea: {
margin: '0 0 0 0',
},
It works for me.

Vertical stacking of line plots using ChartJs library sharing same x axis

I want to have three LineCharts below each other. They are sharing same x-axis (time). I was able to create this:
However, it is very useless to have x-axis on the top and middle chart. I would prefer not to display the x-axis for the top and middle. When I tried it, I got this:
But as you can see, the last grid for 12AM is not visible for the top and middle chart, and the grids are not aligned (it looks weird). Each chart is rendered as a separate component using React.
Here are my TimelinePlot component which is rendering each LineChart (sorry for the mess, but I did not yet refactor it):
import React from 'react';
import { Line } from 'react-chartjs-2';
import { GetColors } from '../../utils/PlotDescriptionHelper';
class TimelinePlot extends React.Component {
MapPropsToData(props) {
const colors = GetColors(props.series.length);
return props.series.map((dataset, index) => {
return {
label: dataset.name,
data: dataset.data,
borderWidth: 1,
fill: false,
borderColor: colors[index],
//pointBackgroundColor: 'rgb(255,255,255)',
};
});
}
MapPropsToOptions(props) {
return {
elements: {
point: {
radius: 0,
},
},
legend: {
// display: props.showLegend,
position: 'top',
align: 'end',
},
scales: {
yAxes: [
{
ticks: props.yAxisTicks,
scaleLabel: {
display: true,
labelString: props.yAxisName + props.yAxisUnit,
},
},
],
xAxes: [
{
type: 'time',
// position: props.xAxisPosition,
time: {
parser: 'YYYY-MM-DD HH:mm',
tooltipFormat: 'll HH:mm',
},
// scaleLabel: {
// display: true,
// //labelString: 'Date',
// },
ticks: {
min: props.xAxisStart,
max: props.xAxisEnd,
//display: true,
display: props.xAxisDisplay,
},
},
],
},
};
}
render() {
const dataset = { datasets: this.MapPropsToData(this.props) };
return (
<div className='measurement-row'>
<Line
data={dataset}
options={this.MapPropsToOptions(this.props)}
position='absolute'
height='15%'
width='80%'
/>
</div>
);
}
}
And here is the render method of the parent using TimelinePlot component:
render() {
var plots = Object.keys(this.state.timeSeries).map((key, index) => {
return (
<TimelinePlot
key={key + index}
series={this.state.timeSeries[key]}
yAxisName={FirstLetterToUpper(key)}
yAxisUnit={MapKeyToUnit(key)}
xAxisDisplay={index === Object.keys(this.state.timeSeries).length - 1}
xAxisPosition={index === 0 ? 'top' : 'bottom'}
xAxisStart={this.state.startTime}
xAxisEnd={this.state.endTime}
showLegend={index === 0}
yAxisTicks={MapYAxisTicks(key)}
/>
);
});
return (
<div className='width-90'>
<TimelineDashboardHeader />
<div className='dashboard__column'>{plots}</div>
</div>
);
}

Style dash in highchart graphic

I'm trying to change the line style of a chart, but I'm not getting it. I'm
looking to change the black line in the middle of the chart, to the style "DASH"
I already put the "dashStyle: 'dash'" in several places, but without success.
The example is the one of the highcharts

I'm trying to change the line style of a chart, but I'm not getting
it.
It is not possible because what you call line is actually an SVG rectangle element. That's why it can't be dashed.
However, you can achieve what you want by adding some custom logic and using Highcharts.SVGRenderer. Simply remove default rectangle graphic of each series point and render several rectangles with breaks to create a dashed line. Check the code and demo posted below.
Code:
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet',
events: {
render: function() {
var chart = this,
point = chart.series[0].points[0],
width = point.shapeArgs.height,
height = point.shapeArgs.width,
x = chart.plotLeft,
xEnd = x + width,
y = chart.plotTop + point.shapeArgs.x,
dashWidth = 15,
dashBreakWidth = 5,
dashColor = '#000',
dashElem,
dashAmount,
realDashBreakWidth;
if (chart.dashedColl) {
chart.dashedColl.forEach(function(oldDashElem) {
oldDashElem.destroy();
});
}
point.graphic.element.remove();
chart.dashedColl = [];
dashAmount = Math.floor(width / (dashWidth + dashBreakWidth));
realDashBreakWidth = (width - dashAmount * dashWidth) / (dashAmount - 1);
while (x < xEnd) {
dashElem = chart.renderer.rect(x, y, dashWidth, height)
.attr({
fill: dashColor
})
.add()
.toFront();
chart.dashedColl.push(dashElem);
x += dashWidth + realDashBreakWidth;
}
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: 'red',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Demo:
https://jsfiddle.net/BlackLabel/7azfso1r/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.Point#remove
https://api.highcharts.com/highcharts/chart.events.render

Custom chart suggestions

I've always use flot.js for common charting requirements, but I'd like to explore new ways to visualize data that might be beyond this charting library. I'd appreciate any advice or recommendations as to how others might programmatically render the custom display chart below. Maybe CSS?

I know you probably weren't looking for an answer spelling out how to implement this in flot, but it was a fun exercise.
Getting creative with hiding and stacking bars with the stack plugin allows you to represent your bounds. For each set of bounds, you'll need to create a hidden bar with your lower bound value and then create a visible bar with your upper bound value (and stack the two). Specifying which bars should stack on each other is easy by setting the stack option to the same key.
Once the bars are setup, the next step is to set the options of the chart. A grid marking handles displaying the current value. Hiding both axes effectively hides the grid.
The rest comes down to creating methods to append div elements to placeholder to show the bar values, labels, and marking value.
This is a basic implementation of your example image that really focuses on the flot component of the chart. With a bit more time, the extra appended div elements could be styled in such a way to more closely match your example.
This JSFiddle contains the code below for easier review.
$(function() {
var data = [{
data: [ [0, 21.51] ],
lines: { show: false },
bars: { show: false },
stack: 0,
label: 'Hidden'
},{
data: [ [1, 32.50] ],
lines: { show: false },
bars: { show: false },
stack: 1,
label: 'Hidden'
},{
data: [ [2, 47.14] ],
lines: { show: false },
bars: { show: false },
stack: 2,
label: 'Hidden'
},{
data: [ [0, 37.77] ],
stack: 0,
label: 'Last Year'
},{
data: [ [1, 24.65] ],
stack: 1,
label: 'Last Month'
}, {
data: [ [2, 7.67] ],
stack: 2,
label: 'Last Week'
}];
var options = {
series: {
bars: { show: true },
points: { show: false }
},
xaxis: { show: false },
yaxis: { show: false },
grid: {
show: true,
borderWidth: 0,
backgroundColor: null,
markings: [{
xaxis: { from: 0, to: 3 },
yaxis: { from: 48.01, to: 48.01 },
color: "#000000"
}]
},
legend: { show: false }
};
var plot = $.plot($('#graph'), data, options);
var plotData = plot.getData();
var markings = plot.getOptions().grid.markings;
displayBarValues(plotData);
displayBarLabels(plotData);
displayMarkingValues(markings);
// display values next to bars
function displayBarValues(plotData) {
$.each(plotData, function(i, data) {
var stackedValue = data.data[0][1];
if (data.bars.show) {
stackedValue = findStackedValue(plotData, data.stack);
}
var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
$('<div class="data-point-value">-- $' + stackedValue + '</div>').css( {
left: offset.left + 30,
top: offset.top - 8,
}).appendTo(plot.getPlaceholder());
});
}
function findStackedValue(dataSeries, stackNumber) {
var stackedValue = 0;
for (var i =0; i < dataSeries.length; i++) {
if (dataSeries[i].stack === stackNumber) {
stackedValue = stackedValue + dataSeries[i].data[0][1];
}
}
return stackedValue;
}
// display a marking value
function displayMarkingValues(markings) {
$.each(markings, function(i, marking) {
var offset = plot.pointOffset({x: marking.xaxis.to, y: marking.yaxis.to });
$('<div class="data-point-value">------ $' + marking.yaxis.to + '</div>').css( {
left: offset.left,
top: offset.top - 8,
}).appendTo(plot.getPlaceholder());
});
}
function displayBarLabels(plotData) {
$.each(plotData, function(i, data) {
if (data.bars.show) {
var stackedValue = findStackedValue(plotData, data.stack);
var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
$('<div class="data-point-label">' + data.label + '</div>').css({
left: offset.left - 35,
top: offset.top + 50,
}).appendTo(plot.getPlaceholder());
}
});
}
});
#graph {
margin: 0 auto;
text-align: center;
width: 100px;
height: 600px;
}
.data-point-value {
position: absolute;
white-space: nowrap;
font-size: 11px;
}
.data-point-label {
position: absolute;
white-space: nowrap;
width: 100px;
font-size: 11px;
text-align: right;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<script src="https://rawgit.com/flot/flot/master/source/jquery.flot.stack.js"></script>
<div id="graph"></div>

I have used Fusion Charts. Its pretty easy to customize and it works well in all browsers. Also have a look at Chart JS. Its pretty cool and its open source

I'v been using Chart.js for a while. While it is sweet at first glance, and you really can do super awesome stuff with it out of the box, it can be really limiting later on when you come across the need to do some simple/custom details that are not in documentation. For example: label outside the chart; turning off background for bar chart, doughnut bar with 1 value (for example - i have doughnut chart, with value 20%, i want the difference to be colored - you cant do that).
Of course all these stuff can be addressed and made with customizing .js file, and extending it but if you don't have time for that and you want out of the box solution, you can be stuck on simple detail so i suggest reading full docs to see if it is up to your expetations.

I would recommend D3.js with the caveat the the learning curve is steep; let me try to explain:
In something like chart.js, chartist,etc you provide the data, chart type and some configuration and you have your chart. In D3, it is a bit more complicated in the sense that D3 provides the framework for displaying and interacting with data via the Dom elements you design and specify.( Mostly svg's although you can also use divs,spans etc)
While it feels daunting at first and the documentation is basically an API Reference, there are hundreds of examples you can use as base or inspiration.

I'v been using (ChartJS, Morris, Inline Charts) for dashboard. It may help you much to customize the chart

I would recommend Chartist.js. It is fully responsive with great flexibility and DPI dependent.
you're able to style your charts with CSS in #media queries and lot of animation options. they have given examples for line chart, bar chart, pie chart with code. So it will definitely help you.

I like amCharts.
Can do all kinds of stuff and is free to use.

Google gives you an interesting charting library.
May want to try that but it requires you to be connected to Google for it to work (can't run it offline).

Here's a shot at it with HighCharts. I adapted the 'Stacked and grouped column' example at http://www.highcharts.com/demo/column-stacked-and-grouped.
Obviously there's work to be done in getting the labels and axes right, but I think this is a good start.
jsFiddle at http://jsfiddle.net/saevj2n4/1/
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 200,
height: 1000
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Profit']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
//groupPadding: .45,
pointPadding: 0,
//pointWidth: 40,
}
},
series: [{
name: 'Min',
data: [59.28 - 21.58 ],
stack: 'Last Year',
color: "#919191"
}, {
name: 'Max',
data: [21.58 ],
stack: 'Last Year',
color: "transparent"
}, {
name: 'Min',
data: [ 57.15 - 32.5 ],
stack: 'Last Month',
color: "#6095c9"
}, {
name: 'Max',
data: [32.50],
stack: 'Last Month',
color: "transparent"
}, {
name: 'Min',
data: [54.81 - 47.14 ],
stack: 'Last Week',
color: "#745f8e"
}, {
name: 'Max',
data: [47.14],
stack: 'Last Week',
color: "transparent"
}]
});
});