Produce by Kwh50
This plugin allows seamless integration between Discovery, a powerful tool distributed by SenX, and Highcharts, a popular JavaScript charting library. With this plugin, users can visualize data from Discovery dashboards directly in Highcharts, enabling rich and interactive data visualization capabilities.
To install the plugin, run this command in your project:
npm install @_kwh50/discovery-highcharts highchartsTo use this plugin you have to import it in your page
- In HTML
<script src="https://unpkg.com/@_kwh50/discovery-highcharts@1.0.2/dist/discovery-highcharts/discovery-highcharts.esm.js" />- In Typescript
import "@_kwh50/discovery-highcharts";To implement a Highcharts chart inside a Discovery dashboard, you need to specify the type of the tile :
'type' 'HC'
Then, you can pass your Highcharts chart definition in the options field. :
- HTML
<discovery-dashboard url="https://warpcloud.senx.io/api/v0/exec" dashboard-title="Discovery - Highcharts" debug id="dash">
Discovery definition here
</discovery-dashboard>
<script>
// Set HCOptions which correspond to Highcharts options
document.getElementById('dash').setAttribute('options', JSON.stringify({
HCParams: //Your Highcharts chart definition here
}));
</script>- React
<discovery-dashboard url="https://warpcloud.senx.io/api/v0/exec" dashboard-title="Discovery - Highcharts">
{`{
'title' 'Discovery - Highcharts'
'description' 'Discovery dashboard using Highcharts'
'tiles' [
{
'title' 'Highcharts graph'
'x' 0 'y' 0 'w' 12 'h' 3
'type' 'HC'
'options' {
'HCParams' `${Your Highcharts chart definition here}`
}
'macro' <%
1 4 <% DROP
NEWGTS 'g' STORE
1 10 <%
'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g %> FOR STACKTOLIST 'data' STORE
{
'data' $data
}
%>
}
]
}`}
</discovery-dashboard>Here you can see an exemple in pure HTML and in React :
- HTML
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<!-- Import Discovery -->
<script nomodule src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.esm.js"></script>
<script type="module" src="/build/kwh50-discovery-highcharts.esm.js"></script>
<script nomodule src="/build/kwh50-discovery-highcharts.js"></script>
</head>
<body>
<discovery-dashboard url="https://warpcloud.senx.io/api/v0/exec" dashboard-title="Discovery - Highcharts" debug id="dash">
{
'title' 'Discovery - Highcharts'
'description' 'Discovery dashboard using Highcharts'
'tiles' [
{
'title' 'Highcharts graph'
'x' 0 'y' 0 'w' 12 'h' 3
'type' 'HC'
'macro' <%
1 4 <% DROP
NEWGTS 'g' STORE
1 10 <%
'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g %> FOR STACKTOLIST 'data' STORE
{
'data' $data
}
%>
}
]
}
</discovery-dashboard>
<script>
// Set HCOptions which correspond to Highcharts options
document.getElementById('dash').setAttribute('options', JSON.stringify({
HCOptions: {
chart: {
type: 'area',
animation: false,
},
legend: {
enabled: true,
},
rangeSelector: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
text: 'Time',
},
},
yAxis: {
title: {
text: 'Value',
},
},
series: [
{
type: 'line',
name: 'My custom serie',
},
{
type: 'line',
name: 'My other custom serie',
},
{
type: 'line',
name: 'An other one',
},
{
type: 'line',
name: 'And again...',
}
],
},
})
);
</script>
</body>
</html>- React
import React from 'react';
import "@senx/discovery-widgets/dist/discovery/discovery.esm.js";
import "@_kwh50/discovery-highcharts";
import "highcharts/highstock";
//declare the html tag discovery-dashboard
declare global {
namespace JSX {
interface IntrinsicElements {
"discovery-dashboard": any;
}
}
}
function App() {
return (
<div className="App">
<discovery-dashboard
url="https://warpcloud.senx.io/api/v0/exec"
dashboard-title="Discovery - Highcharts"
>
{`{
'title' 'Discovery - Highcharts'
'description' 'Discovery dashboard using Highcharts'
'tiles' [
{
'title' 'Highcharts graph'
'x' 0 'y' 0 'w' 12 'h' 3
'type' 'HC'
'options' {
'HCParams' '${JSON.stringify({
chart: {
type: "area",
animation: false,
},
legend: {
enabled: true,
},
rangeSelector: {
enabled: false,
},
xAxis: {
type: "datetime",
title: {
text: "Time",
},
},
yAxis: {
title: {
text: "Value",
},
},
series: [
{
type: "line",
name: "My custom serie",
},
{
type: "line",
name: "My other custom serie",
},
{
type: "line",
name: "An other one",
},
{
type: "line",
name: "And again...",
},
],
} as Highcharts.Options)}'
}
'macro' <%
1 4 <% DROP
NEWGTS 'g' STORE
1 10 <%
'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g %> FOR STACKTOLIST 'data' STORE
{
'data' $data
}
%>
}
]
}`}
</discovery-dashboard>
</div>
);
}
export default App;License powered by LGPL