Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

My data in series

Sun Dec 02, 2018 12:51 pm

Hi, I have two arrays like:

rows_name: ["Graph 1" ]
rows_nums: [[0, 0], [12.4, 15.6], [15.2, 28.3], ...]

So how I can use this arrays for building charts with data from those arrays and build so many series as count of elements in my arrays?

Code: Select all

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        inverted: false
    },
    title: {
        text: 'Atmosphere Temperature by Altitude'
    },
    subtitle: {
        text: 'According to the Standard Atmosphere Model'
    },
    xAxis: {
        reversed: false,
        title: {
            enabled: true,
            text: 'Altitude'
        },
        labels: {
            format: '{value} km'
        },
        maxPadding: 0.05
		/*,
        showLastLabel: true
		*/
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            format: '{value}°'
        },
        lineWidth: 2
    },
    legend: {
 //       enabled: true,
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x} km: {point.y}°C'
    },
    plotOptions: {
        spline: {
            marker: {
                enable: false
            }
        }
    },
    series: [{
        name: 'Temperature',
        data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    },
    {
        name: 'Temperature2',
        data: [[2, 17], [20, -55], [30, -57.5], [35, -46.5], [41, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    }
    ]
});

I have tried:

Code: Select all

series: [{
        name: 'Temperature',
        data: rows_nums
    }
    ]
but It doesn't works:

Uncaught Error: Highcharts error #14: www.highcharts.com/errors/14
at Object.a.error (highcharts.js:3)
at e.setData (highcharts.js:288)
at e.init (highcharts.js:279)
at a.Chart.initSeries (highcharts.js:238)
at highcharts.js:263
at Array.forEach (<anonymous>)
at a.each (highcharts.js:21)
at a.Chart.firstRender (highcharts.js:263)
at a.Chart.<anonymous> (highcharts.js:238)
at a.fireEvent (highcharts.js:24)
a.error @ highcharts.js:3
setData @ highcharts.js:288
init @ highcharts.js:279
initSeries @ highcharts.js:238
(anonymous) @ highcharts.js:263
a.each @ highcharts.js:21
firstRender @ highcharts.js:263
(anonymous) @ highcharts.js:238
a.fireEvent @ highcharts.js:24
init @ highcharts.js:237
getArgs @ highcharts.js:237
a.Chart @ highcharts.js:236
a.chart @ highcharts.js:236
(anonymous) @ index.php:16
e @ jquery.min.js:3
dispatch @ jquery.min.js:3
i @ jquery.min.js:3
Last edited by Aectann on Sun Dec 02, 2018 6:56 pm, edited 1 time in total.

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Mon Dec 03, 2018 12:41 pm

Hi, Aectann!

Forgive me, but I don't quite understand what you are trying to achieve. The chart's config you provided me works fine: https://jsfiddle.net/BlackLabel/4kydwah3/

What exactly do you want to do with your data and how do you want your chart to look like?

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

Re: My data in series

Mon Dec 03, 2018 6:10 pm

Hi, rafalS!
I want to change this:

Code: Select all

series: [{
        name: 'Temperature',
        data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    },
    {
        name: 'Temperature2',
        data: [[2, 17], [20, -55], [30, -57.5], [35, -46.5], [41, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    }
    ]
on this:

Code: Select all

series: [{
        name: rows_name,
        data: [rows_nums1]
    },
    {
        name: rows_name,
        data: [rows_nums2]
    },
    {
        name: rows_name,
        data: [rows_numsN]
    }
    ]
where arrays be like rows_nums: [[0, 0], [12.4, 15.6], [15.2, 28.3], ...]

Now I cannot use my own data from arrays.

I have tried this:

Code: Select all

    series: [{
        name: withIndex1,
        data: [withIndex2And4]
    }
    ]
but data set is not working, i see empty Chart:
http://rgho.st/6MbYlq7BD
rafalS wrote:
Mon Dec 03, 2018 12:41 pm
Hi, Aectann!

Forgive me, but I don't quite understand what you are trying to achieve. The chart's config you provided me works fine: https://jsfiddle.net/BlackLabel/4kydwah3/

What exactly do you want to do with your data and how do you want your chart to look like?

Best regards!

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Tue Dec 04, 2018 1:07 pm

You get "Uncaught Error: Highcharts error #14: www.highcharts.com/errors/14" error which clearly says that your data is given by strings but it has to be as numbers.

If you need more of my help, I kindly ask you to explain one more time. You have data like

Code: Select all

[[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
but you want to parse it to have array like this: [[0, 0], [12.4, 15.6], [15.2, 28.3], ...]. Where did you get these values from?


edit: From what I understand at this moment, you are probably trying to parse your data. To loop through an array you should use an array.forEach() loop. I can give you a hand with that, but please, tell me exactly what array you want to parse into proper working series (real example).
Rafal Sebestjanski,
Highcharts Developer

Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

Re: My data in series

Wed Dec 05, 2018 10:51 am

rafalS, thank you, I've understood that I was needed to apply

Code: Select all

 .map(Number)
to my array.

Now I will try to tell you my issue.
I have HTML table with data from DB. When I am clicking on the rows, they are getting class "clicked", so I have <td class="clicked"> and this rows writes into one array like:

Code: Select all

var rows = ["1", "X5CrNi18", "0", "55", "0", "Type1"];
and then I am dividing it on the two arrays like:

Code: Select all

var textArr = ["X5CrNi18"]; // I am using rows[1][1] for creating textArr
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]]; // this values are Num 2 and Num3 from the table
Now the question: how can I create different arrays for different "Name" 's (see table in jsfiddle)?
Example:
What I've done: Clicked all of four rows in the table.
What I have:
var textArr = ["X5CrNi18"];
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]];
What I wanted to have:
var textArr1 = ["X5CrNi18"];
var textArr2 = ["EN31"];
var numArr = [[0, 0],[100, 0.5]];
var numArr2 = [[0, 0], [300, 0.85]];

And then I want to build count of series in my chart which equals count of this arrays.

I've tried to copy my code to jsfiddle for you and it works (sorry for my russian comments, I can translate them If you will need):
https://jsfiddle.net/95vdgtx3/3/

Also you can see the problem with arrays filling, when button "BUILD CHART" is pressed more than one time - values appends into arrays.

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Wed Dec 05, 2018 12:36 pm

Hi, Aectann!

Just to be sure - if you click, for example, 3 rows with No. 1, 7 and 8, you want to build a chart like this? https://jsfiddle.net/BlackLabel/yLvq97de/ (just click "build chart")

So you want to build series like this?

Code: Select all

series: [{
          name: 'X5CrNi18',
          data: [[0, 0], [100, 0.5]]
        }, {
          name: 'EN31',
          data: [[0, 0], [200, 0.68]]
        }, {
          name: 'EN31',
          data: [[0, 0], [300, 0.85]]
        }
Rafal Sebestjanski,
Highcharts Developer

Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

Re: My data in series

Wed Dec 05, 2018 1:29 pm

No, If we will talk about logic of my work: logically this will be not right - to build series with data from only one row. Min two rows for all of n series. And one serie for one name.
Example:
https://jsfiddle.net/Le28pfhw/
For more clarity I've added one more element to the chart "42CrMo4" and added some dots in exist "X5CrNi18" and "EN31".

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Wed Dec 05, 2018 2:09 pm

I still don't understand, from where do you get some values.

You have a table like:
1 X5CrNi18 0 55 0 Steel
2 X5CrNi18 100 55 0.5 Steel
7 EN31 200 20 0.68 Alloy
8 EN31 300 20 0.85 Alloy

And I can see that, when you click all rows, you can create data like

Code: Select all

data: [
            [0, 0],
            [100, 0.5],
             [200, 0.68],
             [300, 0.47]
          ]
But from where do you get values like these?

Code: Select all

data: [
            [0, 0],
            [50, 0.68],
            [60, 0.5],
            [70,1.49]
          ]
I am still unable to find a correlation between rows you click and data that should be displayed...
Rafal Sebestjanski,
Highcharts Developer

Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

Re: My data in series

Wed Dec 05, 2018 2:17 pm

Those values were just an example values.

Okay, here is the all table on this moment:
№ Grade t QPa С Type
1 X5CrNi18 0 55 0 Steel
2 X5CrNi18 100 55 0.5 Steel
3 X5CrNi18 200 55 0.68 Steel
4 X5CrNi18 300 55 0.85 Steel
5 S355J2Q +Z35 0 20 0 Steel
6 S355J2Q +Z35 100 20 0.5 Steel
7 S355J2Q +Z35 200 20 0.68 Steel
8 S355J2Q +Z35 300 20 0.85 Steel
1 42CrMo4 0 55 0 Alloy
2 42CrMo4 100 55 0.5 Alloy
3 42CrMo4 200 55 0.68 Alloy
4 42CrMo4 300 55 0.85 Alloy
5 EN31 0 20 0 Alloy
6 EN31 100 20 0.5 Alloy
7 EN31 200 20 0.68 Alloy
8 EN31 300 20 0.85 Alloy

Table depends on database, as I said. If database will grow, table will grow too.
So, from this table I can get maximum 4 series:
1) For "X5CrNi18"
2) For "S355J2Q +Z35"
3) For "42CrMo4"
4) For "EN31"
In each serie minimum data from two rows with same "Grade".

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Thu Dec 06, 2018 11:18 am

Aectann,

I have consulted this with my colleague and we both don't understand what are you trying to achieve. We just don't see any correlation between a table and series you want to build. Some texts and numbers just don't make a sense for us so we will not able to help you until you clearly explain what do you have and what exactly do you want to build.

From what I can see from the very beginning, your problem isn't really related to Highchart but only JavaScript - you just want to parse your data. Wherefore your question fits more to the StackOverflow forum than this Highcharts forum. Maybe if more people see your question, someone will figure it out and will able to help you so I sincerely advise you to ask your question on StackOverflow.

Kind regards!
Rafal Sebestjanski,
Highcharts Developer

Aectann
Posts: 6
Joined: Sun Dec 02, 2018 12:22 am

Re: My data in series

Thu Dec 06, 2018 11:26 am

okay, I've understood your advise.
Anyway, thank you, rafalS!

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: My data in series

Thu Dec 06, 2018 12:23 pm

I hope you will find the solution for your issue soon ;) I will still be here in case of any other Highcharts questions.
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Usage”