# Discovery - Highcharts
## Produce by [Kwh50](https://kwh50.io)
## Overview
This plugin allows seamless integration between **Discovery**, a powerful tool distributed by [SenX](https://senx.io), 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.
⚠️ **Warning:** If you want to use this plugin for commercial purposes, you need to purchase a license [here](https://shop.highcharts.com/)
## Table of Contents
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Examples](#examples)
- [License](#license)
## Installation
To install the plugin, run this command in your project:
```bash
npm install @_kwh50/discovery-highcharts highcharts
```
## Getting Started
To use this plugin you have to import it in your page
- In HTML
```html
```
- In Typescript
```ts
import "@_kwh50/discovery-highcharts";
```
## Usage
To implement a Highcharts chart inside a Discovery dashboard, you need to specify the type of the tile :
```mc2
'type' 'HC'
```
Then, you can pass your Highcharts chart definition in the options field. :
- HTML
```html
Discovery definition here
```
- React
```tsx
{`{
'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
}
%>
}
]
}`}
```
## Examples
Here you can see an exemple in pure HTML and in React :
- HTML
```html
Stencil Component Starter
{
'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
}
%>
}
]
}
```
- React
```tsx
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 (
{`{
'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
}
%>
}
]
}`}
);
}
export default App;
```
## License
License powered by [LGPL](https://www.gnu.org/licenses/lgpl-3.0.fr.html)